kelt-ui-kit-react 2.0.6 → 2.0.9

package/src/sidebar/Sidebar.tsx

@@ -1,213 +1,213 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import ReactDOM from "react-dom";
-import { Icon } from "../icon/Icon";
-import "./sidebar.css";
-
-export interface SidebarProps {
-  id?: string;
-  open?: boolean;
-  title?: string;
-  children?: React.ReactNode;
-  className?: string;
-  width?: string;
-  displayOverlay?: boolean;
-  closeOnClickOutside?: boolean;
-  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,
-  title,
-  onClose,
-  className,
-  id,
-  width,
-  closeOnClickOutside = true,
-  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(() => {
-    if (!rootRef.current) {
-      rootRef.current = document.createElement("div");
-      rootRef.current.id = `sidebar-root-${id || crypto.randomUUID()}`;
-      document.body.appendChild(rootRef.current);
-    }
-
-    return () => {
-      // Nettoyage lors du démontage
-      if (rootRef.current && rootRef.current.parentNode) {
-        document.body.removeChild(rootRef.current);
-        rootRef.current = null;
-      }
-    };
-  }, [id]);
-
-  // Synchroniser l'état `isOpen` avec la prop `open`
-  useEffect(() => {
-    setIsOpen(open || false);
-  }, [open]);
-
-  const toggleSidebar = useCallback(() => {
-    setIsOpen(false);
-    if (onClose) {
-      onClose(false);
-    }
-  }, [onClose]);
-
-  const handleClickOutside = useCallback(
-    (event: MouseEvent | TouchEvent) => {
-      if (!closeOnClickOutside) return;
-      if (
-        sidebarRef.current &&
-        !sidebarRef.current.contains(event.target as Node)
-      ) {
-        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],
-  );
-
-  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]);
-
-  if (!rootRef.current) {
-    return <></>; // Ne pas tenter de rendre si le conteneur n'existe pas
-  }
-
-  return ReactDOM.createPortal(
-    <>
-      {isOpen && displayOverlay && (
-        <div
-          className="overlay"
-          onClick={toggleSidebar}
-          onTouchEnd={handleOverlayTouchEnd}
-        ></div>
-      )}
-      <div
-        ref={sidebarRef}
-        style={{
-          ...(width ? { width } : {}),
-          transform: dragX ? `translateX(${dragX}px)` : undefined,
-          transition: isDragging ? "none" : undefined,
-        }}
-        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>}
-          <button className="toggle-btn" onClick={toggleSidebar}>
-            <Icon classIcon="bi-x-lg" />
-          </button>
-        </div>
-
-        {children && children}
-      </div>
-    </>,
-    rootRef.current,
-  );
-};
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { Icon } from "../icon/Icon";
+import "./sidebar.css";
+
+export interface SidebarProps {
+  id?: string;
+  open?: boolean;
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+  width?: string;
+  displayOverlay?: boolean;
+  closeOnClickOutside?: boolean;
+  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,
+  title,
+  onClose,
+  className,
+  id,
+  width,
+  closeOnClickOutside = true,
+  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(() => {
+    if (!rootRef.current) {
+      rootRef.current = document.createElement("div");
+      rootRef.current.id = `sidebar-root-${id || crypto.randomUUID()}`;
+      document.body.appendChild(rootRef.current);
+    }
+
+    return () => {
+      // Nettoyage lors du démontage
+      if (rootRef.current && rootRef.current.parentNode) {
+        document.body.removeChild(rootRef.current);
+        rootRef.current = null;
+      }
+    };
+  }, [id]);
+
+  // Synchroniser l'état `isOpen` avec la prop `open`
+  useEffect(() => {
+    setIsOpen(open || false);
+  }, [open]);
+
+  const toggleSidebar = useCallback(() => {
+    setIsOpen(false);
+    if (onClose) {
+      onClose(false);
+    }
+  }, [onClose]);
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      if (!closeOnClickOutside) return;
+      if (
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as Node)
+      ) {
+        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],
+  );
+
+  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]);
+
+  if (!rootRef.current) {
+    return <></>; // Ne pas tenter de rendre si le conteneur n'existe pas
+  }
+
+  return ReactDOM.createPortal(
+    <>
+      {isOpen && displayOverlay && (
+        <div
+          className="overlay"
+          onClick={toggleSidebar}
+          onTouchEnd={handleOverlayTouchEnd}
+        ></div>
+      )}
+      <div
+        ref={sidebarRef}
+        style={{
+          ...(width ? { width } : {}),
+          transform: dragX ? `translateX(${dragX}px)` : undefined,
+          transition: isDragging ? "none" : undefined,
+        }}
+        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>}
+          <button className="toggle-btn" onClick={toggleSidebar}>
+            <Icon classIcon="bi-x-lg" />
+          </button>
+        </div>
+
+        {children && children}
+      </div>
+    </>,
+    rootRef.current,
+  );
+};

package/src/sidebar/Sidebar.view.tsx

@@ -1,17 +1,17 @@
-import { useCallback, useState } from "react";
-import { Button } from "../button/Button";
-import { Sidebar } from "./Sidebar";
-
-export const SidebarView = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const onClick = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen]);
-
-  return (
-    <>
-      <Button title={"open me"} onClick={onClick}></Button>
-      <Sidebar onClose={setIsOpen} title="Menu" open={isOpen} />
-    </>
-  );
-};
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { Sidebar } from "./Sidebar";
+
+export const SidebarView = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClick = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return (
+    <>
+      <Button title={"open me"} onClick={onClick}></Button>
+      <Sidebar onClose={setIsOpen} title="Menu" open={isOpen} />
+    </>
+  );
+};

package/src/sidebar/sidebar.css

@@ -1,104 +1,104 @@
-.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;
-  background-color: var(--primary-color);
-  color: white;
-  transition: width 0.3s;
-  overflow: hidden;
-  position: fixed;
-  transition: transform 0.3s ease-in-out;
-  transform: translateX(0);
-  z-index: 2;
-
-
-
-  &:not(.full) {
-    inset: 0;
-  }
-
-  &.full {
-    width: 100%;
-    right: 0px;
-    top: 0;
-  }
-
-  .sidebar-header {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-  }
-
-  &.closed {
-    transform: translateX(-100vw);
-  }
-
-  .sidebar-items {
-    list-style-type: none;
-    padding: 0;
-
-    .sidebar-item {
-      padding: 10px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-
-      .item-icon {
-        margin-right: 10px;
-      }
-
-      &:hover {
-        background-color: #34495e;
-      }
-    }
-  }
-
-  .toggle-btn {
-    display: flex;
-    width: 100%;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    justify-content: flex-end;
-    background-color: transparent;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 18px;
-    margin: 0;
-    min-width: 10px;
-    width: auto;
-    padding: 0px;
-  }
-}
-
-.overlay {
-  background-color: #0006;
-  opacity: 30%;
-  width: 100%;
-  position: fixed;
-  inset: 0;
-  z-index: 1;
-}
-
-@media screen and (min-width: 992px) {
-  .sidebar {
-    &.full {
-      width: 40vw;
-    }
-  }
+.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;
+  background-color: var(--primary-color);
+  color: white;
+  transition: width 0.3s;
+  overflow: hidden;
+  position: fixed;
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(0);
+  z-index: 2;
+
+
+
+  &:not(.full) {
+    inset: 0;
+  }
+
+  &.full {
+    width: 100%;
+    right: 0px;
+    top: 0;
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+  }
+
+  &.closed {
+    transform: translateX(-100vw);
+  }
+
+  .sidebar-items {
+    list-style-type: none;
+    padding: 0;
+
+    .sidebar-item {
+      padding: 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      .item-icon {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        background-color: #34495e;
+      }
+    }
+  }
+
+  .toggle-btn {
+    display: flex;
+    width: 100%;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    justify-content: flex-end;
+    background-color: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 18px;
+    margin: 0;
+    min-width: 10px;
+    width: auto;
+    padding: 0px;
+  }
+}
+
+.overlay {
+  background-color: #0006;
+  opacity: 30%;
+  width: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+@media screen and (min-width: 992px) {
+  .sidebar {
+    &.full {
+      width: 40vw;
+    }
+  }
 }