{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/InfiniteScroll/index.tsx"],"sourcesContent":["import {\n  UseIntersectionObserverProps,\n  useIntersectionObserver,\n} from '../../hooks/useIntersectionObserver';\nimport React, { PropsWithChildren } from 'react';\n\nexport interface InfiniteScrollProps\n  extends Omit<\n    UseIntersectionObserverProps,\n    'onIntersectStart' | 'onIntersectEnd' | 'calledOnce'\n  > {\n  children: React.ReactNode;\n  onScrollAction: (entry: IntersectionObserverEntry) => void;\n  triggerPosition?: 'before' | 'after';\n}\n\n/**\n * @description 무한 스크롤 기능을 선언적으로 활용 할 수 있는 컴포넌트입니다.\n *\n * `@modern-kit/react`의 `useIntersectionObserver` 훅을 사용하여 구현되었습니다.\n *\n * @see https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver\n *\n * @param {InfiniteScrollProps} props\n * @param {React.ReactNode} props.children - 래핑할 자식 컴포넌트\n * @param {'before' | 'after'} props.triggerPosition - 스크롤 트리거 요소의 위치 ('before' | 'after', 기본값: 'after')\n * @param {(entry: IntersectionObserverEntry) => void} props.onScrollAction - 트리거 요소가 뷰포트와 교차할 때 실행될 콜백 함수\n * @param {number | number[]} props.threshold - 관찰을 시작할 viewport의 가시성 비율입니다.\n * @param {Element | Document | null} props.root - 교차할 때 기준이 되는 root 요소입니다. 기본값은 `null`이며 이는 viewport를 의미합니다.\n * @param {string} [props.rootMargin='150px 0px'] - 루트 요소에 대한 마진을 지정합니다. 이는 뷰포트 또는 루트 요소의 경계를 확장하거나 축소하는데 사용됩니다. (기본값: '150px 0px')\n * @param {boolean} props.enabled - Observer를 활성화할지 여부를 나타냅니다. `false`일 경우 Observer가 작동하지 않습니다.\n *\n * @returns {React.JSX.Element} 자식 컴포넌트와 Intersection Observer 트리거 요소를 포함한 컴포넌트입니다.\n *\n * @example\n * ```tsx\n * <div style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}>\n *   <InfiniteScroll\n *     onScrollAction={loadMoreData}\n *     triggerPosition=\"after\"\n *     rootMargin=\"200px 0px\"\n *   >\n *     <div>box1</div>\n *     <div>box2</div>\n *     <div>box3</div>\n *     ...\n *     <div>box99</div>\n *     <div>box100</div>\n *   </InfiniteScroll>\n * </div>\n * ```\n */\nexport const InfiniteScroll = ({\n  onScrollAction,\n  children,\n  root,\n  threshold,\n  enabled,\n  triggerPosition = 'after',\n  rootMargin = '150px 0px',\n}: PropsWithChildren<InfiniteScrollProps>): React.JSX.Element => {\n  const { ref: observedRef } = useIntersectionObserver({\n    onIntersectStart: onScrollAction,\n    root,\n    threshold,\n    enabled,\n    rootMargin,\n  });\n\n  return (\n    <>\n      {triggerPosition === 'before' && <div ref={observedRef} />}\n      {children}\n      {triggerPosition === 'after' && <div ref={observedRef} />}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAa,kBAAkB,EAC7B,gBACA,UACA,MACA,WACA,SACA,kBAAkB,SAClB,aAAa,kBACkD;CAC/D,MAAM,EAAE,KAAK,gBAAgB,wBAAwB;EACnD,kBAAkB;EAClB;EACA;EACA;EACA;EACD,CAAC;CAEF,OACE,qBAAA,YAAA,EAAA,UAAA;EACG,oBAAoB,YAAY,oBAAC,OAAD,EAAK,KAAK,aAAe,CAAA;EACzD;EACA,oBAAoB,WAAW,oBAAC,OAAD,EAAK,KAAK,aAAe,CAAA;EACxD,EAAA,CAAA"}