@yamada-ui/react/dist/esm/components/pagination/pagination.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { ChevronLeftIcon } from "../icon/icons/chevron-left-icon.js";
import { ChevronRightIcon } from "../icon/icons/chevron-right-icon.js";
import { ChevronsLeftIcon } from "../icon/icons/chevrons-left-icon.js";
import { ChevronsRightIcon } from "../icon/icons/chevrons-right-icon.js";
import { EllipsisIcon } from "../icon/icons/ellipsis-icon.js";
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
import { IconButton } from "../button/icon-button.js";
import { ButtonGroupRoot } from "../button/button-group.js";
import { paginationStyle } from "./pagination.style.js";
import { PaginationContext, usePagination, usePaginationContext } from "./use-pagination.js";
import { cloneElement, isValidElement, useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/pagination/pagination.tsx
const { PropsContext: PaginationPropsContext, usePropsContext: usePaginationPropsContext, withContext, withProvider } = createSlotComponent("pagination", paginationStyle);
/**
* `Pagination` is a component for managing the pagination and navigation of content.
*
* @see https://yamada-ui.com/docs/components/pagination
*/
const PaginationRoot = withProvider(({ size, variant, children, withControls = true, withEdges = false, controlNextProps, controlPrevProps, controlProps, edgeEndProps, edgeProps, edgeStartProps, ellipsisProps, itemProps,...rest }) => {
	const { currentPage, disabled, range, total, getEndTriggerProps, getItemProps, getNextTriggerProps, getPrevTriggerProps, getRootProps, getStartTriggerProps, onChange, onChangeEnd, onChangeNext, onChangePrev, onChangeStart } = usePagination(rest);
	const context = useMemo(() => ({
		currentPage,
		disabled,
		range,
		total,
		getEndTriggerProps,
		getItemProps,
		getNextTriggerProps,
		getPrevTriggerProps,
		getStartTriggerProps,
		onChange,
		onChangeEnd,
		onChangeNext,
		onChangePrev,
		onChangeStart
	}), [
		currentPage,
		disabled,
		range,
		total,
		getEndTriggerProps,
		getItemProps,
		getNextTriggerProps,
		getPrevTriggerProps,
		getStartTriggerProps,
		onChange,
		onChangeEnd,
		onChangeNext,
		onChangePrev,
		onChangeStart
	]);
	const computedChildren = useMemo(() => {
		if (children) return children;
		else {
			const children$1 = [];
			if (withEdges) children$1.push(/* @__PURE__ */ jsx(PaginationStartTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
				icon: /* @__PURE__ */ jsx(ChevronsLeftIcon, {}),
				...edgeProps,
				...edgeStartProps
			}) }));
			if (withControls) children$1.push(/* @__PURE__ */ jsx(PaginationPrevTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
				icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
				...controlProps,
				...controlPrevProps
			}) }));
			children$1.push(/* @__PURE__ */ jsx(PaginationItems, { render: (page) => (0, utils_exports.isNumber)(page) ? /* @__PURE__ */ jsx(PaginationItem, {
				...itemProps,
				children: /* @__PURE__ */ jsx(styled.span, {
					role: "presentation",
					children: page
				})
			}) : /* @__PURE__ */ jsx(PaginationItem, {
				as: "span",
				icon: /* @__PURE__ */ jsx(EllipsisIcon, {}),
				...ellipsisProps
			}) }));
			if (withControls) children$1.push(/* @__PURE__ */ jsx(PaginationNextTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
				icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
				...controlProps,
				...controlNextProps
			}) }));
			if (withEdges) children$1.push(/* @__PURE__ */ jsx(PaginationEndTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
				icon: /* @__PURE__ */ jsx(ChevronsRightIcon, {}),
				...edgeProps,
				...edgeEndProps
			}) }));
			return children$1;
		}
	}, [
		children,
		withEdges,
		withControls,
		itemProps,
		ellipsisProps,
		edgeProps,
		edgeStartProps,
		edgeEndProps,
		controlProps,
		controlPrevProps,
		controlNextProps
	]);
	return /* @__PURE__ */ jsx(PaginationContext, {
		value: context,
		children: /* @__PURE__ */ jsx(ButtonGroupRoot, {
			as: "nav",
			size,
			variant,
			...getRootProps(),
			children: computedChildren
		})
	});
}, "root", { transferProps: ["variant", "size"] })();
const PaginationItems = ({ children, render }) => {
	const { range, getItemProps } = usePaginationContext();
	return useMemo(() => range.map((page, index) => {
		const component = children?.(page) ?? render?.(page);
		if (isValidElement(component)) return cloneElement(component, { ...getItemProps({
			key: index,
			page,
			...component.props
		}) });
		else return component;
	}), [
		children,
		getItemProps,
		range,
		render
	]);
};
const PaginationItem = withContext(IconButton, "item")();
const PaginationText = withContext("span", "text")(void 0, ({ children, format = "compact",...rest }) => {
	const { currentPage, total } = usePaginationContext();
	const { t } = useI18n("pagination");
	const computedChildren = useMemo(() => {
		if (children) return (0, utils_exports.runIfFn)(children, {
			page: currentPage,
			total
		});
		else if (format === "short") return t("{value} / {total}", {
			total,
			value: currentPage
		});
		else return t("{value} of {total}", {
			total,
			value: currentPage
		});
	}, [
		children,
		currentPage,
		format,
		total,
		t
	]);
	return {
		...rest,
		children: computedChildren
	};
});
const PaginationStartTrigger = withContext("button", {
	name: "startTrigger",
	slot: ["trigger", "start"]
})(void 0, (props) => {
	const { getStartTriggerProps } = usePaginationContext();
	return {
		asChild: true,
		...getStartTriggerProps(props)
	};
});
const PaginationEndTrigger = withContext("button", {
	name: "endTrigger",
	slot: ["trigger", "end"]
})(void 0, (props) => {
	const { getEndTriggerProps } = usePaginationContext();
	return {
		asChild: true,
		...getEndTriggerProps(props)
	};
});
const PaginationPrevTrigger = withContext("button", {
	name: "prevTrigger",
	slot: ["trigger", "prev"]
})(void 0, (props) => {
	const { getPrevTriggerProps } = usePaginationContext();
	return {
		asChild: true,
		...getPrevTriggerProps(props)
	};
});
const PaginationNextTrigger = withContext("button", {
	name: "nextTrigger",
	slot: ["trigger", "next"]
})(void 0, (props) => {
	const { getNextTriggerProps } = usePaginationContext();
	return {
		asChild: true,
		...getNextTriggerProps(props)
	};
});

//#endregion
export { PaginationEndTrigger, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PaginationPropsContext, PaginationRoot, PaginationStartTrigger, PaginationText, usePaginationPropsContext };
//# sourceMappingURL=pagination.js.map