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

Yamada UI infinite scroll area component

{"version":3,"sources":["../src/infinite-scroll-area.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseInfiniteScrollProps } from \"@yamada-ui/use-infinite-scroll\"\nimport type { ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useInfiniteScroll } from \"@yamada-ui/use-infinite-scroll\"\nimport { createContext, cx, mergeRefs } from \"@yamada-ui/utils\"\nimport { useMemo, useRef } from \"react\"\n\ninterface InfiniteScrollAreaContext {\n  [key: string]: CSSUIObject | undefined\n}\n\nconst [InfiniteScrollAreaProvider, useInfiniteScrollAreaContext] =\n  createContext<InfiniteScrollAreaContext>({\n    name: \"InfiniteScrollAreaContext\",\n    errorMessage: `useInfiniteScrollAreaContext returned is 'undefined'. Seems you forgot to wrap the components in \"<InfiniteScrollArea />\"`,\n  })\n\ninterface InfiniteScrollAreaOptions {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLUIProps\n}\n\nexport interface InfiniteScrollAreaProps\n  extends Omit<HTMLUIProps, keyof UseInfiniteScrollProps>,\n    UseInfiniteScrollProps,\n    ThemeProps<\"InfiniteScrollArea\">,\n    InfiniteScrollAreaOptions {}\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see Docs https://yamada-ui.com/components/data-display/infinite-scroll-area\n */\nexport const InfiniteScrollArea = forwardRef<InfiniteScrollAreaProps, \"div\">(\n  ({ orientation: _orientation = \"vertical\", ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"InfiniteScrollArea\", {\n      orientation: _orientation,\n      ...props,\n    })\n    const {\n      className,\n      children,\n      isDisabled,\n      disabled = isDisabled,\n      finish: finishProp,\n      indexRef,\n      initialLoad,\n      isReverse,\n      loading,\n      orientation,\n      resetRef,\n      reverse = isReverse,\n      rootMargin,\n      rootRef: rootRefProp,\n      startIndex,\n      threshold,\n      triggerProps,\n      onLoad,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const vertical = orientation === \"vertical\"\n    const rootRef = useRef<HTMLDivElement>(null)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      isDisabled,\n      isReverse,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: rootRefProp ?? rootRef,\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const css: CSSUIObject = useMemo(\n      () => ({\n        display: \"flex\",\n        flexDirection: vertical ? \"column\" : \"row\",\n        gap: \"1rem\",\n        w: \"100%\",\n        ...styles.container,\n      }),\n      [vertical, styles],\n    )\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <InfiniteScrollAreaProvider value={styles}>\n        <ui.div\n          ref={mergeRefs(rootRef, ref)}\n          className={cx(\"ui-infinite-scroll-area\", className)}\n          aria-busy=\"false\"\n          role=\"feed\"\n          __css={css}\n          {...rest}\n        >\n          {reverse && showTrigger ? (\n            <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n              {finish ? finishProp : loading}\n            </InfiniteScrollTrigger>\n          ) : null}\n\n          {children}\n\n          {!reverse && showTrigger ? (\n            <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n              {finish ? finishProp : loading}\n            </InfiniteScrollTrigger>\n          ) : null}\n        </ui.div>\n      </InfiniteScrollAreaProvider>\n    )\n  },\n)\n\nInfiniteScrollArea.displayName = \"InfiniteScrollArea\"\nInfiniteScrollArea.__ui__ = \"InfiniteScrollArea\"\n\ninterface InfiniteScrollTriggerProps extends HTMLUIProps {}\n\nconst InfiniteScrollTrigger = forwardRef<InfiniteScrollTriggerProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const styles = useInfiniteScrollAreaContext()\n    const css: CSSUIObject = useMemo(\n      () => ({\n        alignItems: \"center\",\n        display: \"flex\",\n        flex: 1,\n        justifyContent: \"center\",\n        w: \"100%\",\n        ...styles.trigger,\n      }),\n      [styles],\n    )\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-infinite-scroll-area__trigger\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nInfiniteScrollTrigger.displayName = \"InfiniteScrollTrigger\"\nInfiniteScrollTrigger.__ui__ = \"InfiniteScrollTrigger\"\n"],"mappings":";;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,eAAe,IAAI,iBAAiB;AAC7C,SAAS,SAAS,cAAc;AAkGxB,SASI,KATJ;AA5FR,IAAM,CAAC,4BAA4B,4BAA4B,IAC7D,cAAyC;AAAA,EACvC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA6BI,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,aAAa,eAAe,YAAY,GAAG,MAAM,GAAG,QAAQ;AAC7D,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,sBAAsB;AAAA,MACzE,aAAa;AAAA,MACb,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM,WAAW,gBAAgB;AACjC,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,EAAE,KAAK,YAAY,OAAO,IAAI,kBAAkB;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,oCAAe;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,MAAmB;AAAA,MACvB,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe,WAAW,WAAW;AAAA,QACrC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,GAAG,OAAO;AAAA,MACZ;AAAA,MACA,CAAC,UAAU,MAAM;AAAA,IACnB;AACA,UAAM,YAAY,CAAC,CAAC;AACpB,UAAM,cAAc,CAAC,aAAa,aAAa,CAAC;AAEhD,WACE,oBAAC,8BAA2B,OAAO,QACjC;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,SAAS,GAAG;AAAA,QAC3B,WAAW,GAAG,2BAA2B,SAAS;AAAA,QAClD,aAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,qBAAW,cACV,oBAAC,yBAAsB,KAAK,YAAa,GAAG,cACzC,mBAAS,aAAa,SACzB,IACE;AAAA,UAEH;AAAA,UAEA,CAAC,WAAW,cACX,oBAAC,yBAAsB,KAAK,YAAa,GAAG,cACzC,mBAAS,aAAa,SACzB,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;AAI5B,IAAM,wBAAwB;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,6BAA6B;AAC5C,UAAM,MAAmB;AAAA,MACvB,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,GAAG;AAAA,QACH,GAAG,OAAO;AAAA,MACZ;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,QAC3D,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,sBAAsB,cAAc;AACpC,sBAAsB,SAAS;","names":[]}