kelt-ui-kit-react 2.0.1 → 2.0.3

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>

package/src/tabs/tabs.css

@@ -1,30 +1,24 @@
 .tabs-root {
   height: 100%;
-
   .tabs-header {
     display: flex;
     border-bottom: 1px solid #b2a1a1;
-
     .tab-button {
       padding: 0.5rem 0.75rem;
       border: 0px;
       outline: none;
       background-color: transparent;
-      color: #1e293b;
-      /* slate-800 */
+      color: #1e293b; /* slate-800 */
       cursor: pointer;
 
       &.tab-button--active {
-        border-bottom: 2px solid var(--primary-color);
-        /* slate-800 */
+        border-bottom: 2px solid var(--primary-color); /* slate-800 */
         border-radius: 0px;
-        font-weight: bold;
       }
-
       &.tab-button--disabled {
         opacity: 0.5;
         cursor: not-allowed;
       }
     }
   }
-}
+}

package/src/toaster/Toaster.tsx

@@ -34,14 +34,9 @@ export const Toaster = () => {
   return ReactDOM.createPortal(
     <div className={`toaster toaster-${severity}`}>
       {close && (
-        <button
-          type="button"
-          className="toaster--close"
-          onClick={onClose}
-          aria-label="Fermer la notification"
-        >
+        <div className="toaster--close" onClick={onClose}>
           <Icon classIcon="bi-x" />
-        </button>
+        </div>
       )}
       <div>
         {severity === "info" && <Icon classIcon="bi-info-circle" />}

package/src/toaster/Toaster.view.tsx

@@ -9,7 +9,6 @@ export const ToasterView = (): JSX.Element => {
       description: "This is a description for the toast message.",
       severity: "warning",
       duration: 10000,
-      close: true,
       children: <div>Additional content can go here.</div>,
     });
   }, [showToast]);

package/src/toaster/store/useToasterStore.tsx

@@ -15,7 +15,6 @@ type ToasterState = {
       severity?: "info" | "success" | "error" | "warning";
       duration?: number;
       children?: React.ReactNode;
-      close?: boolean;
     }
   ) => void;
   hideToast: () => void;
@@ -37,7 +36,6 @@ export const useToasterStore = create<ToasterState>((set) => ({
       duration: options.duration || 2500,
       visible: true,
       children: options.children || null,
-      close: options.close ?? true,
     })),
   hideToast: () => set(() => ({ visible: false })),
 }));

package/src/toaster/toaster.css

@@ -15,12 +15,7 @@
     position: absolute;
     top: 2px;
     right: 2px;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
     color: #333;
-    min-width: auto;
     cursor: pointer;
     .bi {
       font-size: 1.2rem;
@@ -60,7 +55,7 @@
   }
   .title {
     font-weight: 500;
-    font-size: 18px;
+    font-size: 16px;
     &.title-info {
       color: var(--primary-color);
     }
@@ -75,7 +70,7 @@
     }
   }
   .subtitle {
-    font-size: 16px;
+    font-size: 14px;
   }
   .bi-info-circle {
     color: var(--primary-color);