kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/card/card.css

@@ -1,144 +1,144 @@
-.card {
-  border: 1px solid #cfbdbd;
-  border-radius: 10px;
-  padding: 1rem;
-  max-width: 200px;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  flex-wrap: wrap;
-
-  .card-overlay {
-    display: none;
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.1);
-    width: 100%;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    pointer-events: none;
-  }
-  .bi-three-dots-vertical {
-    display: none;
-  }
-  .card-custom-action {
-    display: flex;
-    flex: 1;
-    justify-content: start;
-    align-items: center;
-  }
-
-  .bi-trash3 {
-    font-size: 1rem;
-  }
-  .card-text {
-    width: 100%;
-  }
-  .card-footer {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &.card--horizontal {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    min-height: 56px;
-    max-width: initial;
-    .card-img {
-      margin-right: 0.5rem;
-    }
-
-    .card-content {
-      flex: 1;
-      min-width: 200px;
-    }
-
-    .card-title {
-      width: calc(100% - 20px);
-      margin-bottom: 1rem;
-    }
-    .card-action {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-    }
-    .card-prix {
-      flex: 1;
-      display: flex;
-      justify-content: flex-end;
-    }  }
-
-  &:not(.card--horizontal) {
-    .card-title {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .card-img {
-    width: 30px;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  .card-title {
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  .card-content {
-    font-size: 16px;
-    font-weight: 400;
-    display: none;
-  }
-}
-@container app-container (min-width: 992px) {
-  .card {
-    .card-custom-action {
-      justify-content: end;
-    }
-    .bi-three-dots-vertical {
-      display: block;
-    }
-    .bi-three-dots {
-      display: none;
-    }
-    &.card--horizontal {
-      .card-actions {
-        margin-left: 0.5rem;
-      }
-      .card-footer {
-        display: flex;
-        flex: 1;
-        justify-content: space-between;
-      }
-      .card-text {
-        width: 300px;
-        display: flex;
-        align-items: center;
-      }
-      .card-content {
-        display: flex;
-      }
-      .card-title {
-        min-width: auto;
-        width: auto;
-        margin-right: 1rem;
-        margin-bottom: 0;
-      }
-      .card-prix {
-        flex: inherit;
-        min-width: auto;
-      }
-      .card-action {
-        position: relative;
-        right: initial;
-        top: initial;
-      }
-    }
-  }
-}
+.card {
+  border: 1px solid #cfbdbd;
+  border-radius: 10px;
+  padding: 1rem;
+  max-width: 200px;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  flex-wrap: wrap;
+
+  .card-overlay {
+    display: none;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.1);
+    width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+  .bi-three-dots-vertical {
+    display: none;
+  }
+  .card-custom-action {
+    display: flex;
+    flex: 1;
+    justify-content: start;
+    align-items: center;
+  }
+
+  .bi-trash3 {
+    font-size: 1rem;
+  }
+  .card-text {
+    width: 100%;
+  }
+  .card-footer {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &.card--horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 56px;
+    max-width: initial;
+    .card-img {
+      margin-right: 0.5rem;
+    }
+
+    .card-content {
+      flex: 1;
+      min-width: 200px;
+    }
+
+    .card-title {
+      width: calc(100% - 20px);
+      margin-bottom: 1rem;
+    }
+    .card-action {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+    .card-prix {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+    }  }
+
+  &:not(.card--horizontal) {
+    .card-title {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .card-img {
+    width: 30px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .card-title {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .card-content {
+    font-size: 16px;
+    font-weight: 400;
+    display: none;
+  }
+}
+@container app-container (min-width: 992px) {
+  .card {
+    .card-custom-action {
+      justify-content: end;
+    }
+    .bi-three-dots-vertical {
+      display: block;
+    }
+    .bi-three-dots {
+      display: none;
+    }
+    &.card--horizontal {
+      .card-actions {
+        margin-left: 0.5rem;
+      }
+      .card-footer {
+        display: flex;
+        flex: 1;
+        justify-content: space-between;
+      }
+      .card-text {
+        width: 300px;
+        display: flex;
+        align-items: center;
+      }
+      .card-content {
+        display: flex;
+      }
+      .card-title {
+        min-width: auto;
+        width: auto;
+        margin-right: 1rem;
+        margin-bottom: 0;
+      }
+      .card-prix {
+        flex: inherit;
+        min-width: auto;
+      }
+      .card-action {
+        position: relative;
+        right: initial;
+        top: initial;
+      }
+    }
+  }
+}

package/src/card/card.interface.tsx

@@ -1,9 +1,9 @@
-export interface CardInterface {
-  id?: number | string;
-  uuid?: string;
-  title: string | JSX.Element;
-  description?: string | JSX.Element;
-  image?: string;
-  prix?: string | JSX.Element;
-  quantity?: number;
-}
+export interface CardInterface {
+  id?: number | string;
+  uuid?: string;
+  title: string | JSX.Element;
+  description?: string | JSX.Element;
+  image?: string;
+  prix?: string | JSX.Element;
+  quantity?: number;
+}

package/src/card/cardAction/CardAction.tsx

@@ -1,135 +1,135 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "../../button/Button";
-import { Icon } from "../../icon/Icon";
-import { IconSizeEnum } from "../../icon/iconSize.enum";
-import { MenuInterface } from "../../menus/menu/menu.interface";
-import { Menus } from "../../menus/Menus";
-import { OverlayPanel } from "../../overlayPanel/OverlayPanel";
-import { CardInterface } from "../card.interface";
-import { CardActionInterface } from "../cardAction.interface";
-import "./cardAction.css";
-export type PositionOverlay =
-  | "left"
-  | "right"
-  | "topLeft"
-  | "topRight"
-  | "bottomLeft"
-  | "bottomRight";
-export type CardActionProps = {
-  actions: CardActionInterface[];
-  item?: CardInterface;
-  openActions?: boolean;
-  positions?: { top: number; left: number };
-  positionOverlay?: PositionOverlay;
-  setOpenActions?: (open: boolean) => void;
-};
-
-export const CardAction = ({
-  actions,
-  openActions,
-  item,
-  positions,
-  positionOverlay,
-  setOpenActions,
-}: CardActionProps) => {
-  const overlaypanelRef = useRef<{
-    setCoords?: (coords: { top: number; left: number }) => void;
-  }>(null);
-  const [position, setPosition] = useState<PositionOverlay | undefined>(
-    positionOverlay
-  );
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(openActions ?? false);
-  useEffect(() => {
-    if (openActions) {
-      setOpenOverlay(openActions);
-    }
-  }, [openActions]);
-
-  const handleChangeOverlay = useCallback(
-    (e: any, openOverlay: boolean) => {
-      if (actions.length === 0) return;
-      e.preventDefault();
-      setPosition("bottomRight");
-
-      if (setOpenActions) {
-        setOpenActions(openOverlay);
-      }
-    },
-    [setPosition, setOpenActions]
-  );
-
-  const closeOverlay = useCallback(() => {
-    setPosition(undefined);
-    setOpenOverlay(false);
-    if (setOpenActions) {
-      setOpenActions(false);
-    }
-  }, [setOpenOverlay, setPosition, setOpenActions]);
-
-  const overlayMenu: MenuInterface[] = useMemo(() => {
-    return actions
-      ?.filter((a) => a.type === "menu")
-      .map((a, index) => {
-        let label = a.label || "";
-        if (a.setLabel && item) {
-          label = a.setLabel(item);
-        }
-        return {
-          id: index,
-          icon: a.icon,
-          name: a.label,
-          children: (
-            <Button
-              classIcon={a.icon}
-              key={index}
-              disabled={item && a.disabled ? a.disabled(item) : false}
-              sizeIcon={IconSizeEnum.LARGE}
-              onClick={(e) => {
-                e.stopPropagation();
-                closeOverlay();
-                a.onClick && item && a.onClick(item);
-              }}
-              title={label}
-            />
-          ),
-        };
-      }) as MenuInterface[];
-  }, [actions]);
-  return (
-    <div className="card-actions">
-      <div
-        ref={refButton}
-        className={`card-action ${
-          actions.filter((a) => a.type === "menu").length ? "visible" : "hidden"
-        }`}
-        onClick={(e) => handleChangeOverlay(e, !openOverlay)}
-      >
-        <Icon
-          size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-three-dots-vertical cursor-pointer"}
-        />
-        <Icon
-          size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-three-dots cursor-pointer"}
-        />
-      </div>
-
-      {openOverlay && refButton.current && (
-        <OverlayPanel
-          position={position}
-          show={openOverlay}
-          ref={overlaypanelRef}
-          closeOverlay={closeOverlay}
-          coordonnees={positions}
-          referenceElement={refButton.current}
-          children={
-            <div>
-              <Menus className="card-action-menu" items={overlayMenu} />
-            </div>
-          }
-        />
-      )}
-    </div>
-  );
-};
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../../button/Button";
+import { Icon } from "../../icon/Icon";
+import { IconSizeEnum } from "../../icon/iconSize.enum";
+import { MenuInterface } from "../../menus/menu/menu.interface";
+import { Menus } from "../../menus/Menus";
+import { OverlayPanel } from "../../overlayPanel/OverlayPanel";
+import { CardInterface } from "../card.interface";
+import { CardActionInterface } from "../cardAction.interface";
+import "./cardAction.css";
+export type PositionOverlay =
+  | "left"
+  | "right"
+  | "topLeft"
+  | "topRight"
+  | "bottomLeft"
+  | "bottomRight";
+export type CardActionProps = {
+  actions: CardActionInterface[];
+  item?: CardInterface;
+  openActions?: boolean;
+  positions?: { top: number; left: number };
+  positionOverlay?: PositionOverlay;
+  setOpenActions?: (open: boolean) => void;
+};
+
+export const CardAction = ({
+  actions,
+  openActions,
+  item,
+  positions,
+  positionOverlay,
+  setOpenActions,
+}: CardActionProps) => {
+  const overlaypanelRef = useRef<{
+    setCoords?: (coords: { top: number; left: number }) => void;
+  }>(null);
+  const [position, setPosition] = useState<PositionOverlay | undefined>(
+    positionOverlay
+  );
+  const refButton = useRef<HTMLDivElement>(null);
+  const [openOverlay, setOpenOverlay] = useState(openActions ?? false);
+  useEffect(() => {
+    if (openActions) {
+      setOpenOverlay(openActions);
+    }
+  }, [openActions]);
+
+  const handleChangeOverlay = useCallback(
+    (e: any, openOverlay: boolean) => {
+      if (actions.length === 0) return;
+      e.preventDefault();
+      setPosition("bottomRight");
+
+      if (setOpenActions) {
+        setOpenActions(openOverlay);
+      }
+    },
+    [setPosition, setOpenActions]
+  );
+
+  const closeOverlay = useCallback(() => {
+    setPosition(undefined);
+    setOpenOverlay(false);
+    if (setOpenActions) {
+      setOpenActions(false);
+    }
+  }, [setOpenOverlay, setPosition, setOpenActions]);
+
+  const overlayMenu: MenuInterface[] = useMemo(() => {
+    return actions
+      ?.filter((a) => a.type === "menu")
+      .map((a, index) => {
+        let label = a.label || "";
+        if (a.setLabel && item) {
+          label = a.setLabel(item);
+        }
+        return {
+          id: index,
+          icon: a.icon,
+          name: a.label,
+          children: (
+            <Button
+              classIcon={a.icon}
+              key={index}
+              disabled={item && a.disabled ? a.disabled(item) : false}
+              sizeIcon={IconSizeEnum.LARGE}
+              onClick={(e) => {
+                e.stopPropagation();
+                closeOverlay();
+                a.onClick && item && a.onClick(item);
+              }}
+              title={label}
+            />
+          ),
+        };
+      }) as MenuInterface[];
+  }, [actions]);
+  return (
+    <div className="card-actions">
+      <div
+        ref={refButton}
+        className={`card-action ${
+          actions.filter((a) => a.type === "menu").length ? "visible" : "hidden"
+        }`}
+        onClick={(e) => handleChangeOverlay(e, !openOverlay)}
+      >
+        <Icon
+          size={IconSizeEnum.MEDIUM}
+          classIcon={"bi-three-dots-vertical cursor-pointer"}
+        />
+        <Icon
+          size={IconSizeEnum.MEDIUM}
+          classIcon={"bi-three-dots cursor-pointer"}
+        />
+      </div>
+
+      {openOverlay && refButton.current && (
+        <OverlayPanel
+          position={position}
+          show={openOverlay}
+          ref={overlaypanelRef}
+          closeOverlay={closeOverlay}
+          coordonnees={positions}
+          referenceElement={refButton.current}
+          children={
+            <div>
+              <Menus className="card-action-menu" items={overlayMenu} />
+            </div>
+          }
+        />
+      )}
+    </div>
+  );
+};

package/src/card/cardAction/cardAction.css

@@ -1,10 +1,10 @@
-.card-action-menu {
-  min-width: 150px;
-  max-width: 300px;
-  padding: 0.25rem;
-
-  button {
-    font-size: 0.85rem;
-    padding: 1rem 0rem !important;
-  }
-}
+.card-action-menu {
+  min-width: 150px;
+  max-width: 300px;
+  padding: 0.25rem;
+
+  button {
+    font-size: 0.85rem;
+    padding: 1rem 0rem !important;
+  }
+}

package/src/card/cardAction.interface.tsx

@@ -1,10 +1,10 @@
-import { CardInterface } from "./card.interface";
-
-export interface CardActionInterface {
-  icon: string;
-  label?: string;
-  disabled?: (item: CardInterface) => boolean;
-  onClick: (item: CardInterface) => void;
-  setLabel?: (item: CardInterface) => string;
-  type?: "menu" | "link";
-}
+import { CardInterface } from "./card.interface";
+
+export interface CardActionInterface {
+  icon: string;
+  label?: string;
+  disabled?: (item: CardInterface) => boolean;
+  onClick: (item: CardInterface) => void;
+  setLabel?: (item: CardInterface) => string;
+  type?: "menu" | "link";
+}

package/src/card/hook/useCardInteractions.tsx

@@ -1,30 +1,30 @@
-import { useEffect, useRef, useState } from "react";
-
-// Hook personnalisé pour détecter les clics en dehors et le survol
-export const useCardInteractions = (callback: () => void) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        callback();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [callback]);
-
-  const mouseHandlers = {
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => {
-      setIsHovered(false);
-      callback(); // Déclenche le callback quand la souris quitte la carte
-    },
-  };
-
-  return { ref, isHovered, mouseHandlers };
-};
+import { useEffect, useRef, useState } from "react";
+
+// Hook personnalisé pour détecter les clics en dehors et le survol
+export const useCardInteractions = (callback: () => void) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [callback]);
+
+  const mouseHandlers = {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => {
+      setIsHovered(false);
+      callback(); // Déclenche le callback quand la souris quitte la carte
+    },
+  };
+
+  return { ref, isHovered, mouseHandlers };
+};