kelt-ui-kit-react 1.2.0 → 1.2.2

package/src/modal/Modal.tsx

@@ -1,53 +1,53 @@
-import React, { ReactNode } from "react";
-import { createPortal } from "react-dom";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
-import "./modal.css";
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit?: () => void;
-  titleButton?: string;
-  children: ReactNode;
-  title?: string;
-  styleContainer?: React.CSSProperties;
-  classNameContainer?: string;
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  children,
-  onSubmit,
-  titleButton,
-  title,
-  styleContainer = {},
-  classNameContainer = "",
-}) => {
-  if (!isOpen) return null;
-
-  return createPortal(
-    <div className="modal-overlay" onMouseDown={onClose}>
-      <div
-        className={`modal-container ${classNameContainer}`}
-        style={styleContainer}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        <div className="modal-header">
-          {title && <h2 className="modal-title">{title}</h2>}
-          <div className="modal-close-button" onClick={onClose}>
-            <Icon classIcon="bi-x-lg" />
-          </div>
-        </div>
-        <div className="modal-content">{children}</div>
-        {onSubmit && (
-          <div className="d-flex justify-content-end">
-            <Button onClick={onSubmit} title={titleButton ?? ""} />
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-};
+import React, { ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
+import "./modal.css";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit?: () => void;
+  titleButton?: string;
+  children: ReactNode;
+  title?: string;
+  styleContainer?: React.CSSProperties;
+  classNameContainer?: string;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+  onSubmit,
+  titleButton,
+  title,
+  styleContainer = {},
+  classNameContainer = "",
+}) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="modal-overlay" onMouseDown={onClose}>
+      <div
+        className={`modal-container ${classNameContainer}`}
+        style={styleContainer}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="modal-header">
+          {title && <h2 className="modal-title">{title}</h2>}
+          <div className="modal-close-button" onClick={onClose}>
+            <Icon classIcon="bi-x-lg" />
+          </div>
+        </div>
+        <div className="modal-content">{children}</div>
+        {onSubmit && (
+          <div className="d-flex justify-content-end">
+            <Button onClick={onSubmit} title={titleButton ?? ""} />
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+};

package/src/modal/Modal.view.tsx

@@ -1,25 +1,25 @@
-import { useCallback, useState } from "react";
-import { Button } from "../button/Button";
-import { Modal } from "./Modal";
-
-export const ModalView = (): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false);
-  const openModal = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen, true]);
-
-  return (
-    <div>
-      <Button onClick={openModal} title="Open Modal" />
-      <Modal
-        onSubmit={() => setIsOpen(false)}
-        title={"test"}
-        titleButton="Submit"
-        onClose={() => setIsOpen(false)}
-        isOpen={isOpen}
-      >
-        test
-      </Modal>
-    </div>
-  );
-};
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { Modal } from "./Modal";
+
+export const ModalView = (): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openModal = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen, true]);
+
+  return (
+    <div>
+      <Button onClick={openModal} title="Open Modal" />
+      <Modal
+        onSubmit={() => setIsOpen(false)}
+        title={"test"}
+        titleButton="Submit"
+        onClose={() => setIsOpen(false)}
+        isOpen={isOpen}
+      >
+        test
+      </Modal>
+    </div>
+  );
+};

package/src/modal/modal.css

@@ -1,65 +1,69 @@
-/* Modal.css */
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-}
-
-.modal-container {
-  background: white;
-  border-radius: 8px;
-  max-width: 500px;
-  width: 90%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  position: relative;
-  animation: fadeIn 0.3s ease;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.modal-title {
-  font-size: 1.25rem;
-  margin: 0;
-}
-
-.modal-close-button {
-  background: transparent;
-  border: none;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-}
-
-.modal-close-button:hover {
-  color: red;
-}
-
-.modal-content {
-  margin-top: 10px;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+/* Modal.css */
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 8px;
+  max-width: 500px;
+  width: 90%;
+  max-height: 90%;
+  display  : flex;
+  overflow : hidden;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  position: relative;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modal-title {
+  font-size: 1.25rem;
+  margin: 0;
+}
+
+.modal-close-button {
+  background: transparent;
+  border: none;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+}
+
+.modal-close-button:hover {
+  color: red;
+}
+
+.modal-content {
+  margin-top: 10px;
+  flex : 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/notFound/NotFound.tsx

@@ -1,3 +1,3 @@
-export const NotFound = (): JSX.Element => {
-  return <h1>404 - Page Not Found</h1>;
-};
+export const NotFound = (): JSX.Element => {
+  return <h1>404 - Page Not Found</h1>;
+};

package/src/overlayPanel/OverlayPanel.tsx

@@ -1,189 +1,189 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import ReactDOM from "react-dom";
-
-import { Icon } from "../icon/Icon";
-import { useOverlayContext } from "./overlay.context";
-import "./overlayPanel.css";
-import { OverlayPanelStyled } from "./overlayPanelStyled/OverlayPanelStyled";
-
-export type PositionOverlay =
-  | "left"
-  | "right"
-  | "topLeft"
-  | "topRight"
-  | "bottomLeft"
-  | "bottomRight";
-
-export type OverlayPanelProps = {
-  referenceElement?: HTMLElement;
-  coordonnees?: { top: number; left: number };
-  position?: PositionOverlay;
-  children: React.ReactNode;
-  show?: boolean;
-  closeOverlay?: (close: boolean) => void;
-};
-
-export const OverlayPanel = forwardRef(
-  (
-    {
-      referenceElement,
-      position,
-      coordonnees,
-      children,
-      show,
-      closeOverlay,
-    }: OverlayPanelProps,
-    ref: React.Ref<{
-      setCoords?: (coords: { top: number; left: number }) => void;
-    }>
-  ) => {
-    const { activeOverlayId, setActiveOverlay } = useOverlayContext();
-    const [isShow, setIsShow] = useState(show || false);
-    const [coords, setCoords] = useState<{ top: number; left: number }>(
-      coordonnees ?? { top: 0, left: 0 }
-    );
-    const boxRef = useRef<HTMLDivElement>(null);
-    const overlayId = useId();
-    useImperativeHandle(ref, () => ({
-      setCoords,
-    }));
-
-    useEffect(() => {
-      if (activeOverlayId !== overlayId) {
-        setIsShow(false);
-      }
-    }, [activeOverlayId, overlayId]);
-
-    useEffect(() => {
-      const updatePosition = () => {
-        if (!position && coordonnees) {
-          setCoords(coordonnees);
-        } else if (referenceElement) {
-          const rect = referenceElement.getBoundingClientRect();
-          const boxRect = boxRef.current?.getBoundingClientRect();
-          const { innerWidth, innerHeight } = window;
-
-          if (boxRect) {
-            // Positions par défaut si définies
-            let top, left;
-            const positions = {
-              topRight: () => ({
-                top: rect.top - boxRect.height,
-                left: rect.right - boxRect.width,
-              }),
-              topLeft: () => ({
-                top: rect.top - boxRect.height,
-                left: rect.left,
-              }),
-              bottomRight: () => ({
-                top: rect.bottom,
-                left: rect.right - boxRect.width,
-              }),
-              bottomLeft: () => ({
-                top: rect.bottom,
-                left: rect.left,
-              }),
-              left: () => ({
-                top: rect.top + rect.height / 2 - boxRect.height / 2,
-                left: rect.left - boxRect.width,
-              }),
-              right: () => ({
-                top: rect.top + rect.height / 2 - boxRect.height / 2,
-                left: rect.right,
-              }),
-            };
-
-            if (position && positions[position]) {
-              // Si une position est définie, on tente de l'appliquer
-              ({ top, left } = positions[position]());
-            } else {
-              // Sinon, on adapte dynamiquement
-              left = rect.right;
-              top = rect.bottom;
-
-              if (rect.right + boxRect.width > innerWidth) {
-                left = rect.left - boxRect.width; // Manque d'espace à droite → afficher à gauche
-              }
-
-              if (rect.bottom + boxRect.height > innerHeight) {
-                top = rect.top - boxRect.height; // Manque d'espace en bas → afficher en haut
-              }
-            }
-
-            setCoords({ top, left: left < 0 ? 0 : left });
-          }
-        }
-      };
-
-      if (isShow) {
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-      }
-
-      return () => window.removeEventListener("resize", updatePosition);
-    }, [referenceElement, isShow, position]);
-
-    const openOverlay = () => {
-      setIsShow(true);
-      setActiveOverlay(overlayId);
-    };
-
-    const closeOverlayHandler = useCallback(
-      (e: any) => {
-        e.stopPropagation();
-        setIsShow(false);
-        setActiveOverlay(null);
-        if (closeOverlay) {
-          closeOverlay(false);
-        }
-      },
-      [closeOverlay, setActiveOverlay]
-    );
-    useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
-          closeOverlayHandler(event);
-        }
-      };
-
-      if (isShow) {
-        document.addEventListener("mousedown", handleClickOutside);
-      }
-
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [isShow, closeOverlayHandler]);
-    useEffect(() => {
-      if (show) {
-        openOverlay();
-      }
-    }, [show]);
-
-    if (!isShow) return null;
-
-    return ReactDOM.createPortal(
-      <OverlayPanelStyled ref={boxRef} $top={coords.top} $left={coords.left}>
-        <div
-          className={`overlayPanel ${
-            coords.top > 0 || coords.left > 0 ? "visible" : "hide"
-          }`}
-        >
-          <button className="toggle-btn" onClick={closeOverlayHandler}>
-            <Icon classIcon="bi-x-lg" />
-          </button>
-          {children}
-        </div>
-      </OverlayPanelStyled>,
-      document.body
-    );
-  }
-);
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import ReactDOM from "react-dom";
+
+import { Icon } from "../icon/Icon";
+import { useOverlayContext } from "./overlay.context";
+import "./overlayPanel.css";
+import { OverlayPanelStyled } from "./overlayPanelStyled/OverlayPanelStyled";
+
+export type PositionOverlay =
+  | "left"
+  | "right"
+  | "topLeft"
+  | "topRight"
+  | "bottomLeft"
+  | "bottomRight";
+
+export type OverlayPanelProps = {
+  referenceElement?: HTMLElement;
+  coordonnees?: { top: number; left: number };
+  position?: PositionOverlay;
+  children: React.ReactNode;
+  show?: boolean;
+  closeOverlay?: (close: boolean) => void;
+};
+
+export const OverlayPanel = forwardRef(
+  (
+    {
+      referenceElement,
+      position,
+      coordonnees,
+      children,
+      show,
+      closeOverlay,
+    }: OverlayPanelProps,
+    ref: React.Ref<{
+      setCoords?: (coords: { top: number; left: number }) => void;
+    }>
+  ) => {
+    const { activeOverlayId, setActiveOverlay } = useOverlayContext();
+    const [isShow, setIsShow] = useState(show || false);
+    const [coords, setCoords] = useState<{ top: number; left: number }>(
+      coordonnees ?? { top: 0, left: 0 }
+    );
+    const boxRef = useRef<HTMLDivElement>(null);
+    const overlayId = useId();
+    useImperativeHandle(ref, () => ({
+      setCoords,
+    }));
+
+    useEffect(() => {
+      if (activeOverlayId !== overlayId) {
+        setIsShow(false);
+      }
+    }, [activeOverlayId, overlayId]);
+
+    useEffect(() => {
+      const updatePosition = () => {
+        if (!position && coordonnees) {
+          setCoords(coordonnees);
+        } else if (referenceElement) {
+          const rect = referenceElement.getBoundingClientRect();
+          const boxRect = boxRef.current?.getBoundingClientRect();
+          const { innerWidth, innerHeight } = window;
+
+          if (boxRect) {
+            // Positions par défaut si définies
+            let top, left;
+            const positions = {
+              topRight: () => ({
+                top: rect.top - boxRect.height,
+                left: rect.right - boxRect.width,
+              }),
+              topLeft: () => ({
+                top: rect.top - boxRect.height,
+                left: rect.left,
+              }),
+              bottomRight: () => ({
+                top: rect.bottom,
+                left: rect.right - boxRect.width,
+              }),
+              bottomLeft: () => ({
+                top: rect.bottom,
+                left: rect.left,
+              }),
+              left: () => ({
+                top: rect.top + rect.height / 2 - boxRect.height / 2,
+                left: rect.left - boxRect.width,
+              }),
+              right: () => ({
+                top: rect.top + rect.height / 2 - boxRect.height / 2,
+                left: rect.right,
+              }),
+            };
+
+            if (position && positions[position]) {
+              // Si une position est définie, on tente de l'appliquer
+              ({ top, left } = positions[position]());
+            } else {
+              // Sinon, on adapte dynamiquement
+              left = rect.right;
+              top = rect.bottom;
+
+              if (rect.right + boxRect.width > innerWidth) {
+                left = rect.left - boxRect.width; // Manque d'espace à droite → afficher à gauche
+              }
+
+              if (rect.bottom + boxRect.height > innerHeight) {
+                top = rect.top - boxRect.height; // Manque d'espace en bas → afficher en haut
+              }
+            }
+
+            setCoords({ top, left: left < 0 ? 0 : left });
+          }
+        }
+      };
+
+      if (isShow) {
+        updatePosition();
+        window.addEventListener("resize", updatePosition);
+      }
+
+      return () => window.removeEventListener("resize", updatePosition);
+    }, [referenceElement, isShow, position]);
+
+    const openOverlay = () => {
+      setIsShow(true);
+      setActiveOverlay(overlayId);
+    };
+
+    const closeOverlayHandler = useCallback(
+      (e: any) => {
+        e.stopPropagation();
+        setIsShow(false);
+        setActiveOverlay(null);
+        if (closeOverlay) {
+          closeOverlay(false);
+        }
+      },
+      [closeOverlay, setActiveOverlay]
+    );
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+          closeOverlayHandler(event);
+        }
+      };
+
+      if (isShow) {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [isShow, closeOverlayHandler]);
+    useEffect(() => {
+      if (show) {
+        openOverlay();
+      }
+    }, [show]);
+
+    if (!isShow) return null;
+
+    return ReactDOM.createPortal(
+      <OverlayPanelStyled ref={boxRef} $top={coords.top} $left={coords.left}>
+        <div
+          className={`overlayPanel ${
+            coords.top > 0 || coords.left > 0 ? "visible" : "hide"
+          }`}
+        >
+          <button className="toggle-btn" onClick={closeOverlayHandler}>
+            <Icon classIcon="bi-x-lg" />
+          </button>
+          {children}
+        </div>
+      </OverlayPanelStyled>,
+      document.body
+    );
+  }
+);