From bc3853e734393fa2e9de206cb2db805cebc723e4 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 6 Feb 2024 13:49:29 +0300
Subject: [PATCH] Lint fixes

---
 components/doc/chart/accessibilitydoc.js      | 25 +++++++++----------
 components/lib/multiselect/MultiSelect.js     |  1 +
 .../useAnimatedFeatures.js                    |  2 ++
 .../templateFeaturesAnimation/useVisible.js   |  2 ++
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/doc/chart/accessibilitydoc.js b/components/doc/chart/accessibilitydoc.js
index 1117e6035b..b127d465ef 100644
--- a/components/doc/chart/accessibilitydoc.js
+++ b/components/doc/chart/accessibilitydoc.js
@@ -13,18 +13,17 @@ export function AccessibilityDoc() {
     };
 
     return (
-            <DocSectionText id="accessibility" label="Accessibility">
-                <h3>Screen Reader</h3>
-                <p>
-                    Chart components internally use <i>canvas</i> element, refer to the{' '}
-                    <a className="text-primary hover:underline font-medium" href="https://www.chartjs.org/docs/latest/general/accessibility.html">
-                        Chart.js accessibility
-                    </a>{' '}
-                    guide for more information. The canvas element can be customized with <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be
-                    able to provide fallback content like a table.
-                </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
-            </DocSectionText>
-        
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Chart components internally use <i>canvas</i> element, refer to the{' '}
+                <a className="text-primary hover:underline font-medium" href="https://www.chartjs.org/docs/latest/general/accessibility.html">
+                    Chart.js accessibility
+                </a>{' '}
+                guide for more information. The canvas element can be customized with <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able
+                to provide fallback content like a table.
+            </p>
+            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+        </DocSectionText>
     );
 }
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index b88958275d..02a430f1cb 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -912,6 +912,7 @@ export const MultiSelect = React.memo(
             setTimeout(() => {
                 props.overlayVisible ? show() : hide();
             }, 100);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [props.overlayVisible]);
 
         useUpdateEffect(() => {
diff --git a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
index 33add02add..b8d22242ba 100644
--- a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
+++ b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
@@ -48,11 +48,13 @@ const useAnimatedFeatures = (animationRef, arrayLength, seconds = 10000) => {
             clearAllIntervals();
             setSelectedID(1);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [animationRef, isVisible]);
 
     useEffect(() => {
         if (!hoveredID) null;
         handleHover(hoveredID, 'onMouseEnter');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedID]);
 
     return { selectedID, setHoveredID, handleClick, handleHover };
diff --git a/components/templates/templateFeaturesAnimation/useVisible.js b/components/templates/templateFeaturesAnimation/useVisible.js
index 21d664b21c..df0b69e667 100644
--- a/components/templates/templateFeaturesAnimation/useVisible.js
+++ b/components/templates/templateFeaturesAnimation/useVisible.js
@@ -17,9 +17,11 @@ const useVisible = (element, rootMargin = 0.2) => {
 
         return () => {
             if (observer && element.current) {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
                 observer.unobserve(element.current);
             }
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return isVisible;