@npm_leadtech/legal-lib-components 7.19.2 → 7.20.1

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

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { Button } from '../../atoms'
+
+import { ContactInfoCardProps } from './ContactInfoCardProps'
+import { ContactInfoCardStyled } from './ContactInfoCard.styled'
+
+import { InfoLocationSvg } from '../../../../images/componentsSvg/InfoLocationSvg'
+import { InfoMailSvg } from '../../../../images/componentsSvg/InfoMailSvg'
+import { InfoPhoneSvg } from '../../../../images/componentsSvg/InfoPhoneSvg'
+
+const iconMap = {
+  email: <InfoMailSvg />,
+  phone: <InfoPhoneSvg />,
+  location: <InfoLocationSvg />
+}
+
+export const ContactInfoCard: React.FC<ContactInfoCardProps> = ({ type, isMobile = false, title, text }) => {
+  if (type === 'phone' && isMobile) {
+    return (
+      <ContactInfoCardStyled className='contact-info-card phone-mobile'>
+        <Button
+          key={title}
+          centered
+          isExternal
+          link={`tel:${title}`}
+          gtmTag={'clicked_phone_contactus'}
+          givenClass='phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center'
+          label={title ?? ''}
+          dataQa={'phone_contact_box'}
+        />
+        <p className='text'>{text}</p>
+      </ContactInfoCardStyled>
+    )
+  } else {
+    return (
+      <ContactInfoCardStyled className='contact-info-card'>
+        <div className='info-card-wrapper'>
+          <div className='info-icon'>{iconMap[type]}</div>
+          <div className='content'>
+            {title && (
+              <p className={`title${type === 'email' ? ' email' : ''}`}>
+                {type === 'email' ? (
+                  <a href={`mailto:${title}`}>{title}</a>
+                ) : type === 'phone' ? (
+                  <a href={`tel:${title}`}>{title}</a>
+                ) : (
+                  title
+                )}
+              </p>
+            )}
+            <p className='text'>{text}</p>
+          </div>
+        </div>
+      </ContactInfoCardStyled>
+    )
+  }
+}

package/dist/src/components/molecules/ContactInfoCard/ContactInfoCardProps.d.ts

@@ -0,0 +1,7 @@
+export type ContactInfoType = 'phone' | 'email' | 'location';
+export interface ContactInfoCardProps {
+    type: ContactInfoType;
+    isMobile?: boolean;
+    title?: string;
+    text: string;
+}

package/dist/src/components/molecules/ContactInfoCard/ContactInfoCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/ContactInfoCard/ContactInfoCardProps.ts

@@ -0,0 +1,8 @@
+export type ContactInfoType = 'phone' | 'email' | 'location'
+
+export interface ContactInfoCardProps {
+  type: ContactInfoType
+  isMobile?: boolean
+  title?: string
+  text: string
+}

package/dist/src/components/molecules/ContactInfoCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContactInfoCard';
+export * from './ContactInfoCardProps';

package/dist/src/components/molecules/ContactInfoCard/index.js

@@ -0,0 +1,2 @@
+export * from './ContactInfoCard';
+export * from './ContactInfoCardProps';

package/dist/src/components/molecules/ContactInfoCard/index.ts

@@ -0,0 +1,2 @@
+export * from './ContactInfoCard'
+export * from './ContactInfoCardProps'

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/components/molecules/TextInput/TextInput.scss

@@ -55,6 +55,10 @@
     font-weight: bold;
   }
 
+  .e-text__inner {
+    grid-row: 1;
+  }
+
   .form-group__label-icon {
     color: var(--neutral-neutral-1);
     font-weight: bold;
@@ -150,6 +154,8 @@
 
   &--has-prefix {
     width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
 
     @include portrait-tablets {
       width: 50%;
@@ -157,14 +163,23 @@
 
     .has-currency-prefix {
       padding-left: 2rem;
+      grid-column: 1;
+      grid-row: 2;
+      align-self: center;
     }
 
     .has-currency-suffix {
       padding-right: 2rem;
+      grid-column: 1;
+      grid-row: 2;
+      align-self: center;
     }
 
     .has-percent-suffix {
       padding-left: 0.75rem;
+      grid-column: 1;
+      grid-row: 2;
+      align-self: center;
     }
   }
 
@@ -185,27 +200,28 @@
   }
 
   .input-icon-currency-suffix {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+    margin-left: calc(100% - 30px);
+    width: fit-content;
   }
 
   .input-icon-currency-prefix {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+    z-index: 1;
+    padding-left: 0.87rem;
+    width: fit-content;
   }
 
   .input-icon-percent-suffix {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+    margin-left: calc(100% - 30px);
+    width: fit-content;
   }
 
   .formgroup--input__button {

package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx

@@ -124,7 +124,7 @@ export const MaskInput: Story = {
   }
 }
 
-export const WithPrefixEuro: Story = {
+export const WithSufixEuro: Story = {
   args: {
     name: 'prefix',
     label: 'Price:',
@@ -146,7 +146,7 @@ export const WithPrefixNoEuro: Story = {
   }
 }
 
-export const WithPrefixPercent: Story = {
+export const WithSufixPercent: Story = {
   args: {
     name: 'prefix',
     label: 'Price:',
@@ -156,3 +156,14 @@ export const WithPrefixPercent: Story = {
     country: 'US'
   }
 }
+
+export const WithPrefixPercent: Story = {
+  args: {
+    name: 'prefix',
+    label: 'Price:',
+    value: '20.30',
+    type: 'text',
+    prefix: 'currency',
+    country: 'CA'
+  }
+}

package/dist/src/components/molecules/index.d.ts

@@ -12,6 +12,8 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
+export * from './ContactInfoBox';
+export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';

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

@@ -12,6 +12,8 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
+export * from './ContactInfoBox';
+export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';

package/dist/src/components/molecules/index.ts

@@ -12,6 +12,8 @@ export * from './Breadcrumb'
 export * from './ContactBox'
 export * from './ContactCardList'
 export * from './ContactInfo'
+export * from './ContactInfoBox'
+export * from './ContactInfoBoxMobile'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
 export * from './DocumentListMenuSection'

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules';
 import { Button } from '../../atoms';
+import { ContactInfoBox } from '../../molecules/ContactInfoBox';
 import { ContactJumbotronStyled } from './ContactJumbotron.styled';
-export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, visitFaqPageLabel, children, isJonSnow = false }) => {
-    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
+export const ContactJumbotron = ({ faqsTitle, visitFaqPageLabel, children, isJonSnow = false, items }) => {
+    return (_jsxs(ContactJumbotronStyled, { children: [_jsx(ContactInfoBox, { items: items }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' }))] }));
 };

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.js

@@ -35,7 +35,6 @@ export const ContactJumbotronStyled = styled.article `
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
-    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.ts

@@ -36,7 +36,6 @@ export const ContactJumbotronStyled = styled.article`
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
-    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.tsx

@@ -1,21 +1,20 @@
 import React from 'react'
 
-import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules'
 import { Button } from '../../atoms'
+import { ContactInfoBox } from '../../molecules/ContactInfoBox'
 import { type ContactJumbotronProps } from './ContactJumbotronProps.types'
 import { ContactJumbotronStyled } from './ContactJumbotron.styled'
 
 export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
-  phoneBoxDesktopProps,
-  emailContactBoxProps,
   faqsTitle,
   visitFaqPageLabel,
   children,
-  isJonSnow = false
+  isJonSnow = false,
+  items
 }) => {
   return (
     <ContactJumbotronStyled>
-      {!isJonSnow && <PhoneContactBoxDesktop {...phoneBoxDesktopProps} />}
+      <ContactInfoBox items={items} />
       <h2 className='contact__text__title sans-serif'>{faqsTitle}</h2>
       <div className='contact__text__subtitle sans-serif'>{children}</div>
       {!isJonSnow && (
@@ -27,7 +26,6 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
           dataQa={'visitFaq'}
         />
       )}
-      <EmailContactBox {...emailContactBoxProps} />
     </ContactJumbotronStyled>
   )
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.d.ts

@@ -1,10 +1,9 @@
+import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard';
 import type React from 'react';
-import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules';
 export interface ContactJumbotronProps {
-    phoneBoxDesktopProps: PhoneContactBoxDesktopProps;
-    emailContactBoxProps: EmailContactBoxProps;
     faqsTitle: string;
     visitFaqPageLabel: string;
     children: React.ReactNode;
     isJonSnow?: boolean;
+    items: ContactInfoCardProps[];
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.ts

@@ -1,12 +1,10 @@
+import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard'
 import type React from 'react'
 
-import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules'
-
 export interface ContactJumbotronProps {
-  phoneBoxDesktopProps: PhoneContactBoxDesktopProps
-  emailContactBoxProps: EmailContactBoxProps
   faqsTitle: string
   visitFaqPageLabel: string
   children: React.ReactNode
   isJonSnow?: boolean
+  items: ContactInfoCardProps[]
 }

package/dist/src/components/organisms/MobileMenu/MobileMenu.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// src/components/organisms/MobileMenu/MobileMenu.tsx
 import { ContactInformation, MobileTrigger } from '../../atoms';
 import { MobileMenuWrapper, UserActionsPanel } from './MobileMenu.styled';
 import { HelpPanelList } from '../../molecules';

package/dist/src/components/organisms/MobileMenu/MobileMenu.tsx

@@ -1,4 +1,3 @@
-// src/components/organisms/MobileMenu/MobileMenu.tsx
 import { ContactInformation, MobileTrigger } from '../../atoms'
 import { MobileMenuWrapper, UserActionsPanel } from './MobileMenu.styled'
 import { HelpPanelList } from '../../molecules'

package/dist/src/components/organisms/MobilePanel/MobilePanel.js

@@ -1,4 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// src/components/molecules/MobilePanel/MobilePanel.tsx
 import { CloseButton, PanelMenu, PanelMobileWrapper } from './MobilePanel.styled';
 export const MobilePanel = ({ showTopBar, isActive, onClose, children, closeText }) => (_jsx(PanelMobileWrapper, { isActive: isActive, showTopBar: showTopBar, children: _jsxs(PanelMenu, { children: [children, _jsx(CloseButton, { onClick: onClose, children: closeText })] }) }));

package/dist/src/components/organisms/MobilePanel/MobilePanel.tsx

@@ -1,4 +1,3 @@
-// src/components/molecules/MobilePanel/MobilePanel.tsx
 import { CloseButton, PanelMenu, PanelMobileWrapper } from './MobilePanel.styled'
 import { MobilePanelProps } from './MobilePanelProps'
 import React from 'react'

package/dist/src/components/pages/ContactUsPage/ContactUsPage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections';
-import { PhoneContactBoxMobile } from '../../molecules';
-export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, phoneContactBox, contactProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(PhoneContactBoxMobile, { ...phoneContactBox }), _jsx(ContactSection, { ...contactProps })] }));
+import { ContactInfoBoxMobile } from '../../molecules';
+export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, contactInfoBoxMobileProps, contactProps, isJonSnow = false }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(ContactInfoBoxMobile, { ...contactInfoBoxMobileProps }), _jsx(ContactSection, { ...contactProps })] }));
 };

package/dist/src/components/pages/ContactUsPage/ContactUsPage.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections'
+import { ContactInfoBoxMobile } from '../../molecules'
 import { type ContactUsPageProps } from './ContactUsPageProps'
-import { PhoneContactBoxMobile } from '../../molecules'
 
 export const ContactUsPage: React.FC<ContactUsPageProps> = ({
   jumbotronSimplifiedSectionProps,
-  phoneContactBox,
+  contactInfoBoxMobileProps,
   contactProps,
   isJonSnow = false
 }) => {
   return (
     <>
       <JumbotronSimplifiedSection {...jumbotronSimplifiedSectionProps} />
-      {!isJonSnow && <PhoneContactBoxMobile {...phoneContactBox} />}
+      {!isJonSnow && <ContactInfoBoxMobile {...contactInfoBoxMobileProps} />}
       <ContactSection {...contactProps} />
     </>
   )

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.d.ts

@@ -1,8 +1,8 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections';
-import { type PhoneContactBoxMobileProps } from '../../molecules';
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types';
 export interface ContactUsPageProps {
     jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps;
-    phoneContactBox: PhoneContactBoxMobileProps;
+    contactInfoBoxMobileProps: ContactInfoBoxMobileProps;
     contactProps: ContactSectionProps;
     isJonSnow?: boolean;
 }

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.ts

@@ -1,9 +1,9 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections'
-import { type PhoneContactBoxMobileProps } from '../../molecules'
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types'
 
 export interface ContactUsPageProps {
   jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps
-  phoneContactBox: PhoneContactBoxMobileProps
+  contactInfoBoxMobileProps: ContactInfoBoxMobileProps
   contactProps: ContactSectionProps
   isJonSnow?: boolean
 }

package/dist/src/components/sections/AppHeader/AppHeader.scss

@@ -2,6 +2,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  .login-button {
+    margin-right: 1rem;
+  }
   .navigation-pane__user-name {
     margin-right: 1rem;
     font-weight: bold;

package/dist/src/components/sections/ContactSection/ContactSection.styled.js

@@ -30,10 +30,12 @@ export const ContactSectionStyled = styled.section `
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
+      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

package/dist/src/components/sections/ContactSection/ContactSection.styled.ts

@@ -31,10 +31,12 @@ export const ContactSectionStyled = styled.section`
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
+      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

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])