kelt-ui-kit-react 1.9.4 → 1.9.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/expands/expand/expand.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Icon } from "../../icon/Icon";
 import { ExpandInterface } from "./expand.interface";
 
@@ -17,6 +17,8 @@ export const Expand = ({
   onChange,
 }: ExpandProps): JSX.Element => {
   const [active, setActive] = useState<boolean>(false);
+  const expandRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (item && currentExpand) {
       if (currentExpand.id === item.id) {
@@ -29,7 +31,108 @@ export const Expand = ({
     } else {
       setActive(false);
     }
-  }, [currentExpand, setActive, item]);
+  }, [currentExpand, setActive, item, active]);
+
+  const scrollToHeader = useCallback(() => {
+    const expandElement = expandRef.current;
+    if (!expandElement) return;
+
+    let scrollParent: HTMLElement | null = expandElement.parentElement;
+    while (scrollParent) {
+      const style = window.getComputedStyle(scrollParent);
+      const isScrollable =
+        /(auto|scroll)/.test(style.overflow + style.overflowY) &&
+        scrollParent.scrollHeight > scrollParent.clientHeight;
+
+      if (isScrollable) {
+        const parentRect = scrollParent.getBoundingClientRect();
+        const targetRect = expandElement.getBoundingClientRect();
+        const offsetTop =
+          targetRect.top - parentRect.top + scrollParent.scrollTop;
+
+        scrollParent.scrollTo({
+          top: offsetTop,
+          behavior: "smooth",
+        });
+        return;
+      }
+      scrollParent = scrollParent.parentElement;
+    }
+
+    const header =
+      expandElement.querySelector<HTMLElement>(".expand-header") ||
+      expandElement;
+    header.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
+
+  useEffect(() => {
+    if (active) {
+      const timer1 = setTimeout(() => {
+        scrollToHeader();
+      }, 100);
+      const timer2 = setTimeout(() => {
+        scrollToHeader();
+      }, 350);
+      return () => {
+        clearTimeout(timer1);
+        clearTimeout(timer2);
+      };
+    }
+  }, [active, scrollToHeader]);
+
+  const handleFocusCapture = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+      if (
+        active &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT")
+      ) {
+        const expandElement = expandRef.current;
+        if (!expandElement) return;
+
+        const performScroll = () => {
+          let scrollParent: HTMLElement | null = expandElement.parentElement;
+          while (scrollParent) {
+            const style = window.getComputedStyle(scrollParent);
+            const isScrollable =
+              /(auto|scroll)/.test(style.overflow + style.overflowY) &&
+              scrollParent.scrollHeight > scrollParent.clientHeight;
+
+            if (isScrollable) {
+              const parentRect = scrollParent.getBoundingClientRect();
+              const headerRect = expandElement.getBoundingClientRect();
+              const headerOffsetTop =
+                headerRect.top - parentRect.top + scrollParent.scrollTop;
+
+              // Si on a déjà scrollé vers ou au-delà du header, on ne remonte JAMAIS au header
+              if (scrollParent.scrollTop >= headerOffsetTop - 10) {
+                const targetRect = target.getBoundingClientRect();
+                if (targetRect.bottom > parentRect.bottom) {
+                  target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                }
+                return;
+              }
+
+              // Si on n'a pas encore scrollé jusqu'au header, on y va
+              scrollParent.scrollTo({
+                top: headerOffsetTop,
+                behavior: "smooth",
+              });
+              return;
+            }
+            scrollParent = scrollParent.parentElement;
+          }
+        };
+
+        performScroll();
+        // Répéter après l'ouverture du clavier virtuel (spécifique tablettes / mobiles Android)
+        setTimeout(performScroll, 300);
+      }
+    },
+    [active],
+  );
 
   const handleChange = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -38,11 +141,13 @@ export const Expand = ({
         onChange(item);
       }
     },
-    [onChange, item]
+    [onChange, item],
   );
   return (
     <div
+      ref={expandRef}
       onClick={handleChange}
+      onFocusCapture={handleFocusCapture}
       className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
     >
       <div className={`expand-header`}>