@npm_leadtech/legal-lib-components 7.17.23 → 7.19.0

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDown.tsx

@@ -18,7 +18,7 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
   setEnableScrollbarOnClose,
   setIsOpen
 }): React.ReactElement | null => {
-  const [ref, isIntersectingWithElement] = useIntersectionObserver({
+  const [ref, isIntersectingWithElement] = useIntersectionObserver<HTMLDivElement>({
     options: { threshold: 0.15 }
   })
 

package/dist/src/components/molecules/SocialLinks/SocialLinks.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SocialList } from './SocialLinks.styled';
+import { useIntersectionObserver } from '../../../hooks';
 export const SocialLinks = ({ links }) => {
-    return (_jsx(SocialList, { children: links.map((social) => (_jsx("li", { children: _jsx("a", { href: social.url, rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: social.iconSrc, alt: social.alt, width: '20', height: '20' }) }) }, social.url))) }));
+    return (_jsx(SocialList, { children: links.map((social) => {
+            const [ref, isIntersecting] = useIntersectionObserver({});
+            return (_jsx("li", { children: _jsx("a", { href: social.url, rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { ref: ref, src: isIntersecting ? social.iconSrc : '', alt: social.alt, width: '20', height: '20' }) }) }, social.url));
+        }) }));
 };

package/dist/src/components/molecules/SocialLinks/SocialLinks.tsx

@@ -1,17 +1,21 @@
 import React from 'react'
 import { SocialLinksProps } from './SocialLinksProps.types'
 import { SocialList } from './SocialLinks.styled'
+import { useIntersectionObserver } from '../../../hooks'
 
 export const SocialLinks: React.FC<SocialLinksProps> = ({ links }) => {
   return (
     <SocialList>
-      {links.map((social) => (
-        <li key={social.url}>
-          <a href={social.url} rel='noopener noreferrer' target='_blank'>
-            <img src={social.iconSrc} alt={social.alt} width='20' height='20' />
-          </a>
-        </li>
-      ))}
+      {links.map((social) => {
+        const [ref, isIntersecting] = useIntersectionObserver<HTMLImageElement>({})
+        return (
+          <li key={social.url}>
+            <a href={social.url} rel='noopener noreferrer' target='_blank'>
+              <img ref={ref} src={isIntersecting ? social.iconSrc : ''} alt={social.alt} width='20' height='20' />
+            </a>
+          </li>
+        )
+      })}
     </SocialList>
   )
 }

package/dist/src/hooks/useIntersectionObserver.d.ts

@@ -1,5 +1,7 @@
-import { type LegacyRef } from 'react';
-export declare function useIntersectionObserver({ options, defaultIntersecting }: {
-    options?: {} | undefined;
-    defaultIntersecting?: boolean | undefined;
-}): [LegacyRef<HTMLDivElement> | undefined, boolean];
+import { RefObject } from 'react';
+interface UseIntersectionObserverParams {
+    options?: IntersectionObserverInit;
+    defaultIntersecting?: boolean;
+}
+export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T | null>, boolean];
+export {};

package/dist/src/hooks/useIntersectionObserver.js

@@ -1,21 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
-export function useIntersectionObserver({ options = {}, defaultIntersecting = false }) {
+export function useIntersectionObserver({ options = {}, defaultIntersecting = false } = {}) {
     const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting);
     const elementRef = useRef(null);
     useEffect(() => {
         const currentElement = elementRef.current;
+        if (!currentElement)
+            return;
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 setIsIntersecting(entry.isIntersecting);
             });
         }, options);
-        if (currentElement != null) {
-            observer.observe(currentElement);
-        }
+        observer.observe(currentElement);
         return () => {
-            if (currentElement != null) {
-                observer.unobserve(currentElement);
-            }
+            observer.disconnect();
         };
     }, [options]);
     return [elementRef, isIntersecting];

package/dist/src/hooks/useIntersectionObserver.tsx

@@ -1,14 +1,20 @@
-import { type LegacyRef, useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 
-export function useIntersectionObserver({
+interface UseIntersectionObserverParams {
+  options?: IntersectionObserverInit
+  defaultIntersecting?: boolean
+}
+
+export function useIntersectionObserver<T extends HTMLElement>({
   options = {},
   defaultIntersecting = false
-}): [LegacyRef<HTMLDivElement> | undefined, boolean] {
+}: UseIntersectionObserverParams = {}): [RefObject<T | null>, boolean] {
   const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting)
-  const elementRef = useRef<HTMLDivElement>(null)
+  const elementRef = useRef<T>(null)
 
   useEffect(() => {
     const currentElement = elementRef.current
+    if (!currentElement) return
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -16,14 +22,10 @@ export function useIntersectionObserver({
       })
     }, options)
 
-    if (currentElement != null) {
-      observer.observe(currentElement)
-    }
+    observer.observe(currentElement)
 
     return () => {
-      if (currentElement != null) {
-        observer.unobserve(currentElement)
-      }
+      observer.disconnect()
     }
   }, [options])
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.17.23",
+  "version": "7.19.0",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",