kelt-ui-kit-react 1.9.4 → 1.9.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "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,106 @@ 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 timer = setTimeout(() => {
+        scrollToHeader();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [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;
+
+        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 = target.getBoundingClientRect();
+
+            // 1. Si l'input est déjà visible dans le conteneur, on ne scrolle pas
+            const isVisible =
+              targetRect.top >= parentRect.top &&
+              targetRect.bottom <= parentRect.bottom;
+
+            if (isVisible) {
+              return;
+            }
+
+            const headerRect = expandElement.getBoundingClientRect();
+            const headerOffsetTop =
+              headerRect.top - parentRect.top + scrollParent.scrollTop;
+
+            // 2. Si on a déjà scrollé vers ou au-delà du header, on ne remonte JAMAIS
+            if (scrollParent.scrollTop >= headerOffsetTop - 5) {
+              if (targetRect.bottom > parentRect.bottom) {
+                target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+              }
+              return;
+            }
+
+            // 3. Sinon, on scrolle vers le header
+            scrollParent.scrollTo({
+              top: headerOffsetTop,
+              behavior: "smooth",
+            });
+            return;
+          }
+          scrollParent = scrollParent.parentElement;
+        }
+      }
+    },
+    [active],
+  );
 
   const handleChange = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -38,11 +139,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`}>