kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/overlayPanel/OverlayPanel.tsx

@@ -1,255 +1,260 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import ReactDOM from "react-dom";
-
-import { Icon } from "../icon/Icon";
-import { useOverlayContext } from "./overlay.context";
-import "./overlayPanel.css";
-import { OverlayPanelStyled } from "./overlayPanelStyled/OverlayPanelStyled";
-
-export type PositionOverlay =
-  | "left"
-  | "right"
-  | "topLeft"
-  | "topRight"
-  | "bottomLeft"
-  | "bottomRight";
-
-export type OverlayPanelProps = {
-  referenceElement?: HTMLElement | HTMLTableElement;
-  coordonnees?: { top: number; left: number };
-  position?: PositionOverlay;
-  children: React.ReactNode;
-  show?: boolean;
-  id?: string;
-  className?: string;
-  closeOverlay?: (close: boolean) => void;
-  usePortal?: boolean;
-  matchReferenceWidth?: boolean;
-};
-
-export const OverlayPanel = forwardRef(
-  (
-    {
-      referenceElement,
-      position,
-      coordonnees,
-      children,
-      show,
-      className,
-      id,
-      closeOverlay,
-      usePortal = true,
-      matchReferenceWidth = false,
-    }: OverlayPanelProps,
-    ref: React.Ref<{
-      setCoords?: (coords: { top: number; left: number }) => void;
-    }>,
-  ) => {
-    const { activeOverlayId, setActiveOverlay } = useOverlayContext();
-    const [isShow, setIsShow] = useState(show || false);
-    const [coords, setCoords] = useState<{ top: number; left: number }>(
-      coordonnees ?? { top: 0, left: 0 },
-    );
-    const [referenceWidth, setReferenceWidth] = useState<number | undefined>();
-    // Masque l'overlay tant que sa position n'a pas été calculée (évite le flash en 0,0)
-    const [isPositioned, setIsPositioned] = useState(false);
-    const boxRef = useRef<HTMLDivElement>(null);
-    const overlayId = useId();
-    useImperativeHandle(ref, () => ({
-      setCoords: (newCoords: { top: number; left: number }) => {
-        setCoords(newCoords);
-        setIsPositioned(true);
-      },
-    }));
-
-    useEffect(() => {
-      if (activeOverlayId !== overlayId) {
-        setIsShow(false);
-      }
-    }, [activeOverlayId, overlayId]);
-
-    useLayoutEffect(() => {
-      const updatePosition = () => {
-        if (!position && coordonnees) {
-          setCoords(coordonnees);
-          setIsPositioned(true);
-        } else if (referenceElement) {
-          const rect = referenceElement.getBoundingClientRect();
-          const boxRect = boxRef.current?.getBoundingClientRect();
-          const { innerWidth, innerHeight } = window;
-
-          if (boxRect) {
-            // Positions par défaut si définies
-            let top, left;
-            const positions = {
-              topRight: () => ({
-                top: rect.top - boxRect.height,
-                left: rect.right - boxRect.width,
-              }),
-              topLeft: () => ({
-                top: rect.top - boxRect.height,
-                left: rect.left,
-              }),
-              bottomRight: () => ({
-                top: rect.bottom,
-                left: rect.right - boxRect.width,
-              }),
-              bottomLeft: () => ({
-                top: rect.bottom,
-                left: rect.left,
-              }),
-              left: () => ({
-                top: rect.top + rect.height / 2 - boxRect.height / 2,
-                left: rect.left - boxRect.width,
-              }),
-              right: () => ({
-                top: rect.top + rect.height / 2 - boxRect.height / 2,
-                left: rect.right,
-              }),
-            };
-
-            if (position && positions[position]) {
-              // Si une position est définie, on tente de l'appliquer
-              ({ top, left } = positions[position]());
-              // Manque d'espace en bas → afficher au-dessus de l'élément
-              if (
-                (position === "bottomLeft" || position === "bottomRight") &&
-                top + boxRect.height > innerHeight &&
-                rect.top - boxRect.height >= 0
-              ) {
-                top = rect.top - boxRect.height;
-              }
-            } else {
-              // Sinon, on adapte dynamiquement
-              left = rect.right;
-              top = rect.bottom;
-
-              if (rect.right + boxRect.width > innerWidth) {
-                left = rect.left - boxRect.width; // Manque d'espace à droite → afficher à gauche
-              }
-
-              if (rect.bottom + boxRect.height > innerHeight) {
-                top = rect.top - boxRect.height; // Manque d'espace en bas → afficher en haut
-              }
-            }
-
-            // Coordonnées viewport → coordonnées document (position absolute dans le body)
-            setCoords({
-              top: top + window.scrollY,
-              left: (left < 0 ? 0 : left) + window.scrollX,
-            });
-            if (matchReferenceWidth) {
-              setReferenceWidth(rect.width);
-            }
-            setIsPositioned(true);
-          }
-        }
-      };
-
-      if (!isShow) {
-        setIsPositioned(false);
-      }
-
-      if (isShow) {
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-        // capture : suit aussi le scroll des conteneurs (ex. contenu d'une modale)
-        window.addEventListener("scroll", updatePosition, true);
-      }
-
-      return () => {
-        window.removeEventListener("resize", updatePosition);
-        window.removeEventListener("scroll", updatePosition, true);
-      };
-    }, [referenceElement, isShow, position, matchReferenceWidth]);
-
-    const openOverlay = () => {
-      setIsShow(true);
-      setActiveOverlay(overlayId);
-    };
-
-    const closeOverlayHandler = useCallback(
-      (e: any) => {
-        e.stopPropagation();
-        setIsShow(false);
-        setActiveOverlay(null);
-        if (closeOverlay) {
-          closeOverlay(false);
-        }
-      },
-      [closeOverlay, setActiveOverlay],
-    );
-    useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
-          // Pas de stopPropagation ici : le clic doit continuer vers sa cible
-          setIsShow(false);
-          setActiveOverlay(null);
-          if (closeOverlay) {
-            closeOverlay(false);
-          }
-        }
-      };
-
-      if (isShow) {
-        // Phase de capture : fonctionne même si un parent (ex. Modal) stoppe la propagation
-        document.addEventListener("mousedown", handleClickOutside, true);
-      }
-
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside, true);
-      };
-    }, [isShow, closeOverlay, setActiveOverlay]);
-    useEffect(() => {
-      if (show) {
-        openOverlay();
-      }
-    }, [show]);
-
-    if (!isShow) return null;
-
-    const overlayContent = (
-      <OverlayPanelStyled
-        ref={boxRef}
-        $top={coords.top}
-        $left={coords.left}
-        $minWidth={referenceWidth}
-        $visible={isPositioned}
-      >
-        <div
-          className={`overlayPanel ${className ? className : ""} ${
-            coords.top > 0 || coords.left > 0 ? "visible" : "hide"
-          }`}
-        >
-          <button
-            id={id ?? ""}
-            className="toggle-btn"
-            onClick={closeOverlayHandler}
-          >
-            <Icon classIcon="bi-x-lg" />
-          </button>
-          <div onClick={(e) => e.stopPropagation()}>{children}</div>
-        </div>
-      </OverlayPanelStyled>
-    );
-
-    if (!usePortal) {
-      return (
-        <div className={`overlayPanel overlayPanel--no-portal `} ref={boxRef}>
-          <div onClick={(e) => e.stopPropagation()}>{children}</div>
-        </div>
-      );
-    }
-
-    return ReactDOM.createPortal(overlayContent, document.body);
-  },
-);
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import ReactDOM from "react-dom";
+
+import { Icon } from "../icon/Icon";
+import { useOverlayContext } from "./overlay.context";
+import "./overlayPanel.css";
+import { OverlayPanelStyled } from "./overlayPanelStyled/OverlayPanelStyled";
+
+export type PositionOverlay =
+  | "left"
+  | "right"
+  | "topLeft"
+  | "topRight"
+  | "bottomLeft"
+  | "bottomRight";
+
+export type OverlayPanelProps = {
+  referenceElement?: HTMLElement | HTMLTableElement;
+  coordonnees?: { top: number; left: number };
+  position?: PositionOverlay;
+  children: React.ReactNode;
+  show?: boolean;
+  id?: string;
+  className?: string;
+  closeOverlay?: (close: boolean) => void;
+  usePortal?: boolean;
+  matchReferenceWidth?: boolean;
+};
+
+export const OverlayPanel = forwardRef(
+  (
+    {
+      referenceElement,
+      position,
+      coordonnees,
+      children,
+      show,
+      className,
+      id,
+      closeOverlay,
+      usePortal = true,
+      matchReferenceWidth = false,
+    }: OverlayPanelProps,
+    ref: React.Ref<{
+      setCoords?: (coords: { top: number; left: number }) => void;
+    }>,
+  ) => {
+    const { activeOverlayId, setActiveOverlay } = useOverlayContext();
+    const [isShow, setIsShow] = useState(show || false);
+    const [coords, setCoords] = useState<{ top: number; left: number }>(
+      coordonnees ?? { top: 0, left: 0 },
+    );
+    const [referenceWidth, setReferenceWidth] = useState<number | undefined>();
+    // Masque l'overlay tant que sa position n'a pas été calculée (évite le flash en 0,0)
+    const [isPositioned, setIsPositioned] = useState(false);
+    const boxRef = useRef<HTMLDivElement>(null);
+    const overlayId = useId();
+    useImperativeHandle(ref, () => ({
+      setCoords: (newCoords: { top: number; left: number }) => {
+        setCoords(newCoords);
+        setIsPositioned(true);
+      },
+    }));
+
+    useEffect(() => {
+      if (activeOverlayId !== overlayId) {
+        setIsShow(false);
+      }
+    }, [activeOverlayId, overlayId]);
+
+    useLayoutEffect(() => {
+      const updatePosition = () => {
+        if (!position && coordonnees) {
+          setCoords(coordonnees);
+          setIsPositioned(true);
+        } else if (referenceElement) {
+          const rect = referenceElement.getBoundingClientRect();
+          const boxRect = boxRef.current?.getBoundingClientRect();
+          const { innerWidth, innerHeight } = window;
+
+          if (boxRect) {
+            // Positions par défaut si définies
+            let top, left;
+            const positions = {
+              topRight: () => ({
+                top: rect.top - boxRect.height,
+                left: rect.right - boxRect.width,
+              }),
+              topLeft: () => ({
+                top: rect.top - boxRect.height,
+                left: rect.left,
+              }),
+              bottomRight: () => ({
+                top: rect.bottom,
+                left: rect.right - boxRect.width,
+              }),
+              bottomLeft: () => ({
+                top: rect.bottom,
+                left: rect.left,
+              }),
+              left: () => ({
+                top: rect.top + rect.height / 2 - boxRect.height / 2,
+                left: rect.left - boxRect.width,
+              }),
+              right: () => ({
+                top: rect.top + rect.height / 2 - boxRect.height / 2,
+                left: rect.right,
+              }),
+            };
+
+            if (position && positions[position]) {
+              // Si une position est définie, on tente de l'appliquer
+              ({ top, left } = positions[position]());
+              // Manque d'espace en bas → afficher au-dessus de l'élément
+              if (
+                (position === "bottomLeft" || position === "bottomRight") &&
+                top + boxRect.height > innerHeight &&
+                rect.top - boxRect.height >= 0
+              ) {
+                top = rect.top - boxRect.height;
+              }
+            } else {
+              // Sinon, on adapte dynamiquement
+              left = rect.right;
+              top = rect.bottom;
+
+              if (rect.right + boxRect.width > innerWidth) {
+                left = rect.left - boxRect.width; // Manque d'espace à droite → afficher à gauche
+              }
+
+              if (rect.bottom + boxRect.height > innerHeight) {
+                top = rect.top - boxRect.height; // Manque d'espace en bas → afficher en haut
+              }
+            }
+
+            const parent = !usePortal ? boxRef.current?.offsetParent : null;
+            const parentRect = parent instanceof HTMLElement ? parent.getBoundingClientRect() : null;
+            setCoords({
+              top: parentRect && parent instanceof HTMLElement
+                ? top - parentRect.top + parent.scrollTop - parent.clientTop
+                : top + window.scrollY,
+              left: parentRect && parent instanceof HTMLElement
+                ? Math.max(0, left) - parentRect.left + parent.scrollLeft - parent.clientLeft
+                : Math.max(0, left) + window.scrollX,
+            });
+            if (matchReferenceWidth) {
+              setReferenceWidth(rect.width);
+            }
+            setIsPositioned(true);
+          }
+        }
+      };
+
+      if (!isShow) {
+        setIsPositioned(false);
+      }
+
+      if (isShow) {
+        updatePosition();
+        window.addEventListener("resize", updatePosition);
+        // capture : suit aussi le scroll des conteneurs (ex. contenu d'une modale)
+        window.addEventListener("scroll", updatePosition, true);
+      }
+
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [referenceElement, isShow, position, matchReferenceWidth, usePortal, coordonnees]);
+
+    const openOverlay = () => {
+      setIsShow(true);
+      setActiveOverlay(overlayId);
+    };
+
+    const closeOverlayHandler = useCallback(
+      (e: any) => {
+        e.stopPropagation();
+        setIsShow(false);
+        setActiveOverlay(null);
+        if (closeOverlay) {
+          closeOverlay(false);
+        }
+      },
+      [closeOverlay, setActiveOverlay],
+    );
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+          // Pas de stopPropagation ici : le clic doit continuer vers sa cible
+          setIsShow(false);
+          setActiveOverlay(null);
+          if (closeOverlay) {
+            closeOverlay(false);
+          }
+        }
+      };
+
+      if (isShow) {
+        // Phase de capture : fonctionne même si un parent (ex. Modal) stoppe la propagation
+        document.addEventListener("mousedown", handleClickOutside, true);
+      }
+
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside, true);
+      };
+    }, [isShow, closeOverlay, setActiveOverlay]);
+    useEffect(() => {
+      if (show) {
+        openOverlay();
+      }
+    }, [show]);
+
+    if (!isShow) return null;
+
+    const overlayContent = (
+      <OverlayPanelStyled
+        ref={boxRef}
+        $top={coords.top}
+        $left={coords.left}
+        $minWidth={referenceWidth}
+        $visible={isPositioned}
+      >
+        <div
+          className={`overlayPanel ${className ? className : ""} ${
+            coords.top > 0 || coords.left > 0 ? "visible" : "hide"
+          }`}
+        >
+          <button
+            id={id ?? ""}
+            className="toggle-btn"
+            onClick={closeOverlayHandler}
+          >
+            <Icon classIcon="bi-x-lg" />
+          </button>
+          <div onClick={(e) => e.stopPropagation()}>{children}</div>
+        </div>
+      </OverlayPanelStyled>
+    );
+
+    if (!usePortal) {
+      return (
+        <div className={`overlayPanel overlayPanel--no-portal `} ref={boxRef}>
+          <div onClick={(e) => e.stopPropagation()}>{children}</div>
+        </div>
+      );
+    }
+
+    return ReactDOM.createPortal(overlayContent, document.body);
+  },
+);

package/src/overlayPanel/OverlayPanel.view.tsx

@@ -1,25 +1,25 @@
-import { useRef, useState } from "react";
-import { Icon } from "../icon/Icon";
-import { OverlayPanel } from "./OverlayPanel";
-
-export const OverlayPanelView = () => {
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(false);
-
-  return (
-    <>
-      <div ref={refButton} onClick={() => setOpenOverlay(!openOverlay)}>
-        <Icon classIcon="bi-list" />
-      </div>
-      {refButton.current && (
-        <OverlayPanel
-          position="bottomRight"
-          show={openOverlay}
-          closeOverlay={setOpenOverlay}
-          referenceElement={refButton.current}
-          children={<div>boom</div>}
-        />
-      )}
-    </>
-  );
-};
+import { useRef, useState } from "react";
+import { Icon } from "../icon/Icon";
+import { OverlayPanel } from "./OverlayPanel";
+
+export const OverlayPanelView = () => {
+  const refButton = useRef<HTMLDivElement>(null);
+  const [openOverlay, setOpenOverlay] = useState(false);
+
+  return (
+    <>
+      <div ref={refButton} onClick={() => setOpenOverlay(!openOverlay)}>
+        <Icon classIcon="bi-list" />
+      </div>
+      {refButton.current && (
+        <OverlayPanel
+          position="bottomRight"
+          show={openOverlay}
+          closeOverlay={setOpenOverlay}
+          referenceElement={refButton.current}
+          children={<div>boom</div>}
+        />
+      )}
+    </>
+  );
+};

package/src/overlayPanel/overlay.context.tsx

@@ -1,30 +1,30 @@
-import React, { createContext, useContext, useState } from "react";
-
-interface OverlayContextType {
-  activeOverlayId: string | null;
-  setActiveOverlay: (id: string | null) => void;
-}
-
-const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
-
-const defaultOverlayContext: OverlayContextType = {
-  activeOverlayId: null,
-  setActiveOverlay: () => {},
-};
-
-export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [activeOverlayId, setActiveOverlay] = useState<string | null>(null);
-
-  return (
-    <OverlayContext.Provider value={{ activeOverlayId, setActiveOverlay }}>
-      {children}
-    </OverlayContext.Provider>
-  );
-};
-
-export const useOverlayContext = () => {
-  const context = useContext(OverlayContext);
-  return context ?? defaultOverlayContext;
-};
+import React, { createContext, useContext, useState } from "react";
+
+interface OverlayContextType {
+  activeOverlayId: string | null;
+  setActiveOverlay: (id: string | null) => void;
+}
+
+const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
+
+const defaultOverlayContext: OverlayContextType = {
+  activeOverlayId: null,
+  setActiveOverlay: () => {},
+};
+
+export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [activeOverlayId, setActiveOverlay] = useState<string | null>(null);
+
+  return (
+    <OverlayContext.Provider value={{ activeOverlayId, setActiveOverlay }}>
+      {children}
+    </OverlayContext.Provider>
+  );
+};
+
+export const useOverlayContext = () => {
+  const context = useContext(OverlayContext);
+  return context ?? defaultOverlayContext;
+};