bj-web-components 0.2.27 → 0.2.28

package/dist/web/Pagination/Pagination.mjs

@@ -1,253 +1,329 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useState as w, useRef as T, useEffect as rt, useMemo as ct } from "react";
-import { createPortal as dt } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
 /* empty css                 */
-function pt({
-  triggerRect: v,
-  dropdownHeight: r,
-  viewportHeight: k
+function defaultResolvePopupPlacement({
+  triggerRect,
+  dropdownHeight,
+  viewportHeight
 }) {
-  const L = k - v.bottom, z = v.top;
-  return L < r && z >= r ? "top" : "bottom";
+  const spaceBelow = viewportHeight - triggerRect.bottom;
+  const spaceAbove = triggerRect.top;
+  return spaceBelow < dropdownHeight && spaceAbove >= dropdownHeight ? "top" : "bottom";
 }
-const ft = (v) => {
+const Pagination = (props) => {
   const {
-    current: r,
-    defaultCurrent: k = 1,
-    pageSize: L,
-    defaultPageSize: z = 10,
-    total: b = 0,
-    onChange: c,
-    onShowSizeChange: x,
-    showSizeChanger: H = !1,
-    showQuickJumper: J = !1,
-    pageSizeOptions: $ = [10, 20, 50, 100],
-    disabled: l = !1,
-    hideOnSinglePage: Q = !1,
-    showTotal: M,
-    size: W = "medium",
-    align: q = "start",
-    simple: F = !1,
-    popupPlacement: d,
-    resolvePopupPlacement: y,
-    dropdownClassName: S,
-    t: N = (t) => t,
-    className: E,
-    style: B
-  } = v, [G, O] = w(k), [K, U] = w(z), [m, g] = w(!1), [f, V] = w("bottom"), [P, X] = w(null), p = T(null), R = T(null), o = r ?? G, u = L ?? K, s = Math.ceil(b / u);
-  if (Q && s <= 1)
+    current: controlledCurrent,
+    defaultCurrent = 1,
+    pageSize: controlledPageSize,
+    defaultPageSize = 10,
+    total = 0,
+    onChange,
+    onShowSizeChange,
+    showSizeChanger = false,
+    showQuickJumper = false,
+    pageSizeOptions = [10, 20, 50, 100],
+    disabled = false,
+    hideOnSinglePage = false,
+    showTotal,
+    size = "medium",
+    align = "start",
+    simple = false,
+    popupPlacement,
+    resolvePopupPlacement,
+    dropdownClassName,
+    t = (text) => text,
+    className,
+    style
+  } = props;
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const [isSizeDropdownOpen, setIsSizeDropdownOpen] = useState(false);
+  const [dropdownPlacement, setDropdownPlacement] = useState("bottom");
+  const [dropdownAnchor, setDropdownAnchor] = useState(null);
+  const sizeDropdownRef = useRef(null);
+  const dropdownPortalRef = useRef(null);
+  const current = controlledCurrent ?? internalCurrent;
+  const pageSize = controlledPageSize ?? internalPageSize;
+  const totalPages = Math.ceil(total / pageSize);
+  if (hideOnSinglePage && totalPages <= 1) {
     return null;
-  const h = (t) => {
-    l || t < 1 || t > s || t === o || (r === void 0 && O(t), c == null || c(t, u));
-  }, Y = (t) => {
-    const n = Math.ceil(b / t), e = Math.min(o, n) || 1;
-    L === void 0 && (U(t), r === void 0 && O(e)), x == null || x(e, t), c == null || c(e, t);
-  }, D = (t) => {
-    if (!p.current) return;
-    const n = p.current.getBoundingClientRect();
-    X({
-      left: n.left + n.width / 2,
-      top: t === "bottom" ? n.bottom + 4 : n.top - 4
+  }
+  const handlePageChange = (page) => {
+    if (disabled || page < 1 || page > totalPages || page === current) {
+      return;
+    }
+    if (controlledCurrent === void 0) {
+      setInternalCurrent(page);
+    }
+    onChange == null ? void 0 : onChange(page, pageSize);
+  };
+  const handlePageSizeChange = (newPageSize) => {
+    const newTotalPages = Math.ceil(total / newPageSize);
+    const newCurrent = Math.min(current, newTotalPages) || 1;
+    if (controlledPageSize === void 0) {
+      setInternalPageSize(newPageSize);
+      if (controlledCurrent === void 0) {
+        setInternalCurrent(newCurrent);
+      }
+    }
+    onShowSizeChange == null ? void 0 : onShowSizeChange(newCurrent, newPageSize);
+    onChange == null ? void 0 : onChange(newCurrent, newPageSize);
+  };
+  const updateDropdownPosition = (placement) => {
+    if (!sizeDropdownRef.current) return;
+    const triggerRect = sizeDropdownRef.current.getBoundingClientRect();
+    setDropdownAnchor({
+      left: triggerRect.left + triggerRect.width / 2,
+      top: placement === "bottom" ? triggerRect.bottom + 4 : triggerRect.top - 4
     });
-  }, _ = () => {
-    if (l) return;
-    if (m) {
-      g(!1);
+  };
+  const toggleSizeDropdown = () => {
+    if (disabled) return;
+    if (isSizeDropdownOpen) {
+      setIsSizeDropdownOpen(false);
       return;
     }
-    let t = f;
-    if (d === void 0 && p.current) {
-      const n = p.current.getBoundingClientRect(), e = $.length * 40 + 8, C = window.innerHeight;
-      t = (y == null ? void 0 : y({ triggerRect: n, dropdownHeight: e, viewportHeight: C })) ?? pt({ triggerRect: n, dropdownHeight: e, viewportHeight: C }), V(t);
+    let placement = dropdownPlacement;
+    if (popupPlacement === void 0 && sizeDropdownRef.current) {
+      const triggerRect = sizeDropdownRef.current.getBoundingClientRect();
+      const dropdownHeight = pageSizeOptions.length * 40 + 8;
+      const viewportHeight = window.innerHeight;
+      placement = (resolvePopupPlacement == null ? void 0 : resolvePopupPlacement({ triggerRect, dropdownHeight, viewportHeight })) ?? defaultResolvePopupPlacement({ triggerRect, dropdownHeight, viewportHeight });
+      setDropdownPlacement(placement);
     }
-    D(d ?? t), g(!0);
-  }, tt = (t) => {
-    Y(t), g(!1);
+    updateDropdownPosition(popupPlacement ?? placement);
+    setIsSizeDropdownOpen(true);
   };
-  rt(() => {
-    const t = (C) => {
-      var Z, A;
-      const I = C.target;
-      (Z = p.current) != null && Z.contains(I) || (A = R.current) != null && A.contains(I) || g(!1);
-    }, n = () => g(!1), e = () => D(d ?? f);
-    if (m)
-      return document.addEventListener("mousedown", t), document.addEventListener("scroll", n, !0), window.addEventListener("resize", e), () => {
-        document.removeEventListener("mousedown", t), document.removeEventListener("scroll", n, !0), window.removeEventListener("resize", e);
+  const handleSizeOptionClick = (newPageSize) => {
+    handlePageSizeChange(newPageSize);
+    setIsSizeDropdownOpen(false);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (((_a = sizeDropdownRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownPortalRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      setIsSizeDropdownOpen(false);
+    };
+    const handleScroll = () => setIsSizeDropdownOpen(false);
+    const handleResize = () => updateDropdownPosition(popupPlacement ?? dropdownPlacement);
+    if (isSizeDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("scroll", handleScroll, true);
+      window.addEventListener("resize", handleResize);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("scroll", handleScroll, true);
+        window.removeEventListener("resize", handleResize);
       };
-  }, [m, d, f]);
-  const et = (t) => {
-    const n = parseInt(t.target.value);
-    !isNaN(n) && n >= 1 && n <= s && h(n);
-  }, nt = ct(() => {
-    const t = [];
-    if (s <= 7)
-      for (let e = 1; e <= s; e++)
-        t.push(e);
-    else if (o <= 4) {
-      for (let e = 1; e <= 5; e++)
-        t.push(e);
-      t.push("..."), t.push(s);
-    } else if (o >= s - 3) {
-      t.push(1), t.push("...");
-      for (let e = s - 4; e <= s; e++)
-        t.push(e);
+    }
+  }, [isSizeDropdownOpen, popupPlacement, dropdownPlacement]);
+  const handleQuickJump = (e) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= 1 && value <= totalPages) {
+      handlePageChange(value);
+    }
+  };
+  const pageNumbers = useMemo(() => {
+    const pages = [];
+    const showEllipsisThreshold = 7;
+    if (totalPages <= showEllipsisThreshold) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
     } else {
-      t.push(1), t.push("...");
-      for (let e = o - 1; e <= o + 1; e++)
-        t.push(e);
-      t.push("..."), t.push(s);
+      if (current <= 4) {
+        for (let i = 1; i <= 5; i++) {
+          pages.push(i);
+        }
+        pages.push("...");
+        pages.push(totalPages);
+      } else if (current >= totalPages - 3) {
+        pages.push(1);
+        pages.push("...");
+        for (let i = totalPages - 4; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push("...");
+        for (let i = current - 1; i <= current + 1; i++) {
+          pages.push(i);
+        }
+        pages.push("...");
+        pages.push(totalPages);
+      }
     }
-    return t;
-  }, [o, s]), it = (o - 1) * u + 1, ot = Math.min(o * u, b), st = `pagination-${W}`, at = `pagination-${q}`, j = l ? "pagination-disabled" : "", lt = (t, n) => t === "..." ? /* @__PURE__ */ i("span", { className: "pagination-item pagination-ellipsis", children: "..." }, `ellipsis-${n}`) : /* @__PURE__ */ i(
-    "button",
-    {
-      type: "button",
-      className: `pagination-item ${t === o ? "pagination-item-active" : ""}`,
-      onClick: () => h(t),
-      disabled: l,
-      children: t
-    },
-    t
-  );
-  return F ? /* @__PURE__ */ i(
-    "div",
-    {
-      className: `pagination pagination-simple ${j} ${E || ""}`,
-      style: B,
-      children: /* @__PURE__ */ a("div", { className: "pagination-simple-list", children: [
-        /* @__PURE__ */ i(
-          "button",
-          {
-            type: "button",
-            className: "pagination-simple-item pagination-simple-prev",
-            onClick: () => h(o - 1),
-            disabled: l || o === 1,
-            children: /* @__PURE__ */ i("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ i("path", { d: "M8 2L4 6L8 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-          }
-        ),
-        /* @__PURE__ */ a("span", { className: "pagination-simple-text", children: [
-          o,
-          " / ",
-          s || 0
-        ] }),
-        /* @__PURE__ */ i(
-          "button",
-          {
-            type: "button",
-            className: "pagination-simple-item pagination-simple-next",
-            onClick: () => h(o + 1),
-            disabled: l || o === s,
-            children: /* @__PURE__ */ i("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ i("path", { d: "M4 2L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-          }
-        )
-      ] })
+    return pages;
+  }, [current, totalPages]);
+  const rangeStart = (current - 1) * pageSize + 1;
+  const rangeEnd = Math.min(current * pageSize, total);
+  const sizeClass = `pagination-${size}`;
+  const alignClass = `pagination-${align}`;
+  const disabledClass = disabled ? "pagination-disabled" : "";
+  const renderPageItem = (page, index) => {
+    if (page === "...") {
+      return /* @__PURE__ */ jsx("span", { className: "pagination-item pagination-ellipsis", children: "..." }, `ellipsis-${index}`);
     }
-  ) : /* @__PURE__ */ a(
+    const isActive = page === current;
+    const activeClass = isActive ? "pagination-item-active" : "";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `pagination-item ${activeClass}`,
+        onClick: () => handlePageChange(page),
+        disabled,
+        children: page
+      },
+      page
+    );
+  };
+  if (simple) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `pagination pagination-simple ${disabledClass} ${className || ""}`,
+        style,
+        children: /* @__PURE__ */ jsxs("div", { className: "pagination-simple-list", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-simple-item pagination-simple-prev",
+              onClick: () => handlePageChange(current - 1),
+              disabled: disabled || current === 1,
+              children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 2L4 6L8 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "pagination-simple-text", children: [
+            current,
+            " / ",
+            totalPages || 0
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "pagination-simple-item pagination-simple-next",
+              onClick: () => handlePageChange(current + 1),
+              disabled: disabled || current === totalPages,
+              children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4 2L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `pagination ${st} ${at} ${j} ${E || ""}`,
-      style: B,
+      className: `pagination ${sizeClass} ${alignClass} ${disabledClass} ${className || ""}`,
+      style,
       children: [
-        M && /* @__PURE__ */ i("div", { className: "pagination-total", children: M(b, [it, ot]) }),
-        /* @__PURE__ */ a("div", { className: "pagination-list", children: [
-          /* @__PURE__ */ i(
+        showTotal && /* @__PURE__ */ jsx("div", { className: "pagination-total", children: showTotal(total, [rangeStart, rangeEnd]) }),
+        /* @__PURE__ */ jsxs("div", { className: "pagination-list", children: [
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               className: "pagination-item pagination-prev",
-              onClick: () => h(o - 1),
-              disabled: l || o === 1,
-              children: /* @__PURE__ */ a("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ i("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "#333333" }),
-                /* @__PURE__ */ i("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "black", fillOpacity: "0.2" })
+              onClick: () => handlePageChange(current - 1),
+              disabled: disabled || current === 1,
+              children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "#333333" }),
+                /* @__PURE__ */ jsx("path", { d: "M11.1749 5.57516C11.3377 5.41245 11.6014 5.41245 11.7641 5.57516C11.9268 5.73788 11.9268 6.00164 11.7641 6.16436L7.8945 10.034L11.7617 13.8366C11.9257 13.998 11.9279 14.2617 11.7666 14.4258C11.6052 14.5899 11.3414 14.592 11.1774 14.4307L7.2105 10.5299C6.93541 10.2594 6.93349 9.81648 7.20629 9.54367L11.1749 5.57516Z", fill: "black", fillOpacity: "0.2" })
               ] })
             }
           ),
-          nt.map((t, n) => lt(t, n)),
-          /* @__PURE__ */ i(
+          pageNumbers.map((page, index) => renderPageItem(page, index)),
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               className: "pagination-item pagination-next",
-              onClick: () => h(o + 1),
-              disabled: l || o === s,
-              children: /* @__PURE__ */ a("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ i("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "#333333" }),
-                /* @__PURE__ */ i("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "black", "fill-opacity": "0.2" })
+              onClick: () => handlePageChange(current + 1),
+              disabled: disabled || current === totalPages,
+              children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                /* @__PURE__ */ jsx("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "#333333" }),
+                /* @__PURE__ */ jsx("path", { d: "M8.82507 5.57516C8.66235 5.41245 8.39859 5.41245 8.23587 5.57516C8.07315 5.73788 8.07315 6.00164 8.23587 6.16436L12.1055 10.034L8.23831 13.8366C8.07427 13.998 8.0721 14.2617 8.23343 14.4258C8.39478 14.5899 8.65856 14.592 8.82262 14.4307L12.7895 10.5299C13.0646 10.2594 13.0665 9.81648 12.7937 9.54367L8.82507 5.57516Z", fill: "black", "fill-opacity": "0.2" })
               ] })
             }
           )
         ] }),
-        H && /* @__PURE__ */ a("div", { className: "pagination-sizer", ref: p, children: [
-          /* @__PURE__ */ a(
+        showSizeChanger && /* @__PURE__ */ jsxs("div", { className: "pagination-sizer", ref: sizeDropdownRef, children: [
+          /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
               className: "pagination-sizer-select",
-              onClick: _,
-              disabled: l,
+              onClick: toggleSizeDropdown,
+              disabled,
               children: [
-                u,
-                N("条/页"),
-                /* @__PURE__ */ a("svg", { className: `pagination-sizer-icon${m ? " pagination-sizer-icon-open" : ""}`, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                  /* @__PURE__ */ i("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "#333333" }),
-                  /* @__PURE__ */ i("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "black", fillOpacity: "0.2" })
+                pageSize,
+                t("条/页"),
+                /* @__PURE__ */ jsxs("svg", { className: `pagination-sizer-icon${isSizeDropdownOpen ? " pagination-sizer-icon-open" : ""}`, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "#333333" }),
+                  /* @__PURE__ */ jsx("path", { d: "M5.57321 8.828C5.41049 8.66528 5.41049 8.40152 5.57321 8.2388C5.73593 8.07608 5.99969 8.07608 6.1624 8.2388L10.032 12.1084L13.8347 8.24124C13.996 8.0772 14.2598 8.07503 14.4239 8.23636C14.5879 8.39771 14.5901 8.66149 14.4287 8.82555L10.5279 12.7924C10.2574 13.0675 9.81452 13.0694 9.54172 12.7966L5.57321 8.828Z", fill: "black", fillOpacity: "0.2" })
                 ] })
               ]
             }
           ),
-          m && P && dt(
-            /* @__PURE__ */ i(
+          isSizeDropdownOpen && dropdownAnchor && createPortal(
+            /* @__PURE__ */ jsx(
               "div",
               {
-                ref: R,
-                className: `pagination-sizer-dropdown pagination-sizer-dropdown-${d ?? f}${S ? ` ${S}` : ""}`,
+                ref: dropdownPortalRef,
+                className: `pagination-sizer-dropdown pagination-sizer-dropdown-${popupPlacement ?? dropdownPlacement}${dropdownClassName ? ` ${dropdownClassName}` : ""}`,
                 style: {
                   position: "fixed",
-                  left: P.left,
-                  top: P.top,
+                  left: dropdownAnchor.left,
+                  top: dropdownAnchor.top,
                   zIndex: 99999,
-                  transform: (d ?? f) === "bottom" ? "translate(-50%, 0)" : "translate(-50%, -100%)"
+                  transform: (popupPlacement ?? dropdownPlacement) === "bottom" ? "translate(-50%, 0)" : "translate(-50%, -100%)"
                 },
-                children: $.map((t) => /* @__PURE__ */ a(
+                children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
                     className: "pagination-sizer-option",
-                    onClick: () => tt(t),
-                    "data-selected": t === u,
+                    onClick: () => handleSizeOptionClick(size2),
+                    "data-selected": size2 === pageSize,
                     children: [
-                      t,
-                      N("条/页")
+                      size2,
+                      t("条/页")
                     ]
                   },
-                  t
+                  size2
                 ))
               }
             ),
             document.body
           )
         ] }),
-        J && /* @__PURE__ */ a("div", { className: "pagination-jumper", children: [
-          /* @__PURE__ */ i("span", { children: N("跳至") }),
-          /* @__PURE__ */ i(
+        showQuickJumper && /* @__PURE__ */ jsxs("div", { className: "pagination-jumper", children: [
+          /* @__PURE__ */ jsx("span", { children: t("跳至") }),
+          /* @__PURE__ */ jsx(
             "input",
             {
               type: "number",
               className: "pagination-jumper-input",
               min: 1,
-              max: s,
-              onChange: et,
-              disabled: l,
+              max: totalPages,
+              onChange: handleQuickJump,
+              disabled,
               placeholder: ""
             }
           ),
-          /* @__PURE__ */ i("span", { children: N("页") })
+          /* @__PURE__ */ jsx("span", { children: t("页") })
         ] })
       ]
     }
   );
 };
 export {
-  ft as default
+  Pagination as default
 };