{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "infinite-scroll-dependecies",
  "title": "Infinite Scroll Dependencies",
  "description": "component for the Infinite Scroll Dependencies",
  "files": [
    {
      "path": "app/registry/spectrumui/infinite-scroll-dependecies.tsx",
      "content": "import * as React from \"react\";\n\ninterface InfiniteScrollProps {\n  isLoading: boolean;\n  hasMore: boolean;\n  next: () => unknown;\n  threshold?: number;\n  root?: Element | Document | null;\n  rootMargin?: string;\n  reverse?: boolean;\n  children?: React.ReactNode;\n}\n\nexport default function InfiniteScroll({\n  isLoading,\n  hasMore,\n  next,\n  threshold = 1,\n  root = null,\n  rootMargin = \"0px\",\n  reverse,\n  children,\n}: InfiniteScrollProps) {\n  const observer = React.useRef<IntersectionObserver | null>(null);\n  // This callback ref will be called when it is dispatched to an element or detached from an element,\n  // or when the callback function changes.\n  const observerRef = React.useCallback(\n    (element: HTMLElement | null) => {\n      let safeThreshold = threshold;\n      if (threshold < 0 || threshold > 1) {\n        // \"threshold should be between 0 and 1. You are exceed the range. will use default value: 1\",\n        safeThreshold = 1;\n      }\n      // When isLoading is true, this callback will do nothing.\n      // It means that the next function will never be called.\n      // It is safe because the intersection observer has disconnected the previous element.\n      if (isLoading) return;\n\n      if (observer.current) observer.current.disconnect();\n      if (!element) return;\n\n      // Create a new IntersectionObserver instance because hasMore or next may be changed.\n      observer.current = new IntersectionObserver(\n        (entries) => {\n          if (entries[0].isIntersecting && hasMore) {\n            next();\n          }\n        },\n        { threshold: safeThreshold, root, rootMargin },\n      );\n      observer.current.observe(element);\n    },\n    [hasMore, isLoading, next, threshold, root, rootMargin],\n  );\n\n  const flattenChildren = React.useMemo(\n    () => React.Children.toArray(children),\n    [children],\n  );\n\n  return (\n    <>\n      {flattenChildren.map((child, index) => {\n        if (!React.isValidElement(child)) {\n          // if(process.env.NODE_ENV === \"development\");\n          return child;\n        }\n\n        const isObserveTarget = reverse\n          ? index === 0\n          : index === flattenChildren.length - 1;\n        const ref = isObserveTarget ? observerRef : null;\n        // @ts-ignore ignore ref type\n        return React.cloneElement(child, { ref });\n      })}\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/infinite-scroll-dependecies.tsx"
    }
  ],
  "type": "registry:component"
}