kelt-ui-kit-react 2.0.2 → 2.0.3

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";
 
@@ -8,10 +10,13 @@ export interface SelectProps {
   label?: string;
   title?: string;
   disabled?: boolean;
-  style?: React.CSSProperties;
   name?: string;
   defaultValue?: string | string[];
   multiple?: boolean;
+  showOptions?: boolean;
+  usePortal?: boolean;
+  searchable?: boolean;
+  searchPlaceholder?: string;
   required?: boolean;
   value?: string | string[];
   className?: string;
@@ -19,6 +24,7 @@ export interface SelectProps {
   onChangeMultiple?: (value: string[]) => void;
   onChange?: (value: string) => void;
   placeholder?: string;
+  classNameOverlay?: string;
 }
 
 export const Select = ({
@@ -27,40 +33,113 @@ export const Select = ({
   options,
   className,
   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 +147,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}
+        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>

package/src/select/select.css

@@ -1,5 +1,6 @@
 .select-container {
   position: relative;
+
   &::after,
   &::before {
     --size: 0.3rem;
@@ -8,23 +9,19 @@
     right: 1rem;
     pointer-events: none;
   }
-  select:has(option[value=""]:checked) {
-    color: gray;
-  }
-  option {
-    color: #000;
-  }
+
   .clear-btn {
     position: absolute;
-    top: 2px;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     align-items: center;
     z-index: 2;
     justify-content: center;
-    bottom: 0;
-    right: 30px;
+    right: 10px;
     cursor: pointer;
   }
+
   &::before {
     border-left: var(--size) solid transparent;
     border-right: var(--size) solid transparent;
@@ -38,15 +35,18 @@
     border-top: var(--size) solid black;
     top: 55%;
   }
+
   .select-container-label {
     font-weight: bold;
     color: #333;
     margin-bottom: 2px;
+    display: block;
   }
-  .select-container-select {
+
+  .select-container-button {
     appearance: none;
     width: 100%;
-    font-size: 1rem;
+    font-size: 0.8rem;
     padding: 0.5rem 1rem;
     margin: 0.25rem 0;
     background-color: #fff;
@@ -54,16 +54,97 @@
     border-radius: 0.25rem;
     color: #000;
     cursor: pointer;
-    font-size: 0.8rem;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 2rem;
+
+    .select-container-value {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      .placeholder {
+        color: gray;
+      }
+    }
+
     &:disabled {
       background-color: #e9ecef;
       color: #6c757d;
       cursor: not-allowed;
     }
+
     &:focus {
-      border-color: #007bff;
       outline: none;
       background-color: #fff;
     }
+
+
   }
 }
+
+.select-overlay-options {
+  display: flex;
+  flex-direction: column;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 0.5rem 0;
+  background-color: #fff;
+  border: 1px solid #b2a1a1;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .select-overlay-option {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    user-select: none;
+
+    .select-overlay-checkbox {
+      min-width: 20px;
+      width: 20px;
+      cursor: pointer;
+    }
+
+    &:hover {
+      background-color: #f0f0f0;
+    }
+
+    &.selected {
+      background-color: #e7f3ff;
+      color: #007bff;
+    }
+  }
+}
+
+.select-overlay-search {
+  padding-bottom: 0.5rem;
+  /* laisse la place à la croix de fermeture de l'overlay (.toggle-btn) */
+  padding-right: 1.5rem;
+
+  input {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 0.8rem;
+    padding: 0.4rem 0.75rem;
+    border: 1px solid #b2a1a1;
+    border-radius: 0.25rem;
+
+    &:focus {
+      outline: none;
+      border-color: #888;
+    }
+  }
+}
+
+.select-overlay-empty {
+  padding: 0.5rem 1rem;
+  color: gray;
+  font-size: 0.8rem;
+}

package/src/select/selectOption.interface.ts

@@ -1,4 +1,5 @@
 export interface SelectOptionInterface {
   value: string;
   label: string;
+  disabled?: boolean;
 }

package/src/sidebar/Sidebar.tsx

@@ -15,9 +15,6 @@ export interface SidebarProps {
   onClose?: (close: boolean) => void;
 }
 
-const SWIPE_CLOSE_THRESHOLD = 60; // px à parcourir pour fermer
-const SWIPE_AXIS_LOCK_THRESHOLD = 10; // px pour déterminer l'axe du geste
-
 export const Sidebar = ({
   open,
   children,
@@ -30,13 +27,8 @@ export const Sidebar = ({
   displayOverlay = true,
 }: SidebarProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(open || false);
-  const [dragX, setDragX] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
   const sidebarRef = useRef<HTMLDivElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
-  const axisLocked = useRef<"x" | "y" | null>(null);
 
   // Créer le conteneur une seule fois
   useEffect(() => {
@@ -68,7 +60,7 @@ export const Sidebar = ({
   }, [onClose]);
 
   const handleClickOutside = useCallback(
-    (event: MouseEvent | TouchEvent) => {
+    (event: MouseEvent) => {
       if (!closeOnClickOutside) return;
       if (
         sidebarRef.current &&
@@ -77,98 +69,18 @@ export const Sidebar = ({
         toggleSidebar();
       }
     },
-    [toggleSidebar, closeOnClickOutside],
-  );
-
-  const handleTouchStart = useCallback((event: React.TouchEvent) => {
-    const touch = event.touches[0];
-    touchStartX.current = touch.clientX;
-    touchStartY.current = touch.clientY;
-    axisLocked.current = null;
-    setIsDragging(false);
-    setDragX(0);
-  }, []);
-
-  const handleTouchMove = useCallback(
-    (event: React.TouchEvent) => {
-      if (!isOpen) return;
-
-      const touch = event.touches[0];
-      const deltaX = touch.clientX - touchStartX.current;
-      const deltaY = touch.clientY - touchStartY.current;
-
-      // Détermine l'axe du geste une seule fois, dès qu'on a un déplacement suffisant
-      if (!axisLocked.current) {
-        if (
-          Math.abs(deltaX) < SWIPE_AXIS_LOCK_THRESHOLD &&
-          Math.abs(deltaY) < SWIPE_AXIS_LOCK_THRESHOLD
-        ) {
-          return; // pas encore assez de mouvement pour trancher
-        }
-        axisLocked.current = Math.abs(deltaX) > Math.abs(deltaY) ? "x" : "y";
-      }
-
-      if (axisLocked.current !== "x") {
-        return;
-      }
-
-      // Ignore les petits mouvements horizontaux
-      if (deltaX < 20) {
-        return;
-      }
-
-      event.preventDefault();
-
-      setIsDragging(true);
-      setDragX(Math.max(0, deltaX));
-    },
-    [isOpen],
-  );
-
-  const handleTouchEnd = useCallback(
-    (event: React.TouchEvent) => {
-      if (!isOpen) {
-        return;
-      }
-
-      if (axisLocked.current === "x") {
-        const touch = event.changedTouches[0];
-        const deltaX = touch.clientX - touchStartX.current;
-
-        if (deltaX > SWIPE_CLOSE_THRESHOLD) {
-          toggleSidebar();
-        }
-      }
-
-      setIsDragging(false);
-      setDragX(0);
-      axisLocked.current = null;
-    },
-    [isOpen, toggleSidebar],
-  );
-
-  const handleOverlayTouchEnd = useCallback(
-    (event: React.TouchEvent) => {
-      event.preventDefault();
-      toggleSidebar();
-    },
-    [toggleSidebar],
+    [toggleSidebar, closeOnClickOutside]
   );
 
   useEffect(() => {
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("touchstart", handleClickOutside, {
-        passive: true,
-      });
     } else {
       document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("touchstart", handleClickOutside);
     }
 
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [isOpen, handleClickOutside]);
 
@@ -178,25 +90,11 @@ export const Sidebar = ({
 
   return ReactDOM.createPortal(
     <>
-      {isOpen && displayOverlay && (
-        <div
-          className="overlay"
-          onClick={toggleSidebar}
-          onTouchEnd={handleOverlayTouchEnd}
-        ></div>
-      )}
+      {isOpen && displayOverlay && <div className="overlay"></div>}
       <div
         ref={sidebarRef}
-        style={{
-          ...(width ? { width } : {}),
-          transform: dragX ? `translateX(${dragX}px)` : undefined,
-          transition: isDragging ? "none" : undefined,
-        }}
+        style={width ? { width: width } : {}}
         className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
-        onClick={(event) => event.stopPropagation()}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
       >
         <div className="sidebar-header">
           {title && <h2 className="flex-1">{title}</h2>}
@@ -208,6 +106,6 @@ export const Sidebar = ({
         {children && children}
       </div>
     </>,
-    rootRef.current,
+    rootRef.current
   );
 };

package/src/sidebar/sidebar.css

@@ -1,18 +1,3 @@
-.sidebar {
-  touch-action: pan-y;
-  /* laisse le scroll vertical natif, gère le X nous-même */
-  will-change: transform;
-}
-
-.overlay {
-  touch-action: none;
-}
-
-.toggle-btn {
-  -webkit-tap-highlight-color: transparent;
-  touch-action: manipulation;
-}
-
 .sidebar {
   width: 200px;
   height: 100vh;
@@ -25,8 +10,6 @@
   transform: translateX(0);
   z-index: 2;
 
-
-
   &:not(.full) {
     inset: 0;
   }
@@ -101,4 +84,4 @@
       width: 40vw;
     }
   }
-}
+}

package/src/tabs/Tabs.tsx

@@ -15,6 +15,7 @@ export type TabsProps = {
   className?: string;
   tabClassName?: string;
   panelClassName?: string;
+  keepMountedVisited?: boolean;
 };
 
 export const Tabs = ({
@@ -25,9 +26,14 @@ export const Tabs = ({
   className = "",
   tabClassName = "",
   panelClassName = "",
+  keepMountedVisited = false,
 }: TabsProps) => {
   const isControlled = typeof index === "number";
   const [active, setActive] = useState<number>(defaultIndex);
+  // En mode contrôlé, seul l'onglet réellement affiché est considéré comme visité
+  const [visitedTabs, setVisitedTabs] = useState<Set<number>>(
+    () => new Set([isControlled ? (index as number) : defaultIndex]),
+  );
   const current = isControlled ? (index as number) : active;
 
   useEffect(() => {
@@ -37,6 +43,18 @@ export const Tabs = ({
     }
   }, [defaultIndex, items.length, isControlled]);
 
+  useEffect(() => {
+    setVisitedTabs((prev) => {
+      if (prev.has(current)) {
+        return prev;
+      }
+
+      const next = new Set(prev);
+      next.add(current);
+      return next;
+    });
+  }, [current]);
+
   const tabsRef = useRef<Array<HTMLButtonElement | null>>([]);
 
   const activate = (next: number) => {
@@ -82,7 +100,8 @@ export const Tabs = ({
           hidden={current !== i}
           className={`${panelClassName} mt-3`}
         >
-          {current === i && t.panel}
+          {(current === i || (keepMountedVisited && visitedTabs.has(i))) &&
+            t.panel}
         </div>
       ))}
     </div>