kelt-ui-kit-react 1.9.2 → 1.9.3

package/dist/overlayPanel/OverlayPanel.d.ts

@@ -9,6 +9,7 @@ export type OverlayPanelProps = {
     };
     position?: PositionOverlay;
     children: React.ReactNode;
+    className?: string;
     show?: boolean;
     id?: string;
     closeOverlay?: (close: boolean) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/header/Header.tsx

@@ -11,6 +11,7 @@ export const Header = ({
   onClickMenu,
   userChildren,
   positionFixed,
+  overlayClassName,
   onClickLogo,
   showBackNavigation,
   onClickBackNavigation,
@@ -49,6 +50,7 @@ export const Header = ({
         </div>
         {openOverlay && refButton.current && (
           <OverlayPanel
+            className={overlayClassName}
             position="bottomRight"
             show={openOverlay}
             closeOverlay={setOpenOverlay}

package/src/header/header.interface.tsx

@@ -5,6 +5,7 @@ export interface HeaderInterface {
   onClickMenu?: () => void;
   userChildren?: React.ReactNode;
   onClickLogo?: () => void;
+  overlayClassName?: string;
   showBackNavigation?: boolean;
   onClickBackNavigation?: () => void;
 }

package/src/overlayPanel/OverlayPanel.tsx

@@ -27,6 +27,7 @@ export type OverlayPanelProps = {
   coordonnees?: { top: number; left: number };
   position?: PositionOverlay;
   children: React.ReactNode;
+  className?: string;
   show?: boolean;
   id?: string;
   closeOverlay?: (close: boolean) => void;
@@ -38,6 +39,7 @@ export const OverlayPanel = forwardRef(
       referenceElement,
       position,
       coordonnees,
+      className,
       children,
       show,
       id,
@@ -45,12 +47,12 @@ export const OverlayPanel = forwardRef(
     }: 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 }
+      coordonnees ?? { top: 0, left: 0 },
     );
     const boxRef = useRef<HTMLDivElement>(null);
     const overlayId = useId();
@@ -147,7 +149,7 @@ export const OverlayPanel = forwardRef(
           closeOverlay(false);
         }
       },
-      [closeOverlay, setActiveOverlay]
+      [closeOverlay, setActiveOverlay],
     );
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {
@@ -173,7 +175,12 @@ export const OverlayPanel = forwardRef(
     if (!isShow) return null;
 
     return ReactDOM.createPortal(
-      <OverlayPanelStyled ref={boxRef} $top={coords.top} $left={coords.left}>
+      <OverlayPanelStyled
+        className={className}
+        ref={boxRef}
+        $top={coords.top}
+        $left={coords.left}
+      >
         <div
           className={`overlayPanel ${
             coords.top > 0 || coords.left > 0 ? "visible" : "hide"
@@ -189,7 +196,7 @@ export const OverlayPanel = forwardRef(
           {children}
         </div>
       </OverlayPanelStyled>,
-      document.body
+      document.body,
     );
-  }
+  },
 );

package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx

@@ -13,6 +13,6 @@ export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
   background-color: white;
   padding: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
+  border-radius: 4px;
   border: 1px solid #ede;
 `;