@a-type/ui 6.1.26 → 6.1.28

package/dist/components/infiniteLoadTrigger/InfiniteLoadTrigger.js

@@ -11,24 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'clsx';
-import { useEffect, useRef } from 'react';
-import { useStableCallback } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
+import { useOnVisible } from '../../hooks/useOnVisible.js';
 export const InfiniteLoadTrigger = function InfiniteLoadTrigger(_a) {
     var { ref, className, onVisible } = _a, rest = __rest(_a, ["ref", "className", "onVisible"]);
-    const innerRef = useRef(null);
-    const stableOnVisible = useStableCallback(onVisible);
-    useEffect(() => {
-        const observer = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting) {
-                stableOnVisible();
-            }
-        });
-        observer.observe(innerRef.current);
-        return () => {
-            observer.disconnect();
-        };
-    }, [stableOnVisible]);
+    const innerRef = useOnVisible(onVisible);
     return (_jsx("div", Object.assign({ ref: useMergedRef(ref, innerRef), className: classNames('flex flex-col items-center', className) }, rest)));
 };
 //# sourceMappingURL=InfiniteLoadTrigger.js.map

package/dist/components/infiniteLoadTrigger/InfiniteLoadTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfiniteLoadTrigger.js","sourceRoot":"","sources":["../../../src/components/infiniteLoadTrigger/InfiniteLoadTrigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAQvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,mBAAmB,CAAC,EAO/D;QAP+D,EAC/D,GAAG,EACH,SAAS,EACT,SAAS,OAIT,EAHG,IAAI,cAJwD,iCAK/D,CADO;IAIP,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACrD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;YACrD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC/B,eAAe,EAAE,CAAC;YACnB,CAAC;QACF,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,CAAC,CAAC;QACpC,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACN,4BACC,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,EAChC,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,SAAS,CAAC,IAC1D,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"InfiniteLoadTrigger.js","sourceRoot":"","sources":["../../../src/components/infiniteLoadTrigger/InfiniteLoadTrigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAQ3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,mBAAmB,CAAC,EAO/D;QAP+D,EAC/D,GAAG,EACH,SAAS,EACT,SAAS,OAIT,EAHG,IAAI,cAJwD,iCAK/D,CADO;IAIP,MAAM,QAAQ,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAEzC,OAAO,CACN,4BACC,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,EAChC,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,SAAS,CAAC,IAC1D,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
 export * from './useMergedRef.js';
 export * from './useOnUnmount.js';
+export * from './useOnVisible.js';
 export * from './useOverrideTheme.js';
 export * from './useSize.js';
 export * from './useStableCallback.js';

package/dist/hooks/index.js

@@ -2,6 +2,7 @@ export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
 export * from './useMergedRef.js';
 export * from './useOnUnmount.js';
+export * from './useOnVisible.js';
 export * from './useOverrideTheme.js';
 export * from './useSize.js';
 export * from './useStableCallback.js';

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/dist/hooks/useOnVisible.d.ts

@@ -0,0 +1 @@
+export declare function useOnVisible(onVisible?: () => void): import("react").RefObject<any>;

package/dist/hooks/useOnVisible.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+export function useOnVisible(onVisible) {
+    const innerRef = useRef(null);
+    const stableOnVisible = useStableCallback(onVisible);
+    useEffect(() => {
+        const current = innerRef.current;
+        if (!current ||
+            !(current instanceof HTMLElement || current instanceof SVGElement)) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                stableOnVisible();
+            }
+        });
+        observer.observe(innerRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [stableOnVisible]);
+    return innerRef;
+}
+//# sourceMappingURL=useOnVisible.js.map

package/dist/hooks/useOnVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnVisible.js","sourceRoot":"","sources":["../../src/hooks/useOnVisible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,UAAU,YAAY,CAAC,SAAsB;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IAEnC,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACrD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IACC,CAAC,OAAO;YACR,CAAC,CAAC,OAAO,YAAY,WAAW,IAAI,OAAO,YAAY,UAAU,CAAC,EACjE,CAAC;YACF,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;YACrD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC/B,eAAe,EAAE,CAAC;YACnB,CAAC;QACF,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,CAAC,CAAC;QACpC,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,QAAQ,CAAC;AACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.1.26",
+  "version": "6.1.28",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/infiniteLoadTrigger/InfiniteLoadTrigger.tsx

@@ -1,42 +1,29 @@
-import classNames from 'clsx';
-import { ReactNode, useEffect, useRef } from 'react';
-import { useStableCallback } from '../../hooks.js';
-import useMergedRef from '../../hooks/useMergedRef.js';
-
-export interface InfiniteLoadTriggerProps {
-	className?: string;
-	children?: ReactNode;
-	onVisible?: () => void;
-}
-
-export const InfiniteLoadTrigger = function InfiniteLoadTrigger({
-	ref,
-	className,
-	onVisible,
-	...rest
-}: InfiniteLoadTriggerProps & {
-	ref?: React.Ref<HTMLDivElement>;
-}) {
-	const innerRef = useRef<HTMLDivElement>(null);
-
-	const stableOnVisible = useStableCallback(onVisible);
-	useEffect(() => {
-		const observer = new IntersectionObserver((entries) => {
-			if (entries[0].isIntersecting) {
-				stableOnVisible();
-			}
-		});
-		observer.observe(innerRef.current!);
-		return () => {
-			observer.disconnect();
-		};
-	}, [stableOnVisible]);
-
-	return (
-		<div
-			ref={useMergedRef(ref, innerRef)}
-			className={classNames('flex flex-col items-center', className)}
-			{...rest}
-		/>
-	);
-};
+import classNames from 'clsx';
+import { ReactNode } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { useOnVisible } from '../../hooks/useOnVisible.js';
+
+export interface InfiniteLoadTriggerProps {
+	className?: string;
+	children?: ReactNode;
+	onVisible?: () => void;
+}
+
+export const InfiniteLoadTrigger = function InfiniteLoadTrigger({
+	ref,
+	className,
+	onVisible,
+	...rest
+}: InfiniteLoadTriggerProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	const innerRef = useOnVisible(onVisible);
+
+	return (
+		<div
+			ref={useMergedRef(ref, innerRef)}
+			className={classNames('flex flex-col items-center', className)}
+			{...rest}
+		/>
+	);
+};

package/src/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
 export * from './useMergedRef.js';
 export * from './useOnUnmount.js';
+export * from './useOnVisible.js';
 export * from './useOverrideTheme.js';
 export * from './useSize.js';
 export * from './useStableCallback.js';

package/src/hooks/useOnVisible.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+
+export function useOnVisible(onVisible?: () => void) {
+	const innerRef = useRef<any>(null);
+
+	const stableOnVisible = useStableCallback(onVisible);
+	useEffect(() => {
+		const current = innerRef.current;
+		if (
+			!current ||
+			!(current instanceof HTMLElement || current instanceof SVGElement)
+		) {
+			return;
+		}
+
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0].isIntersecting) {
+				stableOnVisible();
+			}
+		});
+		observer.observe(innerRef.current!);
+		return () => {
+			observer.disconnect();
+		};
+	}, [stableOnVisible]);
+
+	return innerRef;
+}