[FIX]: Solve issue when multiple dropzones are in the same page. Specify a...

[FIX]: Solve issue when multiple dropzones are in the same page. Specify a unique id for each dropzone drop layer and styles related to border and bg color

src/files-ui/components/drop-layer/hooks/useDropLayerClassName.ts

 import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
 import * as React from "react";
-import { dropLayerDynamicStyle } from "../utils/dropLayerDynamicStyle";
+import { makeDropLayerDynamicStyle } from "../utils/dropLayerDynamicStyle";
+
+const BASE_DROP_LAYER_STYLE: string = "files-ui-styles-drop-layer";
+
 
-const DROP_LAYER_STYLE_ID: string = "files-ui-styles-drop-layer";
 /**
  * 
  * @param color 
@@ -11,26 +13,48 @@ const DROP_LAYER_STYLE_ID: string = "files-ui-styles-drop-layer";
  * @returns the classname for layer
  */
 const useDropLayerClassName = (
+    dropzoneId: string,
     color?: string,
-    isDragging?: boolean,
+    //isDragging?: boolean,
     makeClassName?: boolean
 ): string => {
     const [idStyles, setIdStyles] = React.useState<string>("");
     const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
     const [classNameCreated, setClassNameCreated] = React.useState<string>("");
 
+    const finalDropzoneId: string = (color === undefined) ? "default" : dropzoneId.replaceAll(":", "_");
+
+
     React.useEffect(() => {
         //console.log("useDropLayerClassName", color, isDragging, makeClassName);
 
         const handleInserStyle = (
-            color: string,
-            isDragging?: boolean
+            color?: string,
+            //isDragging?: boolean
         ) => {
             let finalClassName: string = "";
-            let styleSheet: DynamicSheet = dropLayerDynamicStyle(DROP_LAYER_STYLE_ID, color, isDragging);
+            let styleSheet: DynamicSheet = makeDropLayerDynamicStyle(finalDropzoneId, color
+                //isDragging
+            );
             let idStyle: string = "";
 
-            if (!styleInjected) {
+            console.log("useDropLayerClassName handleInserStyle", color, styleSheet);
+
+
+            if (finalDropzoneId === "default" && !styleInjected) {
+                //check if already inserted
+                if (DynamiCSS.existStyleSheet(finalDropzoneId)) {
+                    setStyleInjected(true);
+                    setIdStyles(idStyle);
+
+                } else {
+                    idStyle = DynamiCSS.insertStyleSheet(styleSheet);
+                    setIdStyles(idStyle);
+                    if (idStyle !== "") {
+                        setStyleInjected(true);
+                    }
+                }
+            } else if (!styleInjected) {
                 idStyle = DynamiCSS.insertStyleSheet(styleSheet);
                 setIdStyles(idStyle);
                 if (idStyle !== "") {
@@ -40,22 +64,26 @@ const useDropLayerClassName = (
                 //already a stylesheet associated
                 DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
             }
-            finalClassName += `dropzone-ui-layer`;
+            finalClassName += `dropzone-layer-${finalDropzoneId}`;
 
-            if (isDragging) {
-                finalClassName += ` dui-layer-drag`;
-            }
+            /*  if (isDragging) {
+                 finalClassName += ` dropzone-layer-drag`;
+             } */
             setClassNameCreated(finalClassName);
         };
 
         //console.log("=>", isDragging);
 
         if (makeClassName) {
-            handleInserStyle(color as string, isDragging);
+            handleInserStyle(color,
+                //  isDragging
+            );
         }
 
         // eslint-disable-next-line
-    }, [color, isDragging, makeClassName]);
+    }, [color,
+        // isDragging,
+        makeClassName]);
 
     return classNameCreated;
 }

src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts

 import { completeAsureColor } from "../../../core";
 import { DEFAULT_BORDER_RADIUS } from "../../dropzone/components/dropzone/DropzoneProps";
 
-export const dropLayerDynamicStyle = (styleId: string, color: string | undefined, isDragging: boolean | undefined) => {
-
+export const makeDropLayerDynamicStyle = (
+    dropzoneId: string,
+    color: string | undefined,
+) => {
     return {
-        id: "files-ui-styles-drop-layer",
+        id: "files-ui-drop-layer-style-id-" + dropzoneId,
         sheetRules: [
             {
-                className: `dropzone-ui-layer`,
+                className: `dropzone-layer-${dropzoneId}`,
                 rules: {
-
-                    backgroundColor:
-                        completeAsureColor(color, 0.4),
+                    backgroundColor: completeAsureColor(color, 0.4),
                     borderRadius: DEFAULT_BORDER_RADIUS,
                     position: "absolute",
                     left: 0,
                     top: 0,
                     width: "0%",
                     height: "0%",
-                    border: isDragging ? `2px dashed ${completeAsureColor(color, 1)}` : undefined,
                     zIndex: 20,
-
+                    border: `0px dashed ${completeAsureColor(color)}`
                 },
             },
             {
-                className: `dui-layer-drag`,
+                className: `dropzone-layer-drag`,
                 rules: {
                     width: "100%",
                     height: "100%",
+                    borderWidth:"2px"
                 },
             }
         ],