@tipp/ui 2.3.34 → 2.3.36

package/dist/index.cjs

@@ -1691,7 +1691,18 @@ CircleFileIcon.displayName = "CircleFileIcon";
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
-  const [page, setPage] = (0, import_react20.useState)(() => props.page || props.defaultPage || 1);
+  const isControlled = props.page !== void 0;
+  const [internalPage, setInternalPage] = (0, import_react20.useState)(props.defaultPage || 1);
+  const page = isControlled ? props.page : internalPage;
+  const goToPage = (0, import_react20.useCallback)(
+    (next2) => {
+      if (!isControlled) {
+        setInternalPage(next2);
+      }
+      onChange == null ? void 0 : onChange(next2);
+    },
+    [isControlled, onChange]
+  );
   const visibleItems = (0, import_react20.useMemo)(() => {
     let start = Math.max(1, page - siblingCount);
     let end = Math.min(count, page + siblingCount);
@@ -1702,14 +1713,6 @@ function Pagination(props) {
     }
     return Array.from({ length: end - start + 1 }, (_, i) => i + start);
   }, [count, page, siblingCount]);
-  (0, import_react20.useEffect)(() => {
-    onChange == null ? void 0 : onChange(page);
-  }, [onChange, page]);
-  (0, import_react20.useEffect)(() => {
-    if (props.page) {
-      setPage(props.page);
-    }
-  }, [props.page]);
   const prev = (0, import_react20.useMemo)(() => {
     const p = page - 1;
     return p < 1 ? void 0 : p;
@@ -1719,18 +1722,18 @@ function Pagination(props) {
     return n > count ? void 0 : n;
   }, [count, page]);
   const onClickPrev = (0, import_react20.useCallback)(() => {
-    prev && setPage(prev);
-  }, [prev]);
+    if (prev) goToPage(prev);
+  }, [prev, goToPage]);
   const onClickNext = (0, import_react20.useCallback)(() => {
-    next && setPage(next);
-  }, [next]);
+    if (next) goToPage(next);
+  }, [next, goToPage]);
   const doublePrev = (0, import_react20.useMemo)(() => {
     if (!visibleItems.length) return;
     return Math.max(0, visibleItems[0] - 1);
   }, [visibleItems]);
   const onClickDoublePrev = (0, import_react20.useCallback)(() => {
-    doublePrev && setPage(doublePrev);
-  }, [doublePrev]);
+    if (doublePrev) goToPage(doublePrev);
+  }, [doublePrev, goToPage]);
   const doubleNext = (0, import_react20.useMemo)(() => {
     if (!visibleItems.length) return;
     const n = visibleItems[visibleItems.length - 1] + 1;
@@ -1738,8 +1741,8 @@ function Pagination(props) {
     return Math.min(count, n);
   }, [count, visibleItems]);
   const onClickDoubleNext = (0, import_react20.useCallback)(() => {
-    doubleNext && setPage(doubleNext);
-  }, [doubleNext]);
+    if (doubleNext) goToPage(doubleNext);
+  }, [doubleNext, goToPage]);
   const iconSize = {
     height: 24,
     width: 24
@@ -1766,7 +1769,7 @@ function Pagination(props) {
         {
           className: `page-button ${item === page ? "active" : ""}`,
           onClick: () => {
-            setPage(item);
+            goToPage(item);
           },
           type: "button",
           children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typo, { variant: "body", children: item })