@pismo/marola 0.0.1-alpha.17 → 0.0.1-alpha.19

package/dist/components/Pagination/Pagination.js

@@ -1,112 +1,114 @@
 import '../../assets/Pagination.css';
-import { jsxs as x, jsx as i, Fragment as M } from "react/jsx-runtime";
-import { c as C } from "../../clsx-DB4S2d7J.js";
-import { _ as O, a as S } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import { u as A } from "../../useControlled-CCMYYdCM.js";
-const E = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
-function $(e = {}) {
+import { jsxs as m, jsx as o, Fragment as M } from "react/jsx-runtime";
+import { c as p } from "../../clsx-DB4S2d7J.js";
+import { Select as k } 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(g = {}) {
   const {
     boundaryCount: a = 1,
-    componentName: _ = "usePagination",
+    componentName: e = "usePagination",
     count: s = 1,
-    defaultPage: b = 1,
-    disabled: h = !1,
-    hideNextButton: c = !1,
-    hidePrevButton: m = !1,
-    onChange: t,
-    page: o,
-    showFirstButton: p = !1,
-    showLastButton: f = !1,
-    siblingCount: u = 1
-  } = e, d = O(e, E), [r, k] = A({
-    controlled: o,
-    default: b,
-    name: _,
+    defaultPage: v = 1,
+    disabled: _ = !1,
+    hideNextButton: f = !1,
+    hidePrevButton: u = !1,
+    onChange: h,
+    page: n,
+    showFirstButton: r = !1,
+    showLastButton: x = !1,
+    siblingCount: d = 1
+  } = g, b = A(g, R), [i, S] = $({
+    controlled: n,
+    default: v,
+    name: e,
     state: "page"
-  }), N = (n, l) => {
-    o || k(l), t && t(n, l);
-  }, v = (n, l) => {
-    const F = l - n + 1;
+  }), N = (t, c) => {
+    n || S(c), h && h(t, c);
+  }, C = (t, c) => {
+    const F = c - t + 1;
     return Array.from({
       length: F
-    }, (W, I) => n + I);
-  }, j = v(1, Math.min(a, s)), P = v(Math.max(s - a + 1, a + 1), s), w = Math.max(
+    }, (z, I) => t + I);
+  }, L = C(1, Math.min(a, s)), P = C(Math.max(s - a + 1, a + 1), s), y = Math.max(
     Math.min(
       // Natural start
-      r - u,
+      i - d,
       // Lower boundary when page is high
-      s - a - u * 2 - 1
+      s - a - d * 2 - 1
     ),
     // Greater than startPages
     a + 2
   ), B = Math.min(
     Math.max(
       // Natural end
-      r + u,
+      i + d,
       // Upper boundary when page is low
-      a + u * 2 + 2
+      a + d * 2 + 2
     ),
     // Less than endPages
     P.length > 0 ? P[0] - 2 : s - 1
-  ), L = [
-    ...p ? ["first"] : [],
-    ...m ? [] : ["previous"],
-    ...j,
+  ), j = [
+    ...r ? ["first"] : [],
+    ...u ? [] : ["previous"],
+    ...L,
     // Start ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...w > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
+    ...y > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
     // Sibling pages
-    ...v(w, B),
+    ...C(y, B),
     // End ellipsis
     // eslint-disable-next-line no-nested-ternary
     ...B < s - a - 1 ? ["end-ellipsis"] : s - a > a ? [s - a] : [],
     ...P,
-    ...c ? [] : ["next"],
-    ...f ? ["last"] : []
-  ], y = (n) => {
-    switch (n) {
+    ...f ? [] : ["next"],
+    ...x ? ["last"] : []
+  ], w = (t) => {
+    switch (t) {
       case "first":
         return 1;
       case "previous":
-        return r - 1;
+        return i - 1;
       case "next":
-        return r + 1;
+        return i + 1;
       case "last":
         return s;
       default:
         return null;
     }
-  }, D = L.map((n) => typeof n == "number" ? {
-    onClick: (l) => {
-      N(l, n);
+  }, D = j.map((t) => typeof t == "number" ? {
+    onClick: (c) => {
+      N(c, t);
     },
     type: "page",
-    page: n,
-    selected: n === r,
-    disabled: h,
-    "aria-current": n === r ? "true" : void 0
+    page: t,
+    selected: t === i,
+    disabled: _,
+    "aria-current": t === i ? "true" : void 0
   } : {
-    onClick: (l) => {
-      N(l, y(n));
+    onClick: (c) => {
+      N(c, w(t));
     },
-    type: n,
-    page: y(n),
+    type: t,
+    page: w(t),
     selected: !1,
-    disabled: h || n.indexOf("ellipsis") === -1 && (n === "next" || n === "last" ? r >= s : r <= 1)
+    disabled: _ || t.indexOf("ellipsis") === -1 && (t === "next" || t === "last" ? i >= s : i <= 1)
   });
-  return S({
+  return E({
     items: D
-  }, d);
+  }, b);
 }
-const R = "_pagination_9gf1w_1", g = {
-  pagination: R,
-  "per-page-container": "_per-page-container_9gf1w_8",
-  "pages-navigator-container": "_pages-navigator-container_9gf1w_20",
-  "pages-navigator-container__label": "_pages-navigator-container__label_9gf1w_31",
-  "page-number__btn": "_page-number__btn_9gf1w_31",
-  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_9gf1w_44",
-  "page-number__btn--selected": "_page-number__btn--selected_9gf1w_69"
-}, T = {
+const W = "_pagination_n3y7g_1", l = {
+  pagination: W,
+  "per-page-container": "_per-page-container_n3y7g_8",
+  "per-page-container__select": "_per-page-container__select_n3y7g_17",
+  "pages-navigator-container": "_pages-navigator-container_n3y7g_22",
+  "pages-navigator-container__label": "_pages-navigator-container__label_n3y7g_37",
+  "page-number__btn": "_page-number__btn_n3y7g_37",
+  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_n3y7g_50",
+  "page-number__btn--selected": "_page-number__btn--selected_n3y7g_75"
+}, q = {
   pt: {
     showing: "Exibindo",
     of: "de",
@@ -121,90 +123,91 @@ const R = "_pagination_9gf1w_1", g = {
     previous: "Previous",
     next: "Next"
   }
-}, J = (e) => {
-  const a = e.perPageOptions || [5, 10, 25, 50, 100], _ = Math.ceil(e.totalItems / e.perPage), s = e.currentPage <= 1, b = e.currentPage >= _, h = e.t || T[e.language || "en"], c = (t) => h[t], { items: m } = $({
-    count: _,
+}, U = ({ perPageOptions: g = [5, 10, 25, 50, 100], language: a = "en", ...e }) => {
+  const s = Math.ceil(e.totalItems / e.perPage), v = e.currentPage <= 1, _ = e.currentPage >= s, f = e.t || q[a], u = (n) => f[n], { items: h } = T({
+    count: s,
     hideNextButton: !0,
     hidePrevButton: !0,
     page: e.currentPage,
-    onChange: (t, o) => e.onPageChange(o),
     siblingCount: 1,
-    boundaryCount: 2
+    boundaryCount: 2,
+    onChange: (n, r) => e.onPageChange(r)
   });
-  return /* @__PURE__ */ x("div", { className: C(g.pagination, e.className), "data-testid": e["data-testid"], children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ m("div", { className: p(l.pagination, e.className), "data-testid": e["data-testid"], children: [
+    /* @__PURE__ */ o(
       "div",
       {
-        className: C(g["per-page-container"], e.classNamePerPage),
-        "data-testid": e["data-testid__per-page"],
-        children: a && /* @__PURE__ */ x(M, { children: [
-          c`showing`,
-          /* @__PURE__ */ i(
-            "select",
+        className: p(l["per-page-container"], e.classNamePerPage),
+        "data-testid": e["data-testid-per-page"],
+        children: g && /* @__PURE__ */ m(M, { children: [
+          /* @__PURE__ */ o("span", { children: u`showing` }),
+          /* @__PURE__ */ o(
+            k,
             {
-              value: e.perPage,
-              name: "per-page-select",
-              id: "per-page-select",
-              onChange: (t) => e.onRowsPerPageChange(t.target.value),
-              children: a.map((t) => {
-                const o = typeof t == "number";
-                return /* @__PURE__ */ i(
-                  "option",
+              className: l["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__ */ o(
+                  k.Option,
                   {
-                    value: o ? t : t.value,
-                    children: o ? t : t.label
+                    value: String(r ? n : n.value),
+                    children: r ? n : n.label
                   },
-                  `per-page__${o ? t : t.value}`
+                  `per-page__${r ? n : n.value}`
                 );
               })
             }
           ),
-          c`of`,
-          " ",
-          /* @__PURE__ */ i("strong", { children: e.totalItems }),
-          " ",
-          c`results`
+          /* @__PURE__ */ m("span", { children: [
+            u`of`,
+            " ",
+            /* @__PURE__ */ o("strong", { children: e.totalItems }),
+            " ",
+            u`results`
+          ] })
         ] })
       }
     ),
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ m(
       "div",
       {
-        className: C(g["pages-navigator-container"], e.classNamePagesNav),
-        "data-testid": e["data-testid__per-page"],
+        className: p(l["pages-navigator-container"], e.classNamePagesNav),
+        "data-testid": e["data-testid-pages-nav"],
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ o(
             "button",
             {
-              className: g["pages-navigator-container__previous-next-btn"],
-              disabled: s,
+              className: l["pages-navigator-container__previous-next-btn"],
+              disabled: v,
               onClick: () => e.onPageChange(e.currentPage - 1),
               type: "button",
-              children: c`previous`
+              children: u`previous`
             },
             "page__previous"
           ),
-          m.map(({ page: t, type: o, selected: p, ...f }, u) => {
-            let d = /* @__PURE__ */ i(M, {});
-            return o === "start-ellipsis" || o === "end-ellipsis" ? d = /* @__PURE__ */ i("span", { className: g["pages-navigator-container__label"], children: "..." }) : o === "page" ? d = /* @__PURE__ */ i(
+          /* @__PURE__ */ o("ul", { children: h.map(({ page: n, type: r, selected: x, ...d }, b) => {
+            let i = /* @__PURE__ */ o(M, {});
+            return r === "start-ellipsis" || r === "end-ellipsis" ? i = /* @__PURE__ */ o("span", { className: l["pages-navigator-container__label"], children: "..." }) : r === "page" ? i = /* @__PURE__ */ o(
               "button",
               {
-                className: [g["page-number__btn"], p ? g["page-number__btn--selected"] : ""].join(" ").trim(),
-                onClick: () => e.onPageChange(t || 0),
+                className: p(l["page-number__btn"], x && l["page-number__btn--selected"]),
+                onClick: () => e.onPageChange(n || 0),
                 type: "button",
-                children: t
+                children: n
               },
-              `page__${u}`
-            ) : d = /* @__PURE__ */ i("button", { type: "button", ...f, children: o }), /* @__PURE__ */ i("li", { children: d }, u);
-          }),
-          /* @__PURE__ */ i(
+              `page__${b}`
+            ) : i = /* @__PURE__ */ o("button", { type: "button", ...d, children: r }), /* @__PURE__ */ o("li", { children: i }, b);
+          }) }),
+          /* @__PURE__ */ o(
             "button",
             {
-              className: g["pages-navigator-container__previous-next-btn"],
-              disabled: b,
+              className: l["pages-navigator-container__previous-next-btn"],
+              disabled: _,
               onClick: () => e.onPageChange(e.currentPage + 1),
               type: "button",
-              children: c`next`
+              children: u`next`
             },
             "page__next"
           )
@@ -214,6 +217,6 @@ const R = "_pagination_9gf1w_1", g = {
   ] });
 };
 export {
-  J as Pagination,
-  T as paginationDefaultTranslations
+  U as Pagination,
+  q as paginationDefaultTranslations
 };

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

@@ -0,0 +1,17 @@
+import { PaginationProps } from '../../main';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithCustomPerPageOptions: Story;
+export declare const WithLanguage: Story;
+export declare const WithCustomTexts: Story;