kelt-ui-kit-react 0.1.9 → 0.2.1

package/src/overlayPanel/OverlayPanel.tsx

@@ -1,8 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useId, 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";
+
 type Position =
   | "left"
   | "right"
@@ -12,8 +15,8 @@ type Position =
   | "bottomRight";
 
 interface OverlayPanelProps {
-  referenceElement: HTMLElement; // Élément de référence
-  position?: Position; // Position souhaitée par rapport à l'élément
+  referenceElement: HTMLElement;
+  position?: Position;
   children: React.ReactNode;
   show?: boolean;
   closeOverlay?: (close: boolean) => void;
@@ -26,57 +29,44 @@ export const OverlayPanel = ({
   show,
   closeOverlay,
 }: OverlayPanelProps) => {
+  const { activeOverlayId, setActiveOverlay } = useOverlayContext();
   const [isShow, setIsShow] = useState(show || false);
   const [coords, setCoords] = useState({ top: 0, left: 0 });
   const boxRef = useRef<HTMLDivElement>(null);
-  const getCoordTopRight = (rect: DOMRect, boxRect: DOMRect) => {
-    return {
-      top: rect.top - boxRect.height,
-      left: rect.right - boxRect.width,
-    };
-  };
-  const getCoordTopLeft = (rect: DOMRect, boxRect: DOMRect) => {
-    return {
-      top: rect.top - boxRect.height,
-      left: rect.left,
-    };
-  };
-  const getCoordBottomRight = (rect: DOMRect, panelRect: DOMRect) => {
-    return {
-      top: rect.bottom,
-      left: rect.right - panelRect.width,
-    };
-  };
-  const getCoordBottomLeft = (rect: DOMRect) => {
-    return {
-      top: rect.bottom,
-      left: rect.left,
-    };
-  };
-  const getCoordLeft = (rect: DOMRect, boxRect: DOMRect) => {
-    return {
-      top: rect.top + rect.height / 2 - boxRect.height / 2,
-      left: rect.left - boxRect.width,
-    };
-  };
-  const getCoordRight = (rect: DOMRect, boxRect: DOMRect) => {
-    return {
-      top: rect.top + rect.height / 2 - boxRect.height / 2,
-      left: rect.right,
-    };
-  };
+  const overlayId = useId();
+  useEffect(() => {
+    if (activeOverlayId !== overlayId) {
+      setIsShow(false);
+    }
+  }, [activeOverlayId, overlayId]);
+
   useEffect(() => {
     const updatePosition = () => {
       const rect = referenceElement.getBoundingClientRect();
       const boxRect = boxRef.current?.getBoundingClientRect();
       if (boxRect) {
         const coords = {
-          topRight: getCoordTopRight,
-          topLeft: getCoordTopLeft,
-          bottomRight: getCoordBottomRight,
-          bottomLeft: getCoordBottomLeft,
-          left: getCoordLeft,
-          right: getCoordRight,
+          topRight: (r: DOMRect, b: DOMRect) => ({
+            top: r.top - b.height,
+            left: r.right - b.width,
+          }),
+          topLeft: (r: DOMRect, b: DOMRect) => ({
+            top: r.top - b.height,
+            left: r.left,
+          }),
+          bottomRight: (r: DOMRect, b: DOMRect) => ({
+            top: r.bottom,
+            left: r.right - b.width,
+          }),
+          bottomLeft: (r: DOMRect) => ({ top: r.bottom, left: r.left }),
+          left: (r: DOMRect, b: DOMRect) => ({
+            top: r.top + r.height / 2 - b.height / 2,
+            left: r.left - b.width,
+          }),
+          right: (r: DOMRect, b: DOMRect) => ({
+            top: r.top + r.height / 2 - b.height / 2,
+            left: r.right,
+          }),
         };
         const { top, left } = coords[position ?? "topLeft"](rect, boxRect);
         setCoords({ top, left });
@@ -87,18 +77,32 @@ export const OverlayPanel = ({
     window.addEventListener("resize", updatePosition);
     return () => window.removeEventListener("resize", updatePosition);
   }, [referenceElement, position]);
-  const toggleSidebar = useCallback(() => {
+
+  const openOverlay = () => {
+    setIsShow(true);
+    setActiveOverlay(overlayId);
+  };
+
+  const closeOverlayHandler = useCallback(() => {
     setIsShow(false);
+    setActiveOverlay(null);
     if (closeOverlay) {
       closeOverlay(false);
     }
-  }, [isShow]);
+  }, [closeOverlay, setActiveOverlay]);
+
+  useEffect(() => {
+    if (show) {
+      openOverlay();
+    }
+  }, [show]);
 
   if (!isShow) return null;
+
   return ReactDOM.createPortal(
     <OverlayPanelStyled ref={boxRef} $top={coords.top} $left={coords.left}>
       <div className="overlayPanel">
-        <button className="toggle-btn" onClick={toggleSidebar}>
+        <button className="toggle-btn" onClick={closeOverlayHandler}>
           <Icon classIcon="bi-x-lg" />
         </button>
         {children}

package/src/overlayPanel/OverlayPanel.view.tsx

@@ -1,16 +1,17 @@
 import { useRef, useState } from "react";
-import { OverlayPanel } from "./OverlayPanel";
 import { Icon } from "../icon/Icon";
+import { OverlayPanel } from "./OverlayPanel";
 
 export const OverlayPanelView = () => {
   const refButton = useRef<HTMLDivElement>(null);
   const [openOverlay, setOpenOverlay] = useState(false);
+
   return (
     <>
       <div ref={refButton} onClick={() => setOpenOverlay(!openOverlay)}>
         <Icon classIcon="bi-list" />
       </div>
-      {openOverlay && refButton.current && (
+      {refButton.current && (
         <OverlayPanel
           position="bottomRight"
           show={openOverlay}

package/src/overlayPanel/overlay.context.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface OverlayContextType {
+  activeOverlayId: string | null;
+  setActiveOverlay: (id: string | null) => void;
+}
+
+const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
+
+export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [activeOverlayId, setActiveOverlay] = useState<string | null>(null);
+
+  return (
+    <OverlayContext.Provider value={{ activeOverlayId, setActiveOverlay }}>
+      {children}
+    </OverlayContext.Provider>
+  );
+};
+
+export const useOverlayContext = () => {
+  const context = useContext(OverlayContext);
+  if (!context) {
+    throw new Error("useOverlayContext must be used within an OverlayProvider");
+  }
+  return context;
+};

package/src/quantity/Quantity.tsx

@@ -29,6 +29,9 @@ export const Quantity = ({ setQuantity, item }: QuantityProps) => {
   const decrementQte = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       e.stopPropagation();
+      if (qte === 0) {
+        return qte;
+      }
       changeQuantity(qte - 1);
     },
     [changeQuantity, qte]

package/src/quantity/quantity.css

@@ -1,9 +1,14 @@
 .qte {
   display: flex;
   align-items: center;
+  .qte-label {
+    width: 20px;
+    text-align: center;
+  }
   .qte-action {
     cursor: pointer;
     margin-right: 1.5rem;
+
     &.qte-action--plus {
       margin-left: 0.5rem;
     }

package/src/sidebar/Sidebar.tsx

@@ -3,13 +3,15 @@ import ReactDOM from "react-dom";
 import { Icon } from "../icon/Icon";
 import "./sidebar.css";
 
-interface SidebarProps {
+export interface SidebarProps {
   id?: string;
   open?: boolean;
   title?: string;
   children?: React.ReactNode;
   className?: string;
   width?: string;
+  displayOverlay?: boolean;
+  closeOnClickOutside?: boolean;
   onClose?: (close: boolean) => void;
 }
 
@@ -21,6 +23,8 @@ export const Sidebar = ({
   className,
   id,
   width,
+  closeOnClickOutside = true,
+  displayOverlay = true,
 }: SidebarProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(open || false);
   const sidebarRef = useRef<HTMLDivElement | null>(null);
@@ -57,6 +61,7 @@ export const Sidebar = ({
 
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
+      if (!closeOnClickOutside) return;
       if (
         sidebarRef.current &&
         !sidebarRef.current.contains(event.target as Node)
@@ -80,7 +85,7 @@ export const Sidebar = ({
 
   return ReactDOM.createPortal(
     <>
-      {isOpen && <div className="overlay"></div>}
+      {isOpen && displayOverlay && <div className="overlay"></div>}
       <div
         ref={sidebarRef}
         style={width ? { width: width } : {}}

package/src/sidebarData/SidebarData.tsx

@@ -1,33 +1,17 @@
-import { Sidebar } from "../sidebar/Sidebar";
+import { Sidebar, SidebarProps } from "../sidebar/Sidebar";
 import "./sidebarData.css";
 
-interface SidebarDataProps {
-  open?: boolean;
-  title?: string;
-  width?: string;
-  className?: string;
+interface SidebarDataProps extends SidebarProps {
   children?: React.ReactNode;
-  onClose?: (close: boolean) => void;
 }
 
-export const SidebarData = ({
-  open,
-  children,
-  title,
-  onClose,
-  width,
-  className,
-}: SidebarDataProps) => {
+export const SidebarData = (props: SidebarDataProps) => {
   return (
     <>
-      <Sidebar
-        onClose={onClose}
-        title={title}
-        open={open}
-        width={width}
-        className={`full sidebar-data ${className}`}
-      >
-        {children && <div className="sidebar-data-content">{children}</div>}
+      <Sidebar {...props} className={`full sidebar-data ${props.className}`}>
+        {props.children && (
+          <div className="sidebar-data-content">{props.children}</div>
+        )}
       </Sidebar>
     </>
   );