kelt-ui-kit-react 2.0.2 → 2.0.3

package/src/index.css

@@ -1,9 +1,9 @@
 /* variables couleur */
 :root {
-  --primary-color: #123852;
-  --secondary-color: #EB5E3B;
-  --tertiary-color: #30B8C2;
-  --quaternary-color: #7dc2ef;
+  --primary-color: #004aad;
+  --secondary-color: #ff914d;
+  --tertiary-color: #00ada1;
+  --quaternary-color: #0082ad;
   --success-color: #28a745;
   --info-color: #17a2b8;
   --warning-color: #ec942c;
@@ -17,10 +17,7 @@
 html,
 body {
   margin: 0;
-  font-family: "Lexend", sans-serif;
-  font-optical-sizing: auto;
-  font-style: normal;
-  font-size: 18px;
+  font-family: "Raleway", sans-serif !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
@@ -31,48 +28,38 @@ body {
   width: 100%;
   background-color: #fff;
 }
-
 .app {
   container: app-container/ inline-size;
 }
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  /* Chrome, Safari, Edge */
+  -webkit-appearance: none; /* Chrome, Safari, Edge */
   margin: 0;
 }
-
 /* flex properties */
 
 .d-flex {
   display: flex;
 }
-
 .justify-content-start {
   justify-content: start;
 }
-
 .justify-content-end {
   justify-content: end;
 }
-
 .justify-content-center {
   justify-content: center;
 }
-
 .justify-content-between {
   justify-content: space-between;
 }
-
 .justify-content-around {
   justify-content: space-around;
 }
-
 .justify-content-evenly {
   justify-content: space-evenly;
 }
-
 .align-items-start {
   align-items: start;
 }
@@ -323,83 +310,63 @@ a {
 .mb-3 {
   margin-bottom: 1rem;
 }
-
 .pb-0 {
   padding-bottom: 0;
 }
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
-
 .pb-3 {
   padding-bottom: 1rem;
 }
-
 .pt-0 {
   padding-top: 0;
 }
-
 .pt-1 {
   padding-top: 0.25rem;
 }
-
 .pt-2 {
   padding-top: 0.5rem;
 }
-
 .pt-3 {
   padding-top: 1rem;
 }
-
 .pl-0 {
   padding-left: 0;
 }
-
 .pl-1 {
   padding-left: 0.25rem;
 }
-
 .pl-2 {
   padding-left: 0.5rem;
 }
-
 .pl-3 {
   padding-left: 1rem;
 }
-
 .pr-0 {
   padding-right: 0;
 }
-
 .pr-1 {
   padding-right: 0.25rem;
 }
-
 .pr-2 {
   padding-right: 0.5rem;
 }
-
 .pr-3 {
   padding-right: 1rem;
 }
-
 .p-0 {
   padding: 0;
 }
-
 .p-1 {
   padding: 0.25rem;
 }
-
 .p-2 {
   padding: 0.5rem;
 }
-
 .p-3 {
   padding: 1rem;
 }
@@ -408,32 +375,25 @@ a {
 .border-bottom {
   border-bottom: 1px solid #cfbdbd;
 }
-
 .border-top {
   border-top: 1px solid #cfbdbd;
 }
-
 .border-left {
   border-left: 1px solid #cfbdbd;
 }
-
 .border-right {
   border-right: 1px solid #cfbdbd;
 }
-
 /* fonts */
 .font-weight-bold {
   font-weight: 600;
 }
-
 .font-weight-light {
   font-weight: 300;
 }
-
 .font-weight-normal {
   font-weight: 400;
 }
-
 .font-weight-italic {
   font-style: italic;
 }
@@ -442,41 +402,32 @@ a {
 .visible {
   visibility: visible;
 }
-
 .hidden {
   visibility: hidden;
 }
-
 .position-relative {
   position: relative;
 }
-
 .position-absolute {
   position: absolute;
 }
-
 .cursor-pointer {
   cursor: pointer;
 }
-
 .w-100 {
   width: 100%;
 }
-
 .min-width-auto {
   min-width: auto;
 }
-
 .disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
-
 .overflow-auto {
   overflow: auto;
 }
-
 .toggle-btn {
   display: flex;
   width: 100%;
@@ -541,8 +492,11 @@ a {
   /* Couleurs : gris pour la barre, transparent pour le fond */
 }
 
-@media (min-width: 576px) {}
+@media (min-width: 576px) {
+}
 
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+}
 
-@media (min-width: 992px) {}
+@media (min-width: 992px) {
+}

package/src/index.ts

@@ -19,13 +19,13 @@ export { useIsMobile } from "./_core/hooks/useIsMobile";
 export { useToken } from "./_core/hooks/useToken";
 export { useValidate } from "./_core/hooks/useValidate";
 export { WidgetSupport } from "./_core/hooks/widgetSupport";
+
 export { ButtonAction } from "./action/ButtonAction";
-export { AddressSearch } from "./addressSearch/AddressSearch";
-export type { AddressSearchProps } from "./addressSearch/AddressSearch";
 export { Badge } from "./badge/Badge";
 export { Button } from "./button/Button";
 export { ButtonActions } from "./button/buttonActions/ButtonActions";
 export { ButtonFile } from "./button/buttonFile/ButtonFile";
+export { ButtonFilters } from "./button/buttonFilters/ButtonFilters";
 export { Card } from "./card/Card";
 export { Carousel } from "./carousel/Carousel";
 export { Damier } from "./damier/Damier";
@@ -35,21 +35,11 @@ export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";
 export { TypeInputEnum } from "./form/form.enum";
-export type { FormMode, FormSection } from "./form/form.interface";
 export { Input } from "./form/input/Input";
 export { InputNumber } from "./form/inputNumber/InputNumber";
 export { InputPrice } from "./form/inputPrice/InputPrice";
 export { TextArea } from "./form/textArea/TextArea";
 export { Grid } from "./grid/Grid";
-export {
-  GeocodingService,
-  geocodingService,
-} from "./geocoding/GeocodingService";
-export type {
-  GeocodedAddress,
-  GeocodingProvider,
-  GeocodingSearchOptions,
-} from "./geocoding/geocoding.interface";
 export { Header } from "./header/Header";
 export { Icon } from "./icon/Icon";
 export { IconSizeEnum } from "./icon/iconSize.enum";

package/src/menus/Menus.tsx

@@ -22,7 +22,6 @@ export const Menus = (props: ExpandProps) => {
           <Menu
             item={item}
             onChange={onChange}
-            className={item.subMenu && item.subMenu.length > 0 ? "has-submenu" : ""}
             active={currentItem?.id === item.id}
           />
           {item.subMenu && item.subMenu.length > 0 && (

package/src/menus/menu/Menu.tsx

@@ -4,13 +4,12 @@ export type MenuProps = {
   active: boolean;
   item: MenuInterface;
   onChange: (item: MenuInterface) => void;
-  className?: string;
 };
 export const Menu = (props: MenuProps): JSX.Element => {
   return (
     <div
       onClick={() => props.onChange(props.item)}
-      className={`expand ${props.active ? "expand--active" : ""} ${props.className || ""}`}
+      className={props.active ? "expand expand--active" : "expand"}
     >
       {props.item.children}
     </div>

package/src/overlayPanel/OverlayPanel.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useId,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -23,14 +24,16 @@ export type PositionOverlay =
   | "bottomRight";
 
 export type OverlayPanelProps = {
-  referenceElement?: HTMLElement;
+  referenceElement?: HTMLElement | HTMLTableElement;
   coordonnees?: { top: number; left: number };
   position?: PositionOverlay;
   children: React.ReactNode;
-  className?: string;
   show?: boolean;
   id?: string;
+  className?: string;
   closeOverlay?: (close: boolean) => void;
+  usePortal?: boolean;
+  matchReferenceWidth?: boolean;
 };
 
 export const OverlayPanel = forwardRef(
@@ -39,11 +42,13 @@ export const OverlayPanel = forwardRef(
       referenceElement,
       position,
       coordonnees,
-      className,
       children,
       show,
+      className,
       id,
       closeOverlay,
+      usePortal = true,
+      matchReferenceWidth = false,
     }: OverlayPanelProps,
     ref: React.Ref<{
       setCoords?: (coords: { top: number; left: number }) => void;
@@ -54,10 +59,16 @@ export const OverlayPanel = forwardRef(
     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,
+      setCoords: (newCoords: { top: number; left: number }) => {
+        setCoords(newCoords);
+        setIsPositioned(true);
+      },
     }));
 
     useEffect(() => {
@@ -66,10 +77,11 @@ export const OverlayPanel = forwardRef(
       }
     }, [activeOverlayId, overlayId]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       const updatePosition = () => {
         if (!position && coordonnees) {
           setCoords(coordonnees);
+          setIsPositioned(true);
         } else if (referenceElement) {
           const rect = referenceElement.getBoundingClientRect();
           const boxRect = boxRef.current?.getBoundingClientRect();
@@ -108,6 +120,14 @@ export const OverlayPanel = forwardRef(
             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;
@@ -122,18 +142,35 @@ export const OverlayPanel = forwardRef(
               }
             }
 
-            setCoords({ top, left: left < 0 ? 0 : left });
+            // 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);
-    }, [referenceElement, isShow, position]);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [referenceElement, isShow, position, matchReferenceWidth]);
 
     const openOverlay = () => {
       setIsShow(true);
@@ -154,18 +191,24 @@ export const OverlayPanel = forwardRef(
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {
         if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
-          closeOverlayHandler(event);
+          // Pas de stopPropagation ici : le clic doit continuer vers sa cible
+          setIsShow(false);
+          setActiveOverlay(null);
+          if (closeOverlay) {
+            closeOverlay(false);
+          }
         }
       };
 
       if (isShow) {
-        document.addEventListener("mousedown", handleClickOutside);
+        // Phase de capture : fonctionne même si un parent (ex. Modal) stoppe la propagation
+        document.addEventListener("mousedown", handleClickOutside, true);
       }
 
       return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("mousedown", handleClickOutside, true);
       };
-    }, [isShow, closeOverlayHandler]);
+    }, [isShow, closeOverlay, setActiveOverlay]);
     useEffect(() => {
       if (show) {
         openOverlay();
@@ -174,15 +217,16 @@ export const OverlayPanel = forwardRef(
 
     if (!isShow) return null;
 
-    return ReactDOM.createPortal(
+    const overlayContent = (
       <OverlayPanelStyled
-        className={className}
         ref={boxRef}
         $top={coords.top}
         $left={coords.left}
+        $minWidth={referenceWidth}
+        $visible={isPositioned}
       >
         <div
-          className={`overlayPanel ${
+          className={`overlayPanel ${className ? className : ""} ${
             coords.top > 0 || coords.left > 0 ? "visible" : "hide"
           }`}
         >
@@ -193,10 +237,19 @@ export const OverlayPanel = forwardRef(
           >
             <Icon classIcon="bi-x-lg" />
           </button>
-          {children}
+          <div onClick={(e) => e.stopPropagation()}>{children}</div>
         </div>
-      </OverlayPanelStyled>,
-      document.body,
+      </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/overlay.context.tsx

@@ -7,6 +7,11 @@ interface OverlayContextType {
 
 const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
 
+const defaultOverlayContext: OverlayContextType = {
+  activeOverlayId: null,
+  setActiveOverlay: () => {},
+};
+
 export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
@@ -21,8 +26,5 @@ export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
 
 export const useOverlayContext = () => {
   const context = useContext(OverlayContext);
-  if (!context) {
-    throw new Error("useOverlayContext must be used within an OverlayProvider");
-  }
-  return context;
+  return context ?? defaultOverlayContext;
 };

package/src/overlayPanel/overlayPanel.css

@@ -1,17 +1,26 @@
 .overlayPanel {
   position: relative;
 
+  &.overlayPanel--no-portal {
+    position: absolute;
+    z-index: 14 !important;
+    width: 100%;
+  }
+
   &.hide {
     visibility: hidden;
   }
+
   &.visible {
     visibility: visible !important;
   }
+
   button {
     span {
       text-align: left;
     }
   }
+
   .toggle-btn {
     display: flex;
     justify-content: flex-end;
@@ -32,4 +41,4 @@
       font-size: 1rem;
     }
   }
-}
+}

package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx

@@ -3,16 +3,21 @@ import styled from "styled-components";
 interface OverlayPanelStyledProps {
   $top?: number;
   $left?: number;
+  $minWidth?: number;
+  $visible?: boolean;
 }
 
 export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
   position: absolute;
-  z-index: 5;
+  z-index: 1050;
   top: ${({ $top }) => $top}px;
   left: ${({ $left }) => $left}px;
+  ${({ $minWidth }) => ($minWidth ? `min-width: ${$minWidth}px;` : "")}
+  box-sizing: border-box;
+  visibility: ${({ $visible }) => ($visible ? "visible" : "hidden")};
   background-color: white;
   padding: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+  border-radius: 2px;
   border: 1px solid #ede;
 `;