@yamada-ui/infinite-scroll-area/dist/index.js

Yamada UI infinite scroll area component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  InfiniteScrollArea: () => InfiniteScrollArea
});
module.exports = __toCommonJS(index_exports);

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