@yamada-ui/infinite-scroll-area/dist/chunk-6JYURONZ.mjs

Yamada UI infinite scroll area component

"use client"

// src/infinite-scroll-area.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { useInfiniteScroll } from "@yamada-ui/use-infinite-scroll";
import { createContext, cx, mergeRefs } from "@yamada-ui/utils";
import { useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var [InfiniteScrollAreaProvider, useInfiniteScrollAreaContext] = createContext({
  name: "InfiniteScrollAreaContext",
  errorMessage: `useInfiniteScrollAreaContext returned is 'undefined'. Seems you forgot to wrap the components in "<InfiniteScrollArea />"`
});
var InfiniteScrollArea = forwardRef(
  ({ orientation: _orientation = "vertical", ...props }, ref) => {
    const [styles, mergedProps] = useComponentMultiStyle("InfiniteScrollArea", {
      orientation: _orientation,
      ...props
    });
    const {
      className,
      children,
      isDisabled,
      disabled = isDisabled,
      finish: finishProp,
      indexRef,
      initialLoad,
      isReverse,
      loading,
      orientation,
      resetRef,
      reverse = isReverse,
      rootMargin,
      rootRef: rootRefProp,
      startIndex,
      threshold,
      triggerProps,
      onLoad,
      ...rest
    } = omitThemeProps(mergedProps);
    const vertical = orientation === "vertical";
    const rootRef = useRef(null);
    const { ref: triggerRef, finish } = useInfiniteScroll({
      disabled,
      indexRef,
      initialLoad,
      isDisabled,
      isReverse,
      orientation,
      resetRef,
      reverse,
      rootMargin,
      rootRef: rootRefProp != null ? rootRefProp : rootRef,
      startIndex,
      threshold,
      onLoad
    });
    const css = useMemo(
      () => ({
        display: "flex",
        flexDirection: vertical ? "column" : "row",
        gap: "1rem",
        w: "100%",
        ...styles.container
      }),
      [vertical, styles]
    );
    const hasFinish = !!finishProp;
    const showTrigger = !disabled && (hasFinish || !finish);
    return /* @__PURE__ */ jsx(InfiniteScrollAreaProvider, { value: styles, children: /* @__PURE__ */ jsxs(
      ui.div,
      {
        ref: mergeRefs(rootRef, ref),
        className: cx("ui-infinite-scroll-area", className),
        "aria-busy": "false",
        role: "feed",
        __css: css,
        ...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
        ]
      }
    ) });
  }
);
InfiniteScrollArea.displayName = "InfiniteScrollArea";
InfiniteScrollArea.__ui__ = "InfiniteScrollArea";
var InfiniteScrollTrigger = forwardRef(
  ({ className, ...rest }, ref) => {
    const styles = useInfiniteScrollAreaContext();
    const css = useMemo(
      () => ({
        alignItems: "center",
        display: "flex",
        flex: 1,
        justifyContent: "center",
        w: "100%",
        ...styles.trigger
      }),
      [styles]
    );
    return /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-infinite-scroll-area__trigger", className),
        __css: css,
        ...rest
      }
    );
  }
);
InfiniteScrollTrigger.displayName = "InfiniteScrollTrigger";
InfiniteScrollTrigger.__ui__ = "InfiniteScrollTrigger";

export {
  InfiniteScrollArea
};
//# sourceMappingURL=chunk-6JYURONZ.mjs.map