@fctc/sme-widget-ui 1.9.0 → 1.9.1

package/dist/index.js

@@ -16516,7 +16516,13 @@ var VideoPlayer = ({ src }) => {
 
 // src/widgets/common/render-files.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage }) => {
+var ImageItem = ({
+  filename,
+  checksum,
+  index: index4,
+  src = null,
+  useGetImage
+}) => {
   const { data: image } = useGetImage({
     data: { filename, checksum },
     queryKey: [`get-image-${""}`],
@@ -16527,7 +16533,7 @@ var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage })
     {
       src: image || src,
       alt: filename,
-      className: "w-32 h-32 object-cover rounded-md"
+      className: "w-32 h-32 object-cover rounded-md cursor-pointer"
     }
   ) }, index4);
 };
@@ -16567,22 +16573,35 @@ var FileItem = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
-      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit group/file",
+      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit",
       children: [
         renderFile(),
         handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "div",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)"
+            },
             onClick: () => handleRemoveFile(index4),
-            className: "cursor-pointer absolute right-0 top-0 p-2 hidden group-hover/file:block bg-[rgba(0,0,0,0.2)]",
+            className: "cursor-pointer p-2 hidden group-hover:block",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DeleteIcon, {})
           }
         ),
         !handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "span",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)",
+              zIndex: 10
+            },
             onClick: (e3) => handleFileDownload(e3, src, filename),
-            className: "absolute top-0 right-0 z-10 hidden group-hover/file:block cursor-pointer p-2 text-white bg-[rgba(0,0,0,0.2)]",
+            className: "hidden group-hover:block cursor-pointer p-2 text-white ",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DownloadIcon, {})
           }
         )
@@ -16611,7 +16630,11 @@ var downloadFile = async (url, filename) => {
     console.error("File download failed:", error2);
   }
 };
-var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
+var RenderFiles = ({
+  selectedFiles,
+  setSelectedFiles,
+  useGetImage
+}) => {
   const handleRemoveFile = (index4) => {
     if (setSelectedFiles) {
       const files = selectedFiles.filter((_2, i3) => i3 !== index4);
@@ -16635,7 +16658,7 @@ var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
         useGetImage
       },
       index4
-    ) });
+    ) }, file?.id ?? index4);
   }) });
 };
 

package/dist/index.mjs

@@ -16394,7 +16394,13 @@ var VideoPlayer = ({ src }) => {
 
 // src/widgets/common/render-files.tsx
 import { jsx as jsx68, jsxs as jsxs43 } from "react/jsx-runtime";
-var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage }) => {
+var ImageItem = ({
+  filename,
+  checksum,
+  index: index4,
+  src = null,
+  useGetImage
+}) => {
   const { data: image } = useGetImage({
     data: { filename, checksum },
     queryKey: [`get-image-${""}`],
@@ -16405,7 +16411,7 @@ var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage })
     {
       src: image || src,
       alt: filename,
-      className: "w-32 h-32 object-cover rounded-md"
+      className: "w-32 h-32 object-cover rounded-md cursor-pointer"
     }
   ) }, index4);
 };
@@ -16445,22 +16451,35 @@ var FileItem = (props) => {
   return /* @__PURE__ */ jsxs43(
     "div",
     {
-      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit group/file",
+      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit",
       children: [
         renderFile(),
         handleRemoveFile && /* @__PURE__ */ jsx68(
           "div",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)"
+            },
             onClick: () => handleRemoveFile(index4),
-            className: "cursor-pointer absolute right-0 top-0 p-2 hidden group-hover/file:block bg-[rgba(0,0,0,0.2)]",
+            className: "cursor-pointer p-2 hidden group-hover:block",
             children: /* @__PURE__ */ jsx68(DeleteIcon, {})
           }
         ),
         !handleRemoveFile && /* @__PURE__ */ jsx68(
           "span",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)",
+              zIndex: 10
+            },
             onClick: (e3) => handleFileDownload(e3, src, filename),
-            className: "absolute top-0 right-0 z-10 hidden group-hover/file:block cursor-pointer p-2 text-white bg-[rgba(0,0,0,0.2)]",
+            className: "hidden group-hover:block cursor-pointer p-2 text-white ",
             children: /* @__PURE__ */ jsx68(DownloadIcon, {})
           }
         )
@@ -16489,7 +16508,11 @@ var downloadFile = async (url, filename) => {
     console.error("File download failed:", error2);
   }
 };
-var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
+var RenderFiles = ({
+  selectedFiles,
+  setSelectedFiles,
+  useGetImage
+}) => {
   const handleRemoveFile = (index4) => {
     if (setSelectedFiles) {
       const files = selectedFiles.filter((_2, i3) => i3 !== index4);
@@ -16513,7 +16536,7 @@ var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
         useGetImage
       },
       index4
-    ) });
+    ) }, file?.id ?? index4);
   }) });
 };
 

package/dist/widgets.d.mts

@@ -495,7 +495,7 @@ declare const LayerLoading: () => JSX.Element;
 
 declare const LoadingSmall: () => JSX.Element;
 
-declare const RenderFiles: ({ selectedFiles, setSelectedFiles, useGetImage }: any) => JSX.Element;
+declare const RenderFiles: ({ selectedFiles, setSelectedFiles, useGetImage, }: any) => JSX.Element;
 
 declare const ButtonSelectFiles: ({ fileInputRef, selectedFiles, setSelectedFiles, setUploadError, model, id, widget, useUploadImage, useUploadFile, env, service, user, }: any) => JSX.Element;
 

package/dist/widgets.d.ts

@@ -495,7 +495,7 @@ declare const LayerLoading: () => JSX.Element;
 
 declare const LoadingSmall: () => JSX.Element;
 
-declare const RenderFiles: ({ selectedFiles, setSelectedFiles, useGetImage }: any) => JSX.Element;
+declare const RenderFiles: ({ selectedFiles, setSelectedFiles, useGetImage, }: any) => JSX.Element;
 
 declare const ButtonSelectFiles: ({ fileInputRef, selectedFiles, setSelectedFiles, setUploadError, model, id, widget, useUploadImage, useUploadFile, env, service, user, }: any) => JSX.Element;
 

package/dist/widgets.js

@@ -15922,7 +15922,13 @@ var VideoPlayer = ({ src }) => {
 
 // src/widgets/common/render-files.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage }) => {
+var ImageItem = ({
+  filename,
+  checksum,
+  index: index4,
+  src = null,
+  useGetImage
+}) => {
   const { data: image } = useGetImage({
     data: { filename, checksum },
     queryKey: [`get-image-${""}`],
@@ -15933,7 +15939,7 @@ var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage })
     {
       src: image || src,
       alt: filename,
-      className: "w-32 h-32 object-cover rounded-md"
+      className: "w-32 h-32 object-cover rounded-md cursor-pointer"
     }
   ) }, index4);
 };
@@ -15973,22 +15979,35 @@ var FileItem = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
-      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit group/file",
+      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit",
       children: [
         renderFile(),
         handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "div",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)"
+            },
             onClick: () => handleRemoveFile(index4),
-            className: "cursor-pointer absolute right-0 top-0 p-2 hidden group-hover/file:block bg-[rgba(0,0,0,0.2)]",
+            className: "cursor-pointer p-2 hidden group-hover:block",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DeleteIcon, {})
           }
         ),
         !handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "span",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)",
+              zIndex: 10
+            },
             onClick: (e3) => handleFileDownload(e3, src, filename),
-            className: "absolute top-0 right-0 z-10 hidden group-hover/file:block cursor-pointer p-2 text-white bg-[rgba(0,0,0,0.2)]",
+            className: "hidden group-hover:block cursor-pointer p-2 text-white ",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DownloadIcon, {})
           }
         )
@@ -16017,7 +16036,11 @@ var downloadFile = async (url, filename) => {
     console.error("File download failed:", error2);
   }
 };
-var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
+var RenderFiles = ({
+  selectedFiles,
+  setSelectedFiles,
+  useGetImage
+}) => {
   const handleRemoveFile = (index4) => {
     if (setSelectedFiles) {
       const files = selectedFiles.filter((_2, i3) => i3 !== index4);
@@ -16041,7 +16064,7 @@ var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
         useGetImage
       },
       index4
-    ) });
+    ) }, file?.id ?? index4);
   }) });
 };
 

package/dist/widgets.mjs

@@ -15859,7 +15859,13 @@ var VideoPlayer = ({ src }) => {
 
 // src/widgets/common/render-files.tsx
 import { jsx as jsx68, jsxs as jsxs43 } from "react/jsx-runtime";
-var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage }) => {
+var ImageItem = ({
+  filename,
+  checksum,
+  index: index4,
+  src = null,
+  useGetImage
+}) => {
   const { data: image } = useGetImage({
     data: { filename, checksum },
     queryKey: [`get-image-${""}`],
@@ -15870,7 +15876,7 @@ var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage })
     {
       src: image || src,
       alt: filename,
-      className: "w-32 h-32 object-cover rounded-md"
+      className: "w-32 h-32 object-cover rounded-md cursor-pointer"
     }
   ) }, index4);
 };
@@ -15910,22 +15916,35 @@ var FileItem = (props) => {
   return /* @__PURE__ */ jsxs43(
     "div",
     {
-      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit group/file",
+      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit",
       children: [
         renderFile(),
         handleRemoveFile && /* @__PURE__ */ jsx68(
           "div",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)"
+            },
             onClick: () => handleRemoveFile(index4),
-            className: "cursor-pointer absolute right-0 top-0 p-2 hidden group-hover/file:block bg-[rgba(0,0,0,0.2)]",
+            className: "cursor-pointer p-2 hidden group-hover:block",
             children: /* @__PURE__ */ jsx68(DeleteIcon, {})
           }
         ),
         !handleRemoveFile && /* @__PURE__ */ jsx68(
           "span",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)",
+              zIndex: 10
+            },
             onClick: (e3) => handleFileDownload(e3, src, filename),
-            className: "absolute top-0 right-0 z-10 hidden group-hover/file:block cursor-pointer p-2 text-white bg-[rgba(0,0,0,0.2)]",
+            className: "hidden group-hover:block cursor-pointer p-2 text-white ",
             children: /* @__PURE__ */ jsx68(DownloadIcon, {})
           }
         )
@@ -15954,7 +15973,11 @@ var downloadFile = async (url, filename) => {
     console.error("File download failed:", error2);
   }
 };
-var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
+var RenderFiles = ({
+  selectedFiles,
+  setSelectedFiles,
+  useGetImage
+}) => {
   const handleRemoveFile = (index4) => {
     if (setSelectedFiles) {
       const files = selectedFiles.filter((_2, i3) => i3 !== index4);
@@ -15978,7 +16001,7 @@ var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
         useGetImage
       },
       index4
-    ) });
+    ) }, file?.id ?? index4);
   }) });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",