{"version":3,"file":"index.cjs","names":["polymorphicForwardRef","Slot","useIntersectionObserver","React","useMergeRefs"],"sources":["../../../src/components/InView/index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useIntersectionObserver,\n  UseIntersectionObserverProps,\n} from '../../hooks/useIntersectionObserver';\nimport { polymorphicForwardRef } from '../../utils/polymorphicForwardRef';\nimport { useMergeRefs } from '../../hooks/useMergeRefs';\nimport { Slot } from '../../components/Slot';\n\ninterface InViewProps extends UseIntersectionObserverProps {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nconst IN_VIEW_ERROR_MESSAGE =\n  'InView는 asChild가 true일 경우 children으로 유효한 React 요소만을 허용합니다. 또한, 단일 요소만 허용합니다.';\n\n/**\n * @description `InView`는 `IntersectionObserver`를 선언적으로 활용 할 수 있는 컴포넌트입니다.\n *\n * 관찰 대상이 `viewport`에 노출될 때(`onIntersectStart`) 혹은 나갈 때(`onIntersectEnd`) 특정 action 함수를 호출 할 수 있는 컴포넌트입니다.\n *\n * `@modern-kit/react`의 `useIntersectionObserver` 훅을 사용하여 구현되었습니다.\n *\n * @see https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver\n *\n * `as` 속성을 통해 `다형성(polymorphism)`을 지원합니다:\n * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 Wrapper 요소의 태그를 변경해 렌더링할 수 있습니다. (ex. div -> article)\n * - 이때 해당 Wrapper 요소가 `IntersectionObserver`의 관찰 대상입니다.\n *\n * `asChild` 속성을 통해 `합성(Composition)`, `렌더링 위임(Rendering Delegation)` 패턴을 지원합니다:\n * - `asChild` 속성이 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 렌더링합니다.\n * - 이때, 자식 요소가 `IntersectionObserver`의 관찰 대상입니다.\n * - `asChild`를 사용 할 경우 아래 링크를 참고하세요.\n *\n * @see https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot\n *\n *\n * @param {InViewProps} props - 컴포넌트에 전달되는 속성들입니다.\n * @param {React.ReactNode} props.children - 관찰할 자식 요소입니다.\n * @param {string} props.as - 관찰할 요소의 타입입니다. 기본값은 `div`입니다.\n * @param {boolean} [props.asChild=false] - 자식 요소를 래퍼 요소 없이 렌더링하고, 관찰 대상으로 설정할지 여부입니다. `true`일 경우 `Slot` 컴포넌트를 통해 자식 요소에 직접 props를 전달합니다.\n * @param {(entry: IntersectionObserverEntry) => void} props.onIntersectStart - 타겟 요소가 viewport 내에 들어갈 때 호출되는 콜백 함수입니다.\n * @param {(entry: IntersectionObserverEntry) => void} props.onIntersectEnd - 타겟 요소가 viewport에서 나갈 때 호출되는 콜백 함수입니다.\n * @param {number | number[]} props.threshold - 관찰을 시작할 viewport의 가시성 비율입니다.\n * @param {Element | Document | null} props.root - 교차할 때 기준이 되는 root 요소입니다. 기본값은 `null`이며 이는 viewport를 의미합니다.\n * @param {string} props.rootMargin - 루트 요소에 대한 마진을 지정합니다. 이는 뷰포트 또는 루트 요소의 경계를 확장하거나 축소하는데 사용됩니다.\n * @param {boolean} props.enabled - Observer를 활성화할지 여부를 나타냅니다. `false`일 경우 Observer가 작동하지 않습니다.\n * @param {boolean} props.calledOnce - 요소가 교차할 때 콜백을 `한 번`만 호출할지 여부를 나타냅니다.\n *\n * @returns {JSX.Element}\n *\n * @example\n * ```tsx\n * // default\n * <InView onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>\n *   <div>Contents</div>\n * </InView>\n * ```\n *\n * @example\n * ```tsx\n * // as: ul\n * <InView as=\"ul\" onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>\n *   <li>List Item1</li>\n *   <li>List Item2</li>\n * </InView>\n * ```\n *\n * @example\n * ```tsx\n * // asChild\n * <InView asChild onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>\n *   <div>Contents</div>\n * </InView>\n * ```\n */\n\nexport const InView = polymorphicForwardRef<'div', InViewProps>(\n  ({ children, as = 'div', asChild = false, ...props }, ref) => {\n    const {\n      onIntersectStart,\n      onIntersectEnd,\n      calledOnce,\n      enabled,\n      root,\n      threshold,\n      rootMargin,\n      ...restProps\n    } = props;\n\n    const InViewWrapper = asChild ? Slot : as;\n\n    const { ref: intersectionObserverRef } = useIntersectionObserver({\n      onIntersectStart,\n      onIntersectEnd,\n      calledOnce,\n      enabled,\n      root,\n      threshold,\n      rootMargin,\n    });\n\n    if (asChild && !React.isValidElement(children)) {\n      throw new Error(IN_VIEW_ERROR_MESSAGE);\n    }\n\n    return (\n      <InViewWrapper\n        ref={useMergeRefs(ref, intersectionObserverRef)}\n        {...restProps}>\n        {children}\n      </InViewWrapper>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;AAcA,MAAM,wBACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DF,MAAa,SAASA,cAAAA,uBACnB,EAAE,UAAU,KAAK,OAAO,UAAU,OAAO,GAAG,SAAS,QAAQ;CAC5D,MAAM,EACJ,kBACA,gBACA,YACA,SACA,MACA,WACA,YACA,GAAG,cACD;CAEJ,MAAM,gBAAgB,UAAUC,gBAAAA,OAAO;CAEvC,MAAM,EAAE,KAAK,4BAA4BC,gBAAAA,wBAAwB;EAC/D;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAI,WAAW,CAACC,MAAAA,QAAM,eAAe,SAAS,EAC5C,MAAM,IAAI,MAAM,sBAAsB;CAGxC,OACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EACE,KAAKC,gBAAAA,aAAa,KAAK,wBAAwB;EAC/C,GAAI;EACH;EACa,CAAA;EAGrB"}