@yamada-ui/react/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js

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

"use client";


import { mergeRefs } from "../../utils/ref.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { useValue } from "../../hooks/use-value/index.js";
import { infiniteScrollAreaStyle } from "./infinite-scroll-area.style.js";
import { useInfiniteScroll } from "./use-infinite-scroll.js";
import { useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/infinite-scroll-area/infinite-scroll-area.tsx
const { PropsContext: InfiniteScrollAreaPropsContext, usePropsContext: useInfiniteScrollAreaPropsContext, withContext, withProvider } = createSlotComponent("infinite-scroll-area", infiniteScrollAreaStyle);
/**
* `InfiniteScrollArea` is for providing infinite scroll functionality.
* This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.
*
* @see https://yamada-ui.com/docs/components/infinite-scroll-area
*/
const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: finishProp, indexRef, initialLoad, loading, orientation: orientationProp, resetRef, reverse, rootMargin, rootRef: rootRefProp, startIndex, threshold, triggerProps, onLoad,...rest }) => {
	const rootRef = useRef(null);
	const { ref: triggerRef, finish } = useInfiniteScroll({
		disabled,
		indexRef,
		initialLoad,
		orientation: useValue(orientationProp),
		resetRef,
		reverse,
		rootMargin,
		rootRef: rootRefProp ?? rootRef,
		startIndex,
		threshold,
		onLoad
	});
	const showTrigger = !disabled && (!!finishProp || !finish);
	return /* @__PURE__ */ jsxs(styled.div, {
		ref: mergeRefs(rootRef, ref),
		"aria-busy": "false",
		role: "feed",
		...rest,
		children: [
			reverse && showTrigger ? /* @__PURE__ */ jsx(InfiniteScrollTrigger, {
				ref: triggerRef,
				...triggerProps,
				children: finish ? finishProp : loading
			}) : null,
			children,
			!reverse && showTrigger ? /* @__PURE__ */ jsx(InfiniteScrollTrigger, {
				ref: triggerRef,
				...triggerProps,
				children: finish ? finishProp : loading
			}) : null
		]
	});
}, "root", { transferProps: ["orientation"] })();
const InfiniteScrollTrigger = withContext("div", "trigger")();

//#endregion
export { InfiniteScrollArea, InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext };
//# sourceMappingURL=infinite-scroll-area.js.map