kelt-ui-kit-react 2.0.2 → 2.0.4

package/src/grid/row/Row.tsx

@@ -1,12 +1,49 @@
-import "./row.css";
-type RowProps = {
-  children: React.ReactNode;
-  className?: string;
-  scroll?: boolean;
-};
-
-export const Row: React.FC<RowProps> = ({ children, className, scroll }) => (
-  <div className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""}`}>
-    {children}
-  </div>
-);
+import { createContext } from "react";
+import { GridResponsive } from "../grid.interface";
+import "./row.css";
+
+export type GridGap = boolean | number | string;
+
+export const RowResponsiveContext = createContext<GridResponsive>("app");
+
+type RowProps = {
+  children: React.ReactNode;
+  className?: string;
+  scroll?: boolean;
+  /** true (défaut) : gap par défaut, false : pas de gap, number : px, string : valeur CSS ("1rem") */
+  gap?: GridGap;
+  /** Largeur sur laquelle se basent les breakpoints des Col (défaut : "app") */
+  responsive?: GridResponsive;
+};
+
+const getGutter = (gap: GridGap) => {
+  if (gap === true) return undefined; // garde la valeur par défaut du CSS
+  if (gap === false) return "0px";
+  return typeof gap === "number" ? `${gap}px` : gap;
+};
+
+export const Row: React.FC<RowProps> = ({
+  children,
+  className,
+  scroll,
+  gap = true,
+  responsive = "app",
+}) => {
+  const gutter = getGutter(gap);
+  return (
+    <RowResponsiveContext.Provider value={responsive}>
+      <div
+        className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""} ${
+          responsive === "row" ? "grid-row--responsive" : ""
+        }`}
+        style={
+          gutter
+            ? ({ "--grid-gutter": gutter } as React.CSSProperties)
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </RowResponsiveContext.Provider>
+  );
+};

package/src/grid/row/row.css

@@ -1,6 +1,14 @@
 .grid-row {
+  --grid-gutter: 15px;
   display: flex;
   flex-wrap: wrap;
+  column-gap: var(--grid-gutter);
+
+  /* responsive="row" : les breakpoints des Col se basent sur la largeur de la Row.
+     Attention : la Row a alors une largeur min de contenu de 0 dans un parent flex. */
+  &.grid-row--responsive {
+    container: kelt-grid / inline-size;
+  }
 
   &.scroll {
     overflow-x: auto;
@@ -8,7 +16,7 @@
   }
 }
 
-@container (min-width: 998px) {
+@container app-container (min-width: 998px) {
   .grid-row {
     &.scroll {
       overflow-x: auto;

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;
 `;

package/src/select/Select.tsx

@@ -1,5 +1,7 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../icon/Icon";
+
+import { OverlayPanel } from "../overlayPanel/OverlayPanel";
 import "./select.css";
 import { SelectOptionInterface } from "./selectOption.interface";
 
@@ -12,6 +14,10 @@ export interface SelectProps {
   name?: string;
   defaultValue?: string | string[];
   multiple?: boolean;
+  showOptions?: boolean;
+  usePortal?: boolean;
+  searchable?: boolean;
+  searchPlaceholder?: string;
   required?: boolean;
   value?: string | string[];
   className?: string;
@@ -19,6 +25,7 @@ export interface SelectProps {
   onChangeMultiple?: (value: string[]) => void;
   onChange?: (value: string) => void;
   placeholder?: string;
+  classNameOverlay?: string;
 }
 
 export const Select = ({
@@ -29,38 +36,112 @@ export const Select = ({
   disabled,
   style,
   multiple = false,
-  required = false,
+  showOptions = false,
   defaultValue,
-  name,
+  usePortal = false,
+  searchable = false,
+  searchPlaceholder = "Rechercher...",
   onChange,
   onChangeMultiple,
   value,
   placeholder,
+  classNameOverlay,
 }: SelectProps): JSX.Element => {
-  const inputRefs = useRef<{ [key: string]: HTMLSelectElement | null }>({});
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [overlayRef, setOverlayRef] = useState<HTMLElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const hasAutoOpened = useRef(false);
+  const optionsListRef = useRef<HTMLDivElement | null>(null);
+  const [search, setSearch] = useState("");
 
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    let selectedValue: string | string[];
-    if (multiple) {
-      selectedValue = Array.from(
-        event.target.selectedOptions,
-        (opt) => opt.value,
+  useEffect(() => {
+    if (!showOverlay) setSearch("");
+  }, [showOverlay]);
+
+  const filteredOptions = useMemo(() => {
+    const normalize = (text: string) =>
+      text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+    const term = normalize(search);
+    if (!searchable || !term) return options;
+    return options.filter((option) => normalize(option.label).includes(term));
+  }, [options, search, searchable]);
+
+  useEffect(() => {
+    if (!showOverlay) return;
+    const timer = setTimeout(() => {
+      const container = optionsListRef.current;
+      if (!container) return;
+      const selected = container.querySelector<HTMLElement>(
+        ".select-overlay-option.selected",
       );
+      selected?.scrollIntoView({ block: "nearest" });
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [showOverlay]);
+  // "" est une vraie valeur si une option la porte (ex. "Aucun", "État")
+  const hasEmptyOption = options.some((option) => option.value === "");
+  const isDefined = (v?: string | string[]) =>
+    v !== undefined && v !== null && (v !== "" || hasEmptyOption);
+  const selectedValues = Array.isArray(value)
+    ? value
+    : isDefined(value)
+      ? [value as string]
+      : isDefined(defaultValue)
+        ? Array.isArray(defaultValue)
+          ? defaultValue
+          : [defaultValue as string]
+        : [];
+  const hasSelection = selectedValues.some((v) => v !== "");
+
+  const getDisplayValue = () => {
+    if (selectedValues.length === 0) return placeholder || "";
+    if (multiple) {
+      const labels = selectedValues
+        .map((v) => options.find((opt) => opt.value === v)?.label)
+        .filter((l): l is string => !!l);
+      return labels.join(", ");
+    }
+    const selected = options.find((opt) => opt.value === selectedValues[0]);
+    return selected?.label || "";
+  };
+
+  const handleOptionClick = (optionValue: string) => {
+    if (multiple) {
+      const newValues = selectedValues.includes(optionValue)
+        ? selectedValues.filter((v) => v !== optionValue)
+        : [...selectedValues, optionValue];
       if (onChangeMultiple) {
-        onChangeMultiple(selectedValue as string[]);
+        onChangeMultiple(newValues);
       }
     } else {
-      selectedValue = event.target.value;
       if (onChange) {
-        onChange(selectedValue);
+        onChange(optionValue);
       }
+      setShowOverlay(false);
     }
   };
+
   const resetValue = useCallback(() => {
-    if (onChange) {
+    if (multiple && onChangeMultiple) {
+      onChangeMultiple([]);
+    } else if (onChange) {
       onChange("");
     }
-  }, [onChange]);
+  }, [onChange, onChangeMultiple, multiple]);
+
+  useEffect(() => {
+    if (
+      showOptions &&
+      !disabled &&
+      !hasAutoOpened.current &&
+      triggerRef.current
+    ) {
+      setOverlayRef(triggerRef.current);
+      setShowOverlay(true);
+      hasAutoOpened.current = true;
+    }
+  }, [showOptions, disabled]);
+
   return (
     <div id={id} className={`select-container ${className ? className : ""}`}>
       {label && (
@@ -68,37 +149,95 @@ export const Select = ({
           {label}
         </label>
       )}
-      <select
-        defaultValue=""
-        required={required}
-        name={name}
-        style={style}
-        disabled={disabled}
+      <button
+        ref={triggerRef}
         id={`select-${id}`}
-        className="select-container-select"
-        value={value ?? defaultValue ?? (multiple ? [] : "")}
-        onChange={handleChange}
-        multiple={multiple}
-        ref={(el) => (inputRefs.current[id ?? "select"] = el)}
+        disabled={disabled}
+        style={style}
+        className="select-container-button"
+        onClick={(e) => {
+          setOverlayRef(e.currentTarget as HTMLElement);
+          setShowOverlay(true);
+        }}
+        type="button"
+        aria-valuetext={getDisplayValue() || placeholder}
+        title={getDisplayValue() || placeholder}
+        aria-haspopup="listbox"
+        aria-expanded={showOverlay}
       >
-        {placeholder && !defaultValue && !multiple && (
-          <option selected disabled hidden value="">
-            {placeholder}
-          </option>
-        )}
-        {options.map((option, index) => (
-          <option key={index} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {value !== "" && placeholder && (
+        <span className="select-container-value">
+          {getDisplayValue() || (
+            <span className="placeholder">{placeholder}</span>
+          )}
+        </span>
+      </button>
+
+      {showOverlay && overlayRef && (
+        <OverlayPanel
+          show={showOverlay}
+          position="bottomLeft"
+          className={classNameOverlay ?? ""}
+          closeOverlay={() => setShowOverlay(false)}
+          referenceElement={overlayRef}
+          usePortal={usePortal}
+          matchReferenceWidth={usePortal}
+          children={
+            <>
+              {searchable && (
+                <div className="select-overlay-search">
+                  <input
+                    type="text"
+                    autoFocus
+                    value={search}
+                    placeholder={searchPlaceholder}
+                    onChange={(e) => setSearch(e.target.value)}
+                    onKeyDown={(e) => {
+                      // évite de soumettre le formulaire parent
+                      if (e.key === "Enter") e.preventDefault();
+                    }}
+                  />
+                </div>
+              )}
+              <div className="select-overlay-options" ref={optionsListRef}>
+                {searchable && filteredOptions.length === 0 && (
+                  <div className="select-overlay-empty">Aucun résultat</div>
+                )}
+                {filteredOptions.map((option) => (
+                  <div
+                    key={option.value}
+                    aria-valuetext={option.label}
+                    className={`select-overlay-option ${option.disabled ? "disabled" : ""}  ${selectedValues.includes(option.value) ? "selected" : ""
+                      }`}
+                    onClick={() =>
+                      !option.disabled && handleOptionClick(option.value)
+                    }
+                    role="option"
+                    aria-selected={selectedValues.includes(option.value)}
+                  >
+                    {multiple && (
+                      <input
+                        type="checkbox"
+                        checked={selectedValues.includes(option.value)}
+                        readOnly
+                        className="select-overlay-checkbox"
+                      />
+                    )}
+                    <span>{option.label}</span>
+                  </div>
+                ))}
+              </div>
+            </>
+          }
+        />
+      )}
+
+      {hasSelection && placeholder && (
         <div
           className="clear-btn"
           onClick={resetValue}
           aria-label="Réinitialiser"
         >
-          <Icon classIcon="bi-x" />
+          <Icon classIcon="bi-x-circle" />
         </div>
       )}
     </div>