@cube-dev/ui-kit 0.182.0 → 0.183.0

package/dist/components/navigation/Pagination/Pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -10,8 +10,9 @@ import { BackwardIcon } from "../../../icons/BackwardIcon.js";
 import { ForwardIcon } from "../../../icons/ForwardIcon.js";
 import { LeftIcon } from "../../../icons/LeftIcon.js";
 import { clampPage, getPageInfo, getPaginationRange } from "./use-pagination.js";
+import { c } from "react-compiler-runtime";
 import { OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useControlledState } from "@react-stately/utils";
 
@@ -71,184 +72,413 @@ function formatRange(info) {
 	return `${(info.page - 1) * info.pageSize + 1}–${info.total > 0 ? Math.min(info.page * info.pageSize, info.total) : info.page * info.pageSize}`;
 }
 function Pagination(props, ref) {
-	const { page: pageProp, defaultPage, onPageChange, totalPages: totalPagesProp, total, pageSize: pageSizeProp, defaultPageSize, pageSizeOptions, onPageSizeChange, type = "numbers", siblingCount = 1, boundaryCount = 1, size = "small", isDisabled, hasNextPage, isCompact = false, summary = false, labelFormatter, ariaLabel, pageSizeSelectStyles, qa, mods, ...rest } = props;
+	const $ = c(121);
+	const { page: pageProp, defaultPage, onPageChange, totalPages: totalPagesProp, total, pageSize: pageSizeProp, defaultPageSize, pageSizeOptions, onPageSizeChange, type: t0, siblingCount: t1, boundaryCount: t2, size: t3, isDisabled, hasNextPage, isCompact: t4, summary: t5, labelFormatter, ariaLabel, pageSizeSelectStyles, qa, mods, ...rest } = props;
+	const type = t0 === void 0 ? "numbers" : t0;
+	const siblingCount = t1 === void 0 ? 1 : t1;
+	const boundaryCount = t2 === void 0 ? 1 : t2;
+	const size = t3 === void 0 ? "small" : t3;
+	const isCompact = t4 === void 0 ? false : t4;
+	const summary = t5 === void 0 ? false : t5;
 	const { t } = useI18n();
 	const { formatNumber } = useFormatter();
 	const [pageSize, setPageSize] = useControlledState(pageSizeProp, defaultPageSize ?? 50, onPageSizeChange);
 	const [page, setPage] = useControlledState(pageProp, defaultPage ?? 1, onPageChange);
 	const isCountable = totalPagesProp != null || total != null;
-	const info = isCountable ? getPageInfo({
-		page,
-		pageSize,
-		total: total ?? 0,
-		totalPages: totalPagesProp
-	}) : {
-		page: clampPage(page, Number.MAX_SAFE_INTEGER),
-		pageSize,
-		totalPages: 0,
-		total: 0,
-		from: 0,
-		to: 0
-	};
+	let t6;
+	if ($[0] !== isCountable || $[1] !== page || $[2] !== pageSize || $[3] !== total || $[4] !== totalPagesProp) {
+		t6 = isCountable ? getPageInfo({
+			page,
+			pageSize,
+			total: total ?? 0,
+			totalPages: totalPagesProp
+		}) : {
+			page: clampPage(page, Number.MAX_SAFE_INTEGER),
+			pageSize,
+			totalPages: 0,
+			total: 0,
+			from: 0,
+			to: 0
+		};
+		$[0] = isCountable;
+		$[1] = page;
+		$[2] = pageSize;
+		$[3] = total;
+		$[4] = totalPagesProp;
+		$[5] = t6;
+	} else t6 = $[5];
+	const info = t6;
 	const { totalPages } = info;
-	const goTo = useEvent((next) => {
-		const clamped = isCountable ? clampPage(next, totalPages) : Math.max(next, 1);
-		if (clamped !== info.page) setPage(clamped);
-	});
-	const onPageSizeSelectionChange = useEvent((value) => {
-		setPageSize(Number(value));
-		setPage(1);
-	});
-	const onPageSelectionChange = useEvent((value) => {
-		goTo(Number(value));
-	});
-	const pageItems = useMemo(() => type === "numbers" && isCountable ? getPaginationRange({
-		page: info.page,
-		totalPages,
-		siblingCount,
-		boundaryCount
-	}) : [], [
-		type,
-		isCountable,
-		info.page,
-		totalPages,
-		siblingCount,
-		boundaryCount
-	]);
-	const selectEntries = useMemo(() => type === "select" && isCountable && totalPages <= 200 ? Array.from({ length: totalPages }, (_, i) => i + 1) : null, [
-		type,
-		isCountable,
-		totalPages
-	]);
+	let t7;
+	if ($[6] !== info.page || $[7] !== isCountable || $[8] !== setPage || $[9] !== totalPages) {
+		t7 = (next) => {
+			const clamped = isCountable ? clampPage(next, totalPages) : Math.max(next, 1);
+			if (clamped !== info.page) setPage(clamped);
+		};
+		$[6] = info.page;
+		$[7] = isCountable;
+		$[8] = setPage;
+		$[9] = totalPages;
+		$[10] = t7;
+	} else t7 = $[10];
+	const goTo = useEvent(t7);
+	let t8;
+	if ($[11] !== setPage || $[12] !== setPageSize) {
+		t8 = (value) => {
+			setPageSize(Number(value));
+			setPage(1);
+		};
+		$[11] = setPage;
+		$[12] = setPageSize;
+		$[13] = t8;
+	} else t8 = $[13];
+	const onPageSizeSelectionChange = useEvent(t8);
+	let t9;
+	if ($[14] !== goTo) {
+		t9 = (value_0) => {
+			goTo(Number(value_0));
+		};
+		$[14] = goTo;
+		$[15] = t9;
+	} else t9 = $[15];
+	const onPageSelectionChange = useEvent(t9);
+	let t10;
+	if ($[16] !== boundaryCount || $[17] !== info.page || $[18] !== isCountable || $[19] !== siblingCount || $[20] !== totalPages || $[21] !== type) {
+		t10 = type === "numbers" && isCountable ? getPaginationRange({
+			page: info.page,
+			totalPages,
+			siblingCount,
+			boundaryCount
+		}) : [];
+		$[16] = boundaryCount;
+		$[17] = info.page;
+		$[18] = isCountable;
+		$[19] = siblingCount;
+		$[20] = totalPages;
+		$[21] = type;
+		$[22] = t10;
+	} else t10 = $[22];
+	const pageItems = t10;
+	let t11;
+	if ($[23] !== isCountable || $[24] !== totalPages || $[25] !== type) {
+		t11 = type === "select" && isCountable && totalPages <= 200 ? Array.from({ length: totalPages }, _temp) : null;
+		$[23] = isCountable;
+		$[24] = totalPages;
+		$[25] = type;
+		$[26] = t11;
+	} else t11 = $[26];
+	const selectEntries = t11;
 	const isFirst = info.page <= 1;
 	const isLast = isCountable ? info.page >= totalPages : !hasNextPage;
-	const styles = extractStyles(props, OUTER_STYLES);
-	const summaryNode = summary === false ? null : typeof summary === "function" ? summary(info) : info.total > 0 ? t("pagination.summary", "{{from}}–{{to}} of {{total}}", {
-		from: formatNumber(info.from),
-		to: formatNumber(info.to),
-		total: formatNumber(info.total)
-	}) : null;
-	function renderPageControl() {
-		if (selectEntries) return /* @__PURE__ */ jsx(__Select, {
-			qa: "PaginationPageSelect",
+	let t12;
+	if ($[27] !== props) {
+		t12 = extractStyles(props, OUTER_STYLES);
+		$[27] = props;
+		$[28] = t12;
+	} else t12 = $[28];
+	const styles = t12;
+	let t13;
+	if ($[29] !== formatNumber || $[30] !== info || $[31] !== summary || $[32] !== t) {
+		t13 = summary === false ? null : typeof summary === "function" ? summary(info) : info.total > 0 ? t("pagination.summary", "{{from}}–{{to}} of {{total}}", {
+			from: formatNumber(info.from),
+			to: formatNumber(info.to),
+			total: formatNumber(info.total)
+		}) : null;
+		$[29] = formatNumber;
+		$[30] = info;
+		$[31] = summary;
+		$[32] = t;
+		$[33] = t13;
+	} else t13 = $[33];
+	const summaryNode = t13;
+	let t14;
+	if ($[34] !== goTo || $[35] !== info || $[36] !== isCountable || $[37] !== isDisabled || $[38] !== labelFormatter || $[39] !== onPageSelectionChange || $[40] !== pageItems || $[41] !== pageSizeSelectStyles || $[42] !== selectEntries || $[43] !== size || $[44] !== t || $[45] !== totalPages || $[46] !== type) {
+		t14 = function renderPageControl() {
+			if (selectEntries) return /* @__PURE__ */ jsx(__Select, {
+				qa: "PaginationPageSelect",
+				size,
+				isDisabled,
+				"aria-label": t("pagination.selectPage", "Select page"),
+				selectedKey: String(info.page),
+				width: "min 15x",
+				styles: pageSizeSelectStyles,
+				onSelectionChange: onPageSelectionChange,
+				children: selectEntries.map((entry) => {
+					const entryInfo = {
+						...info,
+						page: entry
+					};
+					const label = labelFormatter?.(entryInfo) ?? (info.total > 0 ? formatRange(entryInfo) : t("pagination.page", "Page {{page}}", { page: entry }));
+					return /* @__PURE__ */ jsx(__Select.Item, {
+						textValue: String(label),
+						children: label
+					}, entry);
+				})
+			});
+			if (type === "numbers" && pageItems.length > 0) return /* @__PURE__ */ jsx("div", {
+				"data-element": "Pages",
+				children: pageItems.map((entry_0, index) => entry_0 === "gap" ? /* @__PURE__ */ jsx("div", {
+					"data-element": "Gap",
+					"aria-hidden": "true",
+					children: "…"
+				}, `gap-${index}`) : /* @__PURE__ */ jsx(PageButton, {
+					qa: `PaginationPage_${entry_0}`,
+					size,
+					type: entry_0 === info.page ? "outline" : "clear",
+					isDisabled,
+					"aria-label": t("pagination.page", "Page {{page}}", { page: entry_0 }),
+					"aria-current": entry_0 === info.page ? "page" : void 0,
+					onPress: () => goTo(entry_0),
+					children: entry_0
+				}, entry_0))
+			});
+			if (!isCountable) return null;
+			return /* @__PURE__ */ jsx("div", {
+				"data-element": "Summary",
+				"data-qa": "PaginationPageLabel",
+				children: t("pagination.pageOf", "{{page}} of {{totalPages}}", {
+					page: info.page,
+					totalPages
+				})
+			});
+		};
+		$[34] = goTo;
+		$[35] = info;
+		$[36] = isCountable;
+		$[37] = isDisabled;
+		$[38] = labelFormatter;
+		$[39] = onPageSelectionChange;
+		$[40] = pageItems;
+		$[41] = pageSizeSelectStyles;
+		$[42] = selectEntries;
+		$[43] = size;
+		$[44] = t;
+		$[45] = totalPages;
+		$[46] = type;
+		$[47] = t14;
+	} else t14 = $[47];
+	const renderPageControl = t14;
+	const showEdgeButtons = !isCompact && isCountable;
+	const T0 = PaginationElement;
+	const t15 = filterBaseProps(rest, { eventProps: true });
+	const t16 = qa || "Pagination";
+	let t17;
+	if ($[48] !== mods || $[49] !== size) {
+		t17 = {
+			size,
+			...mods
+		};
+		$[48] = mods;
+		$[49] = size;
+		$[50] = t17;
+	} else t17 = $[50];
+	let t18;
+	if ($[51] !== ariaLabel || $[52] !== t) {
+		t18 = ariaLabel ?? t("pagination.ariaLabel", "Pagination");
+		$[51] = ariaLabel;
+		$[52] = t;
+		$[53] = t18;
+	} else t18 = $[53];
+	let t19;
+	if ($[54] !== summaryNode) {
+		t19 = summaryNode ? /* @__PURE__ */ jsx("div", {
+			"data-element": "Summary",
+			children: summaryNode
+		}) : null;
+		$[54] = summaryNode;
+		$[55] = t19;
+	} else t19 = $[55];
+	let t20;
+	if ($[56] !== isDisabled || $[57] !== onPageSizeChange || $[58] !== onPageSizeSelectionChange || $[59] !== pageSize || $[60] !== pageSizeOptions || $[61] !== pageSizeSelectStyles || $[62] !== size || $[63] !== t) {
+		t20 = pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsx(__Select, {
+			qa: "PaginationPageSizeSelect",
 			size,
 			isDisabled,
-			"aria-label": t("pagination.selectPage", "Select page"),
-			selectedKey: String(info.page),
-			width: "min 15x",
+			"aria-label": t("pagination.itemsPerPage", "Items per page"),
+			selectedKey: String(pageSize),
 			styles: pageSizeSelectStyles,
-			onSelectionChange: onPageSelectionChange,
-			children: selectEntries.map((entry) => {
-				const entryInfo = {
-					...info,
-					page: entry
-				};
-				const label = labelFormatter?.(entryInfo) ?? (info.total > 0 ? formatRange(entryInfo) : t("pagination.page", "Page {{page}}", { page: entry }));
+			onSelectionChange: onPageSizeSelectionChange,
+			children: pageSizeOptions.map((option) => {
+				const label_0 = t("pagination.itemsPerPageOption", "{{size}} / page", { size: option });
 				return /* @__PURE__ */ jsx(__Select.Item, {
-					textValue: String(label),
-					children: label
-				}, entry);
+					textValue: label_0,
+					children: label_0
+				}, option);
 			})
+		}) : null;
+		$[56] = isDisabled;
+		$[57] = onPageSizeChange;
+		$[58] = onPageSizeSelectionChange;
+		$[59] = pageSize;
+		$[60] = pageSizeOptions;
+		$[61] = pageSizeSelectStyles;
+		$[62] = size;
+		$[63] = t;
+		$[64] = t20;
+	} else t20 = $[64];
+	let t21;
+	if ($[65] !== goTo || $[66] !== isDisabled || $[67] !== isFirst || $[68] !== showEdgeButtons || $[69] !== size || $[70] !== t) {
+		t21 = showEdgeButtons ? /* @__PURE__ */ jsx(NavButton, {
+			qa: "PaginationFirstButton",
+			size,
+			icon: /* @__PURE__ */ jsx(BackwardIcon, {}),
+			isDisabled: isFirst || isDisabled,
+			"aria-label": t("pagination.firstPage", "First page"),
+			onPress: () => goTo(1)
+		}) : null;
+		$[65] = goTo;
+		$[66] = isDisabled;
+		$[67] = isFirst;
+		$[68] = showEdgeButtons;
+		$[69] = size;
+		$[70] = t;
+		$[71] = t21;
+	} else t21 = $[71];
+	let t22;
+	if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(LeftIcon, {});
+		$[72] = t22;
+	} else t22 = $[72];
+	const t23 = isFirst || isDisabled;
+	let t24;
+	if ($[73] !== t) {
+		t24 = t("pagination.previousPage", "Previous page");
+		$[73] = t;
+		$[74] = t24;
+	} else t24 = $[74];
+	let t25;
+	if ($[75] !== goTo || $[76] !== info.page) {
+		t25 = () => goTo(info.page - 1);
+		$[75] = goTo;
+		$[76] = info.page;
+		$[77] = t25;
+	} else t25 = $[77];
+	let t26;
+	if ($[78] !== size || $[79] !== t23 || $[80] !== t24 || $[81] !== t25) {
+		t26 = /* @__PURE__ */ jsx(NavButton, {
+			qa: "PaginationPrevButton",
+			size,
+			icon: t22,
+			isDisabled: t23,
+			"aria-label": t24,
+			onPress: t25
 		});
-		if (type === "numbers" && pageItems.length > 0) return /* @__PURE__ */ jsx("div", {
-			"data-element": "Pages",
-			children: pageItems.map((entry, index) => entry === "gap" ? /* @__PURE__ */ jsx("div", {
-				"data-element": "Gap",
-				"aria-hidden": "true",
-				children: "…"
-			}, `gap-${index}`) : /* @__PURE__ */ jsx(PageButton, {
-				qa: `PaginationPage_${entry}`,
-				size,
-				type: entry === info.page ? "outline" : "clear",
-				isDisabled,
-				"aria-label": t("pagination.page", "Page {{page}}", { page: entry }),
-				"aria-current": entry === info.page ? "page" : void 0,
-				onPress: () => goTo(entry),
-				children: entry
-			}, entry))
-		});
-		if (!isCountable) return null;
-		return /* @__PURE__ */ jsx("div", {
-			"data-element": "Summary",
-			"data-qa": "PaginationPageLabel",
-			children: t("pagination.pageOf", "{{page}} of {{totalPages}}", {
-				page: info.page,
-				totalPages
-			})
+		$[78] = size;
+		$[79] = t23;
+		$[80] = t24;
+		$[81] = t25;
+		$[82] = t26;
+	} else t26 = $[82];
+	let t27;
+	if ($[83] !== renderPageControl) {
+		t27 = renderPageControl();
+		$[83] = renderPageControl;
+		$[84] = t27;
+	} else t27 = $[84];
+	let t28;
+	if ($[85] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = /* @__PURE__ */ jsx(RightIcon, {});
+		$[85] = t28;
+	} else t28 = $[85];
+	const t29 = isLast || isDisabled;
+	let t30;
+	if ($[86] !== t) {
+		t30 = t("pagination.nextPage", "Next page");
+		$[86] = t;
+		$[87] = t30;
+	} else t30 = $[87];
+	let t31;
+	if ($[88] !== goTo || $[89] !== info.page) {
+		t31 = () => goTo(info.page + 1);
+		$[88] = goTo;
+		$[89] = info.page;
+		$[90] = t31;
+	} else t31 = $[90];
+	let t32;
+	if ($[91] !== size || $[92] !== t29 || $[93] !== t30 || $[94] !== t31) {
+		t32 = /* @__PURE__ */ jsx(NavButton, {
+			qa: "PaginationNextButton",
+			size,
+			icon: t28,
+			isDisabled: t29,
+			"aria-label": t30,
+			onPress: t31
 		});
-	}
-	const showEdgeButtons = !isCompact && isCountable;
-	return /* @__PURE__ */ jsxs(PaginationElement, {
-		...filterBaseProps(rest, { eventProps: true }),
-		ref,
-		qa: qa || "Pagination",
-		styles,
-		mods: {
+		$[91] = size;
+		$[92] = t29;
+		$[93] = t30;
+		$[94] = t31;
+		$[95] = t32;
+	} else t32 = $[95];
+	let t33;
+	if ($[96] !== goTo || $[97] !== isDisabled || $[98] !== isLast || $[99] !== showEdgeButtons || $[100] !== size || $[101] !== t || $[102] !== totalPages) {
+		t33 = showEdgeButtons ? /* @__PURE__ */ jsx(NavButton, {
+			qa: "PaginationLastButton",
 			size,
-			...mods
-		},
-		"aria-label": ariaLabel ?? t("pagination.ariaLabel", "Pagination"),
-		children: [
-			summaryNode ? /* @__PURE__ */ jsx("div", {
-				"data-element": "Summary",
-				children: summaryNode
-			}) : null,
-			pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsx(__Select, {
-				qa: "PaginationPageSizeSelect",
-				size,
-				isDisabled,
-				"aria-label": t("pagination.itemsPerPage", "Items per page"),
-				selectedKey: String(pageSize),
-				styles: pageSizeSelectStyles,
-				onSelectionChange: onPageSizeSelectionChange,
-				children: pageSizeOptions.map((option) => {
-					const label = t("pagination.itemsPerPageOption", "{{size}} / page", { size: option });
-					return /* @__PURE__ */ jsx(__Select.Item, {
-						textValue: label,
-						children: label
-					}, option);
-				})
-			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				"data-element": "Controls",
-				children: [
-					showEdgeButtons ? /* @__PURE__ */ jsx(NavButton, {
-						qa: "PaginationFirstButton",
-						size,
-						icon: /* @__PURE__ */ jsx(BackwardIcon, {}),
-						isDisabled: isFirst || isDisabled,
-						"aria-label": t("pagination.firstPage", "First page"),
-						onPress: () => goTo(1)
-					}) : null,
-					/* @__PURE__ */ jsx(NavButton, {
-						qa: "PaginationPrevButton",
-						size,
-						icon: /* @__PURE__ */ jsx(LeftIcon, {}),
-						isDisabled: isFirst || isDisabled,
-						"aria-label": t("pagination.previousPage", "Previous page"),
-						onPress: () => goTo(info.page - 1)
-					}),
-					renderPageControl(),
-					/* @__PURE__ */ jsx(NavButton, {
-						qa: "PaginationNextButton",
-						size,
-						icon: /* @__PURE__ */ jsx(RightIcon, {}),
-						isDisabled: isLast || isDisabled,
-						"aria-label": t("pagination.nextPage", "Next page"),
-						onPress: () => goTo(info.page + 1)
-					}),
-					showEdgeButtons ? /* @__PURE__ */ jsx(NavButton, {
-						qa: "PaginationLastButton",
-						size,
-						icon: /* @__PURE__ */ jsx(ForwardIcon, {}),
-						isDisabled: isLast || isDisabled,
-						"aria-label": t("pagination.lastPage", "Last page"),
-						onPress: () => goTo(totalPages)
-					}) : null
-				]
-			})
-		]
-	});
+			icon: /* @__PURE__ */ jsx(ForwardIcon, {}),
+			isDisabled: isLast || isDisabled,
+			"aria-label": t("pagination.lastPage", "Last page"),
+			onPress: () => goTo(totalPages)
+		}) : null;
+		$[96] = goTo;
+		$[97] = isDisabled;
+		$[98] = isLast;
+		$[99] = showEdgeButtons;
+		$[100] = size;
+		$[101] = t;
+		$[102] = totalPages;
+		$[103] = t33;
+	} else t33 = $[103];
+	let t34;
+	if ($[104] !== t21 || $[105] !== t26 || $[106] !== t27 || $[107] !== t32 || $[108] !== t33) {
+		t34 = /* @__PURE__ */ jsxs("div", {
+			"data-element": "Controls",
+			children: [
+				t21,
+				t26,
+				t27,
+				t32,
+				t33
+			]
+		});
+		$[104] = t21;
+		$[105] = t26;
+		$[106] = t27;
+		$[107] = t32;
+		$[108] = t33;
+		$[109] = t34;
+	} else t34 = $[109];
+	let t35;
+	if ($[110] !== T0 || $[111] !== ref || $[112] !== styles || $[113] !== t15 || $[114] !== t16 || $[115] !== t17 || $[116] !== t18 || $[117] !== t19 || $[118] !== t20 || $[119] !== t34) {
+		t35 = /* @__PURE__ */ jsxs(T0, {
+			...t15,
+			ref,
+			qa: t16,
+			styles,
+			mods: t17,
+			"aria-label": t18,
+			children: [
+				t19,
+				t20,
+				t34
+			]
+		});
+		$[110] = T0;
+		$[111] = ref;
+		$[112] = styles;
+		$[113] = t15;
+		$[114] = t16;
+		$[115] = t17;
+		$[116] = t18;
+		$[117] = t19;
+		$[118] = t20;
+		$[119] = t34;
+		$[120] = t35;
+	} else t35 = $[120];
+	return t35;
+}
+function _temp(_, i) {
+	return i + 1;
 }
 const _Pagination = forwardRef(Pagination);
 _Pagination.displayName = "Pagination";