jb-infinite-scroll 1.2.0 → 1.2.2

package/README.md

@@ -12,6 +12,12 @@ Infinite scroll web-component with  additional features including:
 - enable/disable scroll capture
 - support loading state with customizable ui
 
+Demo in codepen: https://codepen.io/javadbat/pen/EaYGGEo
+
+## using with JS frameworks
+
+to use this component in **react** see [`jb-infinite-scroll/react`](https://github.com/javadbat/jb-infinite-scroll/tree/main/react);
+
 ## installation
 ```js
  import "jb-infinite-scroll" from jb-infinite-scroll;

package/package.json

@@ -12,7 +12,7 @@
     "infinite scroll",
     "web component"
   ],
-  "version": "1.2.0",
+  "version": "1.2.2",
   "bugs": "https://github.com/javadbat/jb-infinite-scroll/issues",
   "license": "MIT",
   "files": [

package/react/README.md

@@ -4,6 +4,8 @@ infinite scroll react component.
 
 >this component is a react wrapper for [jb-infinite-scroll](https://github.com/javadbat/jb-infinite-scroll). so for more information read it's doc.
 
+Demo in codeSandBox: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-infinite-scroll) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBInfiniteScroll.tsx) if you want to see and play with code
+
 ## usage
 first install component in npm or any other package manager
 

package/react/dist/JBInfiniteScroll.cjs.js

@@ -73,7 +73,7 @@ const JBInfiniteScroll = React.forwardRef((props, ref) => {
             element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
         }
     }, [element.current, props.stateChangeWaitingBehavior]);
-    return (React.createElement("jb-infinite-scroll", { ref: element }, props.children));
+    return (React.createElement("jb-infinite-scroll", { class: props.className, ref: element }, props.children));
 });
 JBInfiniteScroll.displayName = "JBInfiniteScroll";
 

package/react/dist/JBInfiniteScroll.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBInfiniteScroll.cjs.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n\r\n  const onScrollEnd = useCallback((e:CustomEvent) => {\r\n    if (typeof props.onScrollEnd == \"function\") {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isLoading == \"boolean\") {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isLoading]);\r\n\r\n  useEffect(() => {\r\n    if (element.current, typeof props.isListEmpty == \"boolean\") {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEmpty]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isListEnded == \"boolean\") {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEnded]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.disableCaptureScroll == \"boolean\") {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.disableCaptureScroll]);\r\n\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [element.current, props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\n\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":["useEffect","useRef","useImperativeHandle","useCallback"],"mappings":"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"}
+{"version":3,"file":"JBInfiniteScroll.cjs.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n\r\n  const onScrollEnd = useCallback((e:CustomEvent) => {\r\n    if (typeof props.onScrollEnd == \"function\") {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isLoading == \"boolean\") {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isLoading]);\r\n\r\n  useEffect(() => {\r\n    if (element.current, typeof props.isListEmpty == \"boolean\") {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEmpty]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isListEnded == \"boolean\") {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEnded]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.disableCaptureScroll == \"boolean\") {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.disableCaptureScroll]);\r\n\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [element.current, props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll class={props.className} ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\n\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  className?:string\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":["useEffect","useRef","useImperativeHandle","useCallback"],"mappings":"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"}

package/react/dist/JBInfiniteScroll.js

@@ -71,7 +71,7 @@ const JBInfiniteScroll = React.forwardRef((props, ref) => {
             element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
         }
     }, [element.current, props.stateChangeWaitingBehavior]);
-    return (React.createElement("jb-infinite-scroll", { ref: element }, props.children));
+    return (React.createElement("jb-infinite-scroll", { class: props.className, ref: element }, props.children));
 });
 JBInfiniteScroll.displayName = "JBInfiniteScroll";
 

package/react/dist/JBInfiniteScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBInfiniteScroll.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n\r\n  const onScrollEnd = useCallback((e:CustomEvent) => {\r\n    if (typeof props.onScrollEnd == \"function\") {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isLoading == \"boolean\") {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isLoading]);\r\n\r\n  useEffect(() => {\r\n    if (element.current, typeof props.isListEmpty == \"boolean\") {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEmpty]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isListEnded == \"boolean\") {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEnded]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.disableCaptureScroll == \"boolean\") {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.disableCaptureScroll]);\r\n\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [element.current, props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\n\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":[],"mappings":"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"}
+{"version":3,"file":"JBInfiniteScroll.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n\r\n  const onScrollEnd = useCallback((e:CustomEvent) => {\r\n    if (typeof props.onScrollEnd == \"function\") {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isLoading == \"boolean\") {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isLoading]);\r\n\r\n  useEffect(() => {\r\n    if (element.current, typeof props.isListEmpty == \"boolean\") {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEmpty]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isListEnded == \"boolean\") {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEnded]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.disableCaptureScroll == \"boolean\") {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.disableCaptureScroll]);\r\n\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [element.current, props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll class={props.className} ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\n\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  className?:string\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":[],"mappings":"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"}

package/react/dist/JBInfiniteScroll.umd.js

@@ -74,7 +74,7 @@
               element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
           }
       }, [element.current, props.stateChangeWaitingBehavior]);
-      return (React.createElement("jb-infinite-scroll", { ref: element }, props.children));
+      return (React.createElement("jb-infinite-scroll", { class: props.className, ref: element }, props.children));
   });
   JBInfiniteScroll.displayName = "JBInfiniteScroll";
 

package/react/dist/JBInfiniteScroll.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBInfiniteScroll.umd.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n\r\n  const onScrollEnd = useCallback((e:CustomEvent) => {\r\n    if (typeof props.onScrollEnd == \"function\") {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isLoading == \"boolean\") {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isLoading]);\r\n\r\n  useEffect(() => {\r\n    if (element.current, typeof props.isListEmpty == \"boolean\") {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEmpty]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isListEnded == \"boolean\") {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEnded]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.disableCaptureScroll == \"boolean\") {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.disableCaptureScroll]);\r\n\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [element.current, props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\n\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":["useEffect","useRef","useImperativeHandle","useCallback"],"mappings":"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"}
+{"version":3,"file":"JBInfiniteScroll.umd.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n\r\n  const onScrollEnd = useCallback((e:CustomEvent) => {\r\n    if (typeof props.onScrollEnd == \"function\") {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isLoading == \"boolean\") {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isLoading]);\r\n\r\n  useEffect(() => {\r\n    if (element.current, typeof props.isListEmpty == \"boolean\") {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEmpty]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.isListEnded == \"boolean\") {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.isListEnded]);\r\n\r\n  useEffect(() => {\r\n    if (element.current && typeof props.disableCaptureScroll == \"boolean\") {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [element.current, props.disableCaptureScroll]);\r\n\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [element.current, props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll class={props.className} ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\n\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  className?:string\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":["useEffect","useRef","useImperativeHandle","useCallback"],"mappings":"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"}

package/react/dist/web-component/jb-infinite-scroll/react/lib/JBInfiniteScroll.d.ts

@@ -18,6 +18,7 @@ declare const JBInfiniteScroll: React.ForwardRefExoticComponent<{
     isListEmpty?: boolean;
     isLoading?: boolean;
     isListEnded?: boolean;
+    className?: string;
     onScrollEnd?: (e: CustomEvent) => void;
 } & {
     children?: React.ReactNode;
@@ -28,6 +29,7 @@ export type Props = React.PropsWithChildren<{
     isListEmpty?: boolean;
     isLoading?: boolean;
     isListEnded?: boolean;
+    className?: string;
     onScrollEnd?: (e: CustomEvent) => void;
 }>;
 export { JBInfiniteScroll, StateChangeWaitingBehavior };

package/react/lib/JBInfiniteScroll.tsx

@@ -85,7 +85,7 @@ const JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<
     }
   }, [element.current, props.stateChangeWaitingBehavior]);
   return (
-    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>
+    <jb-infinite-scroll class={props.className} ref={element}>{props.children}</jb-infinite-scroll>
   );
 });
 
@@ -95,6 +95,7 @@ export type Props = React.PropsWithChildren< {
   isListEmpty?: boolean,
   isLoading?: boolean,
   isListEnded?:boolean,
+  className?:string
   onScrollEnd?:(e:CustomEvent)=>void
 }>