kelt-ui-kit-react 2.1.4 → 2.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "private": false,
   "repository": {
     "type": "git",

package/src/card/Card.tsx

@@ -44,6 +44,11 @@ export const Card = ({
   const onClickCard = useCallback(
     (e: React.MouseEvent, item: CardInterface) => {
       e.stopPropagation();
+      // Clic dans le menu d'actions (rendu en portal) : l'événement remonte
+      // dans l'arbre React mais ne doit pas refermer/repositionner le menu
+      if (!e.currentTarget.contains(e.target as Node)) {
+        return;
+      }
       if (openActions) {
         setPositions(undefined);
         return setOpenActions(false);

package/src/card/cardAction/CardAction.tsx

@@ -89,7 +89,7 @@ export const CardAction = ({
           ),
         };
       }) as MenuInterface[];
-  }, [actions]);
+  }, [actions, item, closeOverlay]);
   return (
     <div className="card-actions">
       <div

package/src/overlayPanel/OverlayPanel.tsx

@@ -35,6 +35,8 @@ export type OverlayPanelProps = {
   closeOverlay?: (close: boolean) => void;
   usePortal?: boolean;
   matchReferenceWidth?: boolean;
+  // sans cadre (padding, fond, ombre) ni croix de fermeture : le contenu porte son propre style
+  bare?: boolean;
 };
 
 export const OverlayPanel = forwardRef(
@@ -50,6 +52,7 @@ export const OverlayPanel = forwardRef(
       closeOverlay,
       usePortal = true,
       matchReferenceWidth = false,
+      bare = false,
     }: OverlayPanelProps,
     ref: React.Ref<{
       setCoords?: (coords: { top: number; left: number }) => void;
@@ -234,19 +237,22 @@ export const OverlayPanel = forwardRef(
         $left={coords.left}
         $minWidth={referenceWidth}
         $visible={isPositioned}
+        $bare={bare}
       >
         <div
           className={`overlayPanel ${className ? className : ""} ${
             coords.top > 0 || coords.left > 0 ? "visible" : "hide"
           }`}
         >
-          <button
-            id={id ?? ""}
-            className="toggle-btn"
-            onClick={closeOverlayHandler}
-          >
-            <Icon classIcon="bi-x-lg" />
-          </button>
+          {!bare && (
+            <button
+              id={id ?? ""}
+              className="toggle-btn"
+              onClick={closeOverlayHandler}
+            >
+              <Icon classIcon="bi-x-lg" />
+            </button>
+          )}
           <div onClick={(e) => e.stopPropagation()}>{children}</div>
         </div>
       </OverlayPanelStyled>

package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx

@@ -5,6 +5,7 @@ interface OverlayPanelStyledProps {
   $left?: number;
   $minWidth?: number;
   $visible?: boolean;
+  $bare?: boolean;
 }
 
 export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
@@ -20,4 +21,14 @@ export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   border-radius: 2px;
   border: 1px solid #ede;
+  ${({ $bare }) =>
+    $bare
+      ? `
+    background-color: transparent;
+    padding: 0;
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+  `
+      : ""}
 `;

package/src/select/Select.tsx

@@ -215,6 +215,7 @@ export const Select = ({
           referenceElement={overlayRef}
           usePortal={usePortal}
           matchReferenceWidth={usePortal}
+          bare
           children={
             <>
               {searchable && (

package/src/select/select.css

@@ -131,8 +131,6 @@
 
 .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%;