@ynput/ayon-frontend-shared 0.2.13 → 0.2.15

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnnotationsUpload.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.ts"],"sourcesContent":["import { uploadFile } from '../helpers'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../../../context/FeedContext'\nimport { SavedAnnotationMetadata } from '../../../index'\n\ntype Props = {\n  projectName: string\n  onSuccess: (data: any) => void\n}\n\nconst useAnnotationsUpload = ({ projectName, onSuccess }: Props) => {\n  const { removeAnnotation, exportAnnotationComposite } = useFeedContext()\n\n  const uploadAnnotations = async (annotations: any[]) => {\n    try {\n      const uploadPromises = annotations.map(async (annotation) => {\n        const composite = await exportAnnotationComposite?.(annotation.id)\n        if (!composite) {\n          throw new Error(`Exporting composite image for annotation ${annotation.id} failed`)\n        }\n\n        const compositeFile = new File([composite], annotation.name, {\n          type: 'image/png',\n        })\n\n        const transparent = await fetch(annotation.annotationData).then(r => r.blob())\n        const transparentFile = new File([transparent], `annotation-${annotation.name}`, {\n          type: 'image/png',\n        })\n\n        const uploads = await Promise.all([\n          uploadFile(compositeFile, projectName, () => {}),\n          uploadFile(transparentFile, projectName, () => {}),\n        ])\n\n        return { annotation, uploads }\n      })\n\n      const res = await Promise.allSettled(uploadPromises)\n\n      const successfulFiles: any[] = []\n      const metadata: SavedAnnotationMetadata[] = []\n\n      res.forEach((result) => {\n        if (result.status === 'fulfilled') {\n          const { uploads, annotation } = result.value\n\n          uploads.forEach((upload: any) => {\n            successfulFiles.push(onSuccess(upload))\n          })\n\n          metadata.push({\n            range: annotation.range,\n            id: annotation.id,\n            composite: uploads[0].data.id,\n            transparent: uploads[1].data.id,\n          })\n\n          removeAnnotation?.(annotation.id)\n        } else {\n          toast.error('Upload failed: ' + result.reason.message)\n        }\n      })\n\n      return { files: successfulFiles, metadata }\n    } catch (error: any) {\n      toast.error('Upload failed: ' + error.message)\n      return { files: [], metadata: [] }\n    }\n  }\n\n  return uploadAnnotations\n}\n\nexport default useAnnotationsUpload\n\nconst base64ToBlob = (base64: string) => {\n  const byteString = atob(base64.split(',')[1])\n  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]\n  const ab = new ArrayBuffer(byteString.length)\n  const ia = new Uint8Array(ab)\n  for (let i = 0; i < byteString.length; i++) {\n    ia[i] = byteString.charCodeAt(i)\n  }\n  return new Blob([ab], { type: mimeString })\n}\n"],"names":["useFeedContext","uploadFile","toast"],"mappings":";;;;AAUA,MAAM,uBAAuB,CAAC,EAAE,aAAa,gBAAuB;AAClE,QAAM,EAAE,kBAAkB,0BAA0B,IAAIA,2BAAe;AAEjE,QAAA,oBAAoB,OAAO,gBAAuB;AAClD,QAAA;AACF,YAAM,iBAAiB,YAAY,IAAI,OAAO,eAAe;AAC3D,cAAM,YAAY,OAAM,uEAA4B,WAAW;AAC/D,YAAI,CAAC,WAAW;AACd,gBAAM,IAAI,MAAM,4CAA4C,WAAW,EAAE,SAAS;AAAA,QAAA;AAGpF,cAAM,gBAAgB,IAAI,KAAK,CAAC,SAAS,GAAG,WAAW,MAAM;AAAA,UAC3D,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,cAAc,MAAM,MAAM,WAAW,cAAc,EAAE,KAAK,CAAA,MAAK,EAAE,MAAM;AACvE,cAAA,kBAAkB,IAAI,KAAK,CAAC,WAAW,GAAG,cAAc,WAAW,IAAI,IAAI;AAAA,UAC/E,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,UAAU,MAAM,QAAQ,IAAI;AAAA,UAChCC,mBAAW,eAAe,aAAa,MAAM;AAAA,UAAA,CAAE;AAAA,UAC/CA,mBAAW,iBAAiB,aAAa,MAAM;AAAA,UAAE,CAAA;AAAA,QAAA,CAClD;AAEM,eAAA,EAAE,YAAY,QAAQ;AAAA,MAAA,CAC9B;AAED,YAAM,MAAM,MAAM,QAAQ,WAAW,cAAc;AAEnD,YAAM,kBAAyB,CAAC;AAChC,YAAM,WAAsC,CAAC;AAEzC,UAAA,QAAQ,CAAC,WAAW;AAClB,YAAA,OAAO,WAAW,aAAa;AACjC,gBAAM,EAAE,SAAS,WAAW,IAAI,OAAO;AAE/B,kBAAA,QAAQ,CAAC,WAAgB;AACf,4BAAA,KAAK,UAAU,MAAM,CAAC;AAAA,UAAA,CACvC;AAED,mBAAS,KAAK;AAAA,YACZ,OAAO,WAAW;AAAA,YAClB,IAAI,WAAW;AAAA,YACf,WAAW,QAAQ,CAAC,EAAE,KAAK;AAAA,YAC3B,aAAa,QAAQ,CAAC,EAAE,KAAK;AAAA,UAAA,CAC9B;AAED,+DAAmB,WAAW;AAAA,QAAE,OAC3B;AACLC,wBAAAA,MAAM,MAAM,oBAAoB,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MACvD,CACD;AAEM,aAAA,EAAE,OAAO,iBAAiB,SAAS;AAAA,aACnC,OAAY;AACbA,oBAAAA,MAAA,MAAM,oBAAoB,MAAM,OAAO;AAC7C,aAAO,EAAE,OAAO,IAAI,UAAU,CAAA,EAAG;AAAA,IAAA;AAAA,EAErC;AAEO,SAAA;AACT;;"}
+{"version":3,"file":"useAnnotationsUpload.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.ts"],"sourcesContent":["import { uploadFile } from '../helpers'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../../../context/FeedContext'\nimport { SavedAnnotationMetadata } from '../../../index'\n\ntype Props = {\n  projectName: string\n  onSuccess: (data: any) => any\n}\n\nconst useAnnotationsUpload = ({ projectName, onSuccess }: Props) => {\n  const { removeAnnotation, exportAnnotationComposite } = useFeedContext()\n\n  const uploadAnnotations = async (annotations: any[]) => {\n    try {\n      const uploadPromises = annotations.map(async (annotation) => {\n        const composite = await exportAnnotationComposite?.(annotation.id)\n        if (!composite) {\n          throw new Error(`Exporting composite image for annotation ${annotation.id} failed`)\n        }\n\n        const compositeFile = new File([composite], annotation.name, {\n          type: 'image/png',\n        })\n\n        const transparent = await fetch(annotation.annotationData).then((r) => r.blob())\n        const transparentFile = new File([transparent], `annotation-${annotation.name}`, {\n          type: 'image/png',\n        })\n\n        const uploads = await Promise.all([\n          uploadFile(compositeFile, projectName, () => {}),\n          uploadFile(transparentFile, projectName, () => {}),\n        ])\n\n        return { annotation, uploads }\n      })\n\n      const res = await Promise.allSettled(uploadPromises)\n\n      const successfulFiles: any[] = []\n      const metadata: SavedAnnotationMetadata[] = []\n\n      res.forEach((result) => {\n        if (result.status === 'fulfilled') {\n          const { uploads, annotation } = result.value\n\n          uploads.forEach((upload: any) => {\n            successfulFiles.push(onSuccess(upload))\n          })\n\n          metadata.push({\n            range: annotation.range,\n            id: annotation.id,\n            composite: uploads[0].data.id,\n            transparent: uploads[1].data.id,\n          })\n\n          removeAnnotation?.(annotation.id)\n        } else {\n          toast.error('Upload failed: ' + result.reason.message)\n        }\n      })\n\n      return { files: successfulFiles, metadata }\n    } catch (error: any) {\n      toast.error('Upload failed: ' + error.message)\n      return { files: [], metadata: [] }\n    }\n  }\n\n  return uploadAnnotations\n}\n\nexport default useAnnotationsUpload\n\nconst base64ToBlob = (base64: string) => {\n  const byteString = atob(base64.split(',')[1])\n  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]\n  const ab = new ArrayBuffer(byteString.length)\n  const ia = new Uint8Array(ab)\n  for (let i = 0; i < byteString.length; i++) {\n    ia[i] = byteString.charCodeAt(i)\n  }\n  return new Blob([ab], { type: mimeString })\n}\n"],"names":["useFeedContext","uploadFile","toast"],"mappings":";;;;AAUA,MAAM,uBAAuB,CAAC,EAAE,aAAa,gBAAuB;AAClE,QAAM,EAAE,kBAAkB,0BAA0B,IAAIA,2BAAe;AAEjE,QAAA,oBAAoB,OAAO,gBAAuB;AAClD,QAAA;AACF,YAAM,iBAAiB,YAAY,IAAI,OAAO,eAAe;AAC3D,cAAM,YAAY,OAAM,uEAA4B,WAAW;AAC/D,YAAI,CAAC,WAAW;AACd,gBAAM,IAAI,MAAM,4CAA4C,WAAW,EAAE,SAAS;AAAA,QAAA;AAGpF,cAAM,gBAAgB,IAAI,KAAK,CAAC,SAAS,GAAG,WAAW,MAAM;AAAA,UAC3D,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,cAAc,MAAM,MAAM,WAAW,cAAc,EAAE,KAAK,CAAC,MAAM,EAAE,MAAM;AACzE,cAAA,kBAAkB,IAAI,KAAK,CAAC,WAAW,GAAG,cAAc,WAAW,IAAI,IAAI;AAAA,UAC/E,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,UAAU,MAAM,QAAQ,IAAI;AAAA,UAChCC,mBAAW,eAAe,aAAa,MAAM;AAAA,UAAA,CAAE;AAAA,UAC/CA,mBAAW,iBAAiB,aAAa,MAAM;AAAA,UAAE,CAAA;AAAA,QAAA,CAClD;AAEM,eAAA,EAAE,YAAY,QAAQ;AAAA,MAAA,CAC9B;AAED,YAAM,MAAM,MAAM,QAAQ,WAAW,cAAc;AAEnD,YAAM,kBAAyB,CAAC;AAChC,YAAM,WAAsC,CAAC;AAEzC,UAAA,QAAQ,CAAC,WAAW;AAClB,YAAA,OAAO,WAAW,aAAa;AACjC,gBAAM,EAAE,SAAS,WAAW,IAAI,OAAO;AAE/B,kBAAA,QAAQ,CAAC,WAAgB;AACf,4BAAA,KAAK,UAAU,MAAM,CAAC;AAAA,UAAA,CACvC;AAED,mBAAS,KAAK;AAAA,YACZ,OAAO,WAAW;AAAA,YAClB,IAAI,WAAW;AAAA,YACf,WAAW,QAAQ,CAAC,EAAE,KAAK;AAAA,YAC3B,aAAa,QAAQ,CAAC,EAAE,KAAK;AAAA,UAAA,CAC9B;AAED,+DAAmB,WAAW;AAAA,QAAE,OAC3B;AACLC,wBAAAA,MAAM,MAAM,oBAAoB,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MACvD,CACD;AAEM,aAAA,EAAE,OAAO,iBAAiB,SAAS;AAAA,aACnC,OAAY;AACbA,oBAAAA,MAAA,MAAM,oBAAoB,MAAM,OAAO;AAC7C,aAAO,EAAE,OAAO,IAAI,UAAU,CAAA,EAAG;AAAA,IAAA;AAAA,EAErC;AAEO,SAAA;AACT;;"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnnotationsUpload.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.ts"],"sourcesContent":["import { uploadFile } from '../helpers'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../../../context/FeedContext'\nimport { SavedAnnotationMetadata } from '../../../index'\n\ntype Props = {\n  projectName: string\n  onSuccess: (data: any) => void\n}\n\nconst useAnnotationsUpload = ({ projectName, onSuccess }: Props) => {\n  const { removeAnnotation, exportAnnotationComposite } = useFeedContext()\n\n  const uploadAnnotations = async (annotations: any[]) => {\n    try {\n      const uploadPromises = annotations.map(async (annotation) => {\n        const composite = await exportAnnotationComposite?.(annotation.id)\n        if (!composite) {\n          throw new Error(`Exporting composite image for annotation ${annotation.id} failed`)\n        }\n\n        const compositeFile = new File([composite], annotation.name, {\n          type: 'image/png',\n        })\n\n        const transparent = await fetch(annotation.annotationData).then(r => r.blob())\n        const transparentFile = new File([transparent], `annotation-${annotation.name}`, {\n          type: 'image/png',\n        })\n\n        const uploads = await Promise.all([\n          uploadFile(compositeFile, projectName, () => {}),\n          uploadFile(transparentFile, projectName, () => {}),\n        ])\n\n        return { annotation, uploads }\n      })\n\n      const res = await Promise.allSettled(uploadPromises)\n\n      const successfulFiles: any[] = []\n      const metadata: SavedAnnotationMetadata[] = []\n\n      res.forEach((result) => {\n        if (result.status === 'fulfilled') {\n          const { uploads, annotation } = result.value\n\n          uploads.forEach((upload: any) => {\n            successfulFiles.push(onSuccess(upload))\n          })\n\n          metadata.push({\n            range: annotation.range,\n            id: annotation.id,\n            composite: uploads[0].data.id,\n            transparent: uploads[1].data.id,\n          })\n\n          removeAnnotation?.(annotation.id)\n        } else {\n          toast.error('Upload failed: ' + result.reason.message)\n        }\n      })\n\n      return { files: successfulFiles, metadata }\n    } catch (error: any) {\n      toast.error('Upload failed: ' + error.message)\n      return { files: [], metadata: [] }\n    }\n  }\n\n  return uploadAnnotations\n}\n\nexport default useAnnotationsUpload\n\nconst base64ToBlob = (base64: string) => {\n  const byteString = atob(base64.split(',')[1])\n  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]\n  const ab = new ArrayBuffer(byteString.length)\n  const ia = new Uint8Array(ab)\n  for (let i = 0; i < byteString.length; i++) {\n    ia[i] = byteString.charCodeAt(i)\n  }\n  return new Blob([ab], { type: mimeString })\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,uBAAuB,CAAC,EAAE,aAAa,gBAAuB;AAClE,QAAM,EAAE,kBAAkB,0BAA0B,IAAI,eAAe;AAEjE,QAAA,oBAAoB,OAAO,gBAAuB;AAClD,QAAA;AACF,YAAM,iBAAiB,YAAY,IAAI,OAAO,eAAe;AAC3D,cAAM,YAAY,OAAM,uEAA4B,WAAW;AAC/D,YAAI,CAAC,WAAW;AACd,gBAAM,IAAI,MAAM,4CAA4C,WAAW,EAAE,SAAS;AAAA,QAAA;AAGpF,cAAM,gBAAgB,IAAI,KAAK,CAAC,SAAS,GAAG,WAAW,MAAM;AAAA,UAC3D,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,cAAc,MAAM,MAAM,WAAW,cAAc,EAAE,KAAK,CAAA,MAAK,EAAE,MAAM;AACvE,cAAA,kBAAkB,IAAI,KAAK,CAAC,WAAW,GAAG,cAAc,WAAW,IAAI,IAAI;AAAA,UAC/E,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,UAAU,MAAM,QAAQ,IAAI;AAAA,UAChC,WAAW,eAAe,aAAa,MAAM;AAAA,UAAA,CAAE;AAAA,UAC/C,WAAW,iBAAiB,aAAa,MAAM;AAAA,UAAE,CAAA;AAAA,QAAA,CAClD;AAEM,eAAA,EAAE,YAAY,QAAQ;AAAA,MAAA,CAC9B;AAED,YAAM,MAAM,MAAM,QAAQ,WAAW,cAAc;AAEnD,YAAM,kBAAyB,CAAC;AAChC,YAAM,WAAsC,CAAC;AAEzC,UAAA,QAAQ,CAAC,WAAW;AAClB,YAAA,OAAO,WAAW,aAAa;AACjC,gBAAM,EAAE,SAAS,WAAW,IAAI,OAAO;AAE/B,kBAAA,QAAQ,CAAC,WAAgB;AACf,4BAAA,KAAK,UAAU,MAAM,CAAC;AAAA,UAAA,CACvC;AAED,mBAAS,KAAK;AAAA,YACZ,OAAO,WAAW;AAAA,YAClB,IAAI,WAAW;AAAA,YACf,WAAW,QAAQ,CAAC,EAAE,KAAK;AAAA,YAC3B,aAAa,QAAQ,CAAC,EAAE,KAAK;AAAA,UAAA,CAC9B;AAED,+DAAmB,WAAW;AAAA,QAAE,OAC3B;AACL,gBAAM,MAAM,oBAAoB,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MACvD,CACD;AAEM,aAAA,EAAE,OAAO,iBAAiB,SAAS;AAAA,aACnC,OAAY;AACb,YAAA,MAAM,oBAAoB,MAAM,OAAO;AAC7C,aAAO,EAAE,OAAO,IAAI,UAAU,CAAA,EAAG;AAAA,IAAA;AAAA,EAErC;AAEO,SAAA;AACT;"}
+{"version":3,"file":"useAnnotationsUpload.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.ts"],"sourcesContent":["import { uploadFile } from '../helpers'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../../../context/FeedContext'\nimport { SavedAnnotationMetadata } from '../../../index'\n\ntype Props = {\n  projectName: string\n  onSuccess: (data: any) => any\n}\n\nconst useAnnotationsUpload = ({ projectName, onSuccess }: Props) => {\n  const { removeAnnotation, exportAnnotationComposite } = useFeedContext()\n\n  const uploadAnnotations = async (annotations: any[]) => {\n    try {\n      const uploadPromises = annotations.map(async (annotation) => {\n        const composite = await exportAnnotationComposite?.(annotation.id)\n        if (!composite) {\n          throw new Error(`Exporting composite image for annotation ${annotation.id} failed`)\n        }\n\n        const compositeFile = new File([composite], annotation.name, {\n          type: 'image/png',\n        })\n\n        const transparent = await fetch(annotation.annotationData).then((r) => r.blob())\n        const transparentFile = new File([transparent], `annotation-${annotation.name}`, {\n          type: 'image/png',\n        })\n\n        const uploads = await Promise.all([\n          uploadFile(compositeFile, projectName, () => {}),\n          uploadFile(transparentFile, projectName, () => {}),\n        ])\n\n        return { annotation, uploads }\n      })\n\n      const res = await Promise.allSettled(uploadPromises)\n\n      const successfulFiles: any[] = []\n      const metadata: SavedAnnotationMetadata[] = []\n\n      res.forEach((result) => {\n        if (result.status === 'fulfilled') {\n          const { uploads, annotation } = result.value\n\n          uploads.forEach((upload: any) => {\n            successfulFiles.push(onSuccess(upload))\n          })\n\n          metadata.push({\n            range: annotation.range,\n            id: annotation.id,\n            composite: uploads[0].data.id,\n            transparent: uploads[1].data.id,\n          })\n\n          removeAnnotation?.(annotation.id)\n        } else {\n          toast.error('Upload failed: ' + result.reason.message)\n        }\n      })\n\n      return { files: successfulFiles, metadata }\n    } catch (error: any) {\n      toast.error('Upload failed: ' + error.message)\n      return { files: [], metadata: [] }\n    }\n  }\n\n  return uploadAnnotations\n}\n\nexport default useAnnotationsUpload\n\nconst base64ToBlob = (base64: string) => {\n  const byteString = atob(base64.split(',')[1])\n  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]\n  const ab = new ArrayBuffer(byteString.length)\n  const ia = new Uint8Array(ab)\n  for (let i = 0; i < byteString.length; i++) {\n    ia[i] = byteString.charCodeAt(i)\n  }\n  return new Blob([ab], { type: mimeString })\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,uBAAuB,CAAC,EAAE,aAAa,gBAAuB;AAClE,QAAM,EAAE,kBAAkB,0BAA0B,IAAI,eAAe;AAEjE,QAAA,oBAAoB,OAAO,gBAAuB;AAClD,QAAA;AACF,YAAM,iBAAiB,YAAY,IAAI,OAAO,eAAe;AAC3D,cAAM,YAAY,OAAM,uEAA4B,WAAW;AAC/D,YAAI,CAAC,WAAW;AACd,gBAAM,IAAI,MAAM,4CAA4C,WAAW,EAAE,SAAS;AAAA,QAAA;AAGpF,cAAM,gBAAgB,IAAI,KAAK,CAAC,SAAS,GAAG,WAAW,MAAM;AAAA,UAC3D,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,cAAc,MAAM,MAAM,WAAW,cAAc,EAAE,KAAK,CAAC,MAAM,EAAE,MAAM;AACzE,cAAA,kBAAkB,IAAI,KAAK,CAAC,WAAW,GAAG,cAAc,WAAW,IAAI,IAAI;AAAA,UAC/E,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,UAAU,MAAM,QAAQ,IAAI;AAAA,UAChC,WAAW,eAAe,aAAa,MAAM;AAAA,UAAA,CAAE;AAAA,UAC/C,WAAW,iBAAiB,aAAa,MAAM;AAAA,UAAE,CAAA;AAAA,QAAA,CAClD;AAEM,eAAA,EAAE,YAAY,QAAQ;AAAA,MAAA,CAC9B;AAED,YAAM,MAAM,MAAM,QAAQ,WAAW,cAAc;AAEnD,YAAM,kBAAyB,CAAC;AAChC,YAAM,WAAsC,CAAC;AAEzC,UAAA,QAAQ,CAAC,WAAW;AAClB,YAAA,OAAO,WAAW,aAAa;AACjC,gBAAM,EAAE,SAAS,WAAW,IAAI,OAAO;AAE/B,kBAAA,QAAQ,CAAC,WAAgB;AACf,4BAAA,KAAK,UAAU,MAAM,CAAC;AAAA,UAAA,CACvC;AAED,mBAAS,KAAK;AAAA,YACZ,OAAO,WAAW;AAAA,YAClB,IAAI,WAAW;AAAA,YACf,WAAW,QAAQ,CAAC,EAAE,KAAK;AAAA,YAC3B,aAAa,QAAQ,CAAC,EAAE,KAAK;AAAA,UAAA,CAC9B;AAED,+DAAmB,WAAW;AAAA,QAAE,OAC3B;AACL,gBAAM,MAAM,oBAAoB,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MACvD,CACD;AAEM,aAAA,EAAE,OAAO,iBAAiB,SAAS;AAAA,aACnC,OAAY;AACb,YAAA,MAAM,oBAAoB,MAAM,OAAO;AAC7C,aAAO,EAAE,OAAO,IAAI,UAAU,CAAA,EAAG;AAAA,IAAA;AAAA,EAErC;AAEO,SAAA;AACT;"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useMentionLink.cjs.js

@@ -13,6 +13,7 @@ require("react-dom");
 require("../../../../../context/pip/PiPWrapper.cjs.js");
 require("../../../../../context/AddonProjectContext.cjs.js");
 require("../../../../../context/AddonContext.cjs.js");
+require("../../../../../context/PowerpackContext.cjs.js");
 const Inline = ReactQuill.Quill.import("blots/inline");
 const useMentionLink = ({ projectName }) => {
   const { openSlideOut } = DetailsPanelContext.useDetailsPanelContext();

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useMentionLink.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMentionLink.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useMentionLink.ts"],"sourcesContent":["import { Quill } from 'react-quill-ayon'\nimport useReferenceTooltip from '../../../hooks/useReferenceTooltip'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Inline = Quill.import('blots/inline')\n\ninterface MentionLinkOptions {\n  projectName: string\n}\n\n// custom mention links\nconst useMentionLink = ({ projectName }: MentionLinkOptions) => {\n  const { openSlideOut } = useDetailsPanelContext()\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  // special link for mentions\n  // @ts-ignore\n  class MentionLink extends Inline {\n    static blotName = 'mention'\n    static tagName = 'MENTION'\n    // @ts-ignore\n    static create(value) {\n      if (!value || typeof value !== 'string') return document.createElement(MentionLink.tagName)\n\n      const node = super.create(value)\n      // check if this is a mention url\n      const valueMentionType = value.split(':').shift() as string\n      const valueMentionId = value.split(':').pop() as string\n\n      node.classList.add('mention')\n      node.classList.add(valueMentionType)\n      // add id=id-ref\n      node.setAttribute('id', `ref-${valueMentionId}`)\n      //   set as not editable\n      node.setAttribute('contenteditable', 'false')\n\n      // add data-value attribute\n      node.setAttribute('data-value', value)\n\n      //   on mouse click open reference\n      node.addEventListener('click', (e: React.MouseEvent<HTMLElement>) => {\n        e.preventDefault()\n        if (valueMentionType === 'user') return\n\n        openSlideOut({\n          entityId: valueMentionId,\n          entityType: valueMentionType as DetailsPanelEntityType,\n          projectName,\n        })\n      })\n\n      // add on mouse enter\n      node.addEventListener('mouseenter', (e: React.KeyboardEvent<HTMLElement>) => {\n        const target = e.target || {}\n        const label = (target as HTMLElement).innerText.replace('@', '')\n        // get the center of the reference\n        const { x, y, width } = (target as HTMLElement).getBoundingClientRect()\n        const pos = { left: x + width / 2, top: y }\n\n        setRefTooltip({\n          id: valueMentionId,\n          name: valueMentionId,\n          type: valueMentionType,\n          label,\n          pos,\n        })\n      })\n\n      return node || ''\n    }\n\n    // Added value method to retrieve the value from the DOM node\n    static value(node: any) {\n      return node.getAttribute('data-value')\n    }\n  }\n\n  // @ts-ignore\n  MentionLink.sanitize = (url) => url\n  // @ts-ignore\n  Quill.register(MentionLink, true)\n}\n\nexport default useMentionLink\n"],"names":["Quill","useDetailsPanelContext"],"mappings":";;;;;;;;;;;;;;;AAKA,MAAM,SAASA,WAAAA,MAAM,OAAO,cAAc;AAO1C,MAAM,iBAAiB,CAAC,EAAE,kBAAsC;AACxD,QAAA,EAAE,aAAa,IAAIC,2CAAuB;AAChD,QAAM,CAAG,EAAA,aAAa,IAAI,oBAAoB;AAI9C,QAAM,eAAN,MAAM,qBAAoB,OAAO;AAAA;AAAA,IAI/B,OAAO,OAAO,OAAO;AACf,UAAA,CAAC,SAAS,OAAO,UAAU,SAAiB,QAAA,SAAS,cAAc,aAAY,OAAO;AAEpF,YAAA,OAAO,MAAM,OAAO,KAAK;AAE/B,YAAM,mBAAmB,MAAM,MAAM,GAAG,EAAE,MAAM;AAChD,YAAM,iBAAiB,MAAM,MAAM,GAAG,EAAE,IAAI;AAEvC,WAAA,UAAU,IAAI,SAAS;AACvB,WAAA,UAAU,IAAI,gBAAgB;AAEnC,WAAK,aAAa,MAAM,OAAO,cAAc,EAAE;AAE1C,WAAA,aAAa,mBAAmB,OAAO;AAGvC,WAAA,aAAa,cAAc,KAAK;AAGhC,WAAA,iBAAiB,SAAS,CAAC,MAAqC;AACnE,UAAE,eAAe;AACjB,YAAI,qBAAqB,OAAQ;AAEpB,qBAAA;AAAA,UACX,UAAU;AAAA,UACV,YAAY;AAAA,UACZ;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAGI,WAAA,iBAAiB,cAAc,CAAC,MAAwC;AACrE,cAAA,SAAS,EAAE,UAAU,CAAC;AAC5B,cAAM,QAAS,OAAuB,UAAU,QAAQ,KAAK,EAAE;AAE/D,cAAM,EAAE,GAAG,GAAG,MAAM,IAAK,OAAuB,sBAAsB;AACtE,cAAM,MAAM,EAAE,MAAM,IAAI,QAAQ,GAAG,KAAK,EAAE;AAE5B,sBAAA;AAAA,UACZ,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,MAAM;AAAA,UACN;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAED,aAAO,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIjB,OAAO,MAAM,MAAW;AACf,aAAA,KAAK,aAAa,YAAY;AAAA,IAAA;AAAA,EACvC;AAxDA,gBADI,cACG,YAAW;AAClB,gBAFI,cAEG,WAAU;AAFnB,MAAM,cAAN;AA6DY,cAAA,WAAW,CAAC,QAAQ;AAE1BD,mBAAA,SAAS,aAAa,IAAI;AAClC;;"}
+{"version":3,"file":"useMentionLink.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useMentionLink.ts"],"sourcesContent":["import { Quill } from 'react-quill-ayon'\nimport useReferenceTooltip from '../../../hooks/useReferenceTooltip'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Inline = Quill.import('blots/inline')\n\ninterface MentionLinkOptions {\n  projectName: string\n}\n\n// custom mention links\nconst useMentionLink = ({ projectName }: MentionLinkOptions) => {\n  const { openSlideOut } = useDetailsPanelContext()\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  // special link for mentions\n  // @ts-ignore\n  class MentionLink extends Inline {\n    static blotName = 'mention'\n    static tagName = 'MENTION'\n    // @ts-ignore\n    static create(value) {\n      if (!value || typeof value !== 'string') return document.createElement(MentionLink.tagName)\n\n      const node = super.create(value)\n      // check if this is a mention url\n      const valueMentionType = value.split(':').shift() as string\n      const valueMentionId = value.split(':').pop() as string\n\n      node.classList.add('mention')\n      node.classList.add(valueMentionType)\n      // add id=id-ref\n      node.setAttribute('id', `ref-${valueMentionId}`)\n      //   set as not editable\n      node.setAttribute('contenteditable', 'false')\n\n      // add data-value attribute\n      node.setAttribute('data-value', value)\n\n      //   on mouse click open reference\n      node.addEventListener('click', (e: React.MouseEvent<HTMLElement>) => {\n        e.preventDefault()\n        if (valueMentionType === 'user') return\n\n        openSlideOut({\n          entityId: valueMentionId,\n          entityType: valueMentionType as DetailsPanelEntityType,\n          projectName,\n        })\n      })\n\n      // add on mouse enter\n      node.addEventListener('mouseenter', (e: React.KeyboardEvent<HTMLElement>) => {\n        const target = e.target || {}\n        const label = (target as HTMLElement).innerText.replace('@', '')\n        // get the center of the reference\n        const { x, y, width } = (target as HTMLElement).getBoundingClientRect()\n        const pos = { left: x + width / 2, top: y }\n\n        setRefTooltip({\n          id: valueMentionId,\n          name: valueMentionId,\n          type: valueMentionType,\n          label,\n          pos,\n        })\n      })\n\n      return node || ''\n    }\n\n    // Added value method to retrieve the value from the DOM node\n    static value(node: any) {\n      return node.getAttribute('data-value')\n    }\n  }\n\n  // @ts-ignore\n  MentionLink.sanitize = (url) => url\n  // @ts-ignore\n  Quill.register(MentionLink, true)\n}\n\nexport default useMentionLink\n"],"names":["Quill","useDetailsPanelContext"],"mappings":";;;;;;;;;;;;;;;;AAKA,MAAM,SAASA,WAAAA,MAAM,OAAO,cAAc;AAO1C,MAAM,iBAAiB,CAAC,EAAE,kBAAsC;AACxD,QAAA,EAAE,aAAa,IAAIC,2CAAuB;AAChD,QAAM,CAAG,EAAA,aAAa,IAAI,oBAAoB;AAI9C,QAAM,eAAN,MAAM,qBAAoB,OAAO;AAAA;AAAA,IAI/B,OAAO,OAAO,OAAO;AACf,UAAA,CAAC,SAAS,OAAO,UAAU,SAAiB,QAAA,SAAS,cAAc,aAAY,OAAO;AAEpF,YAAA,OAAO,MAAM,OAAO,KAAK;AAE/B,YAAM,mBAAmB,MAAM,MAAM,GAAG,EAAE,MAAM;AAChD,YAAM,iBAAiB,MAAM,MAAM,GAAG,EAAE,IAAI;AAEvC,WAAA,UAAU,IAAI,SAAS;AACvB,WAAA,UAAU,IAAI,gBAAgB;AAEnC,WAAK,aAAa,MAAM,OAAO,cAAc,EAAE;AAE1C,WAAA,aAAa,mBAAmB,OAAO;AAGvC,WAAA,aAAa,cAAc,KAAK;AAGhC,WAAA,iBAAiB,SAAS,CAAC,MAAqC;AACnE,UAAE,eAAe;AACjB,YAAI,qBAAqB,OAAQ;AAEpB,qBAAA;AAAA,UACX,UAAU;AAAA,UACV,YAAY;AAAA,UACZ;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAGI,WAAA,iBAAiB,cAAc,CAAC,MAAwC;AACrE,cAAA,SAAS,EAAE,UAAU,CAAC;AAC5B,cAAM,QAAS,OAAuB,UAAU,QAAQ,KAAK,EAAE;AAE/D,cAAM,EAAE,GAAG,GAAG,MAAM,IAAK,OAAuB,sBAAsB;AACtE,cAAM,MAAM,EAAE,MAAM,IAAI,QAAQ,GAAG,KAAK,EAAE;AAE5B,sBAAA;AAAA,UACZ,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,MAAM;AAAA,UACN;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAED,aAAO,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIjB,OAAO,MAAM,MAAW;AACf,aAAA,KAAK,aAAa,YAAY;AAAA,IAAA;AAAA,EACvC;AAxDA,gBADI,cACG,YAAW;AAClB,gBAFI,cAEG,WAAU;AAFnB,MAAM,cAAN;AA6DY,cAAA,WAAW,CAAC,QAAQ;AAE1BD,mBAAA,SAAS,aAAa,IAAI;AAClC;;"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useMentionLink.es.js

@@ -12,6 +12,7 @@ import "react-dom";
 import "../../../../../context/pip/PiPWrapper.es.js";
 import "../../../../../context/AddonProjectContext.es.js";
 import "../../../../../context/AddonContext.es.js";
+import "../../../../../context/PowerpackContext.es.js";
 const Inline = Quill.import("blots/inline");
 const useMentionLink = ({ projectName }) => {
   const { openSlideOut } = useDetailsPanelContext();

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useMentionLink.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMentionLink.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useMentionLink.ts"],"sourcesContent":["import { Quill } from 'react-quill-ayon'\nimport useReferenceTooltip from '../../../hooks/useReferenceTooltip'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Inline = Quill.import('blots/inline')\n\ninterface MentionLinkOptions {\n  projectName: string\n}\n\n// custom mention links\nconst useMentionLink = ({ projectName }: MentionLinkOptions) => {\n  const { openSlideOut } = useDetailsPanelContext()\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  // special link for mentions\n  // @ts-ignore\n  class MentionLink extends Inline {\n    static blotName = 'mention'\n    static tagName = 'MENTION'\n    // @ts-ignore\n    static create(value) {\n      if (!value || typeof value !== 'string') return document.createElement(MentionLink.tagName)\n\n      const node = super.create(value)\n      // check if this is a mention url\n      const valueMentionType = value.split(':').shift() as string\n      const valueMentionId = value.split(':').pop() as string\n\n      node.classList.add('mention')\n      node.classList.add(valueMentionType)\n      // add id=id-ref\n      node.setAttribute('id', `ref-${valueMentionId}`)\n      //   set as not editable\n      node.setAttribute('contenteditable', 'false')\n\n      // add data-value attribute\n      node.setAttribute('data-value', value)\n\n      //   on mouse click open reference\n      node.addEventListener('click', (e: React.MouseEvent<HTMLElement>) => {\n        e.preventDefault()\n        if (valueMentionType === 'user') return\n\n        openSlideOut({\n          entityId: valueMentionId,\n          entityType: valueMentionType as DetailsPanelEntityType,\n          projectName,\n        })\n      })\n\n      // add on mouse enter\n      node.addEventListener('mouseenter', (e: React.KeyboardEvent<HTMLElement>) => {\n        const target = e.target || {}\n        const label = (target as HTMLElement).innerText.replace('@', '')\n        // get the center of the reference\n        const { x, y, width } = (target as HTMLElement).getBoundingClientRect()\n        const pos = { left: x + width / 2, top: y }\n\n        setRefTooltip({\n          id: valueMentionId,\n          name: valueMentionId,\n          type: valueMentionType,\n          label,\n          pos,\n        })\n      })\n\n      return node || ''\n    }\n\n    // Added value method to retrieve the value from the DOM node\n    static value(node: any) {\n      return node.getAttribute('data-value')\n    }\n  }\n\n  // @ts-ignore\n  MentionLink.sanitize = (url) => url\n  // @ts-ignore\n  Quill.register(MentionLink, true)\n}\n\nexport default useMentionLink\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKA,MAAM,SAAS,MAAM,OAAO,cAAc;AAO1C,MAAM,iBAAiB,CAAC,EAAE,kBAAsC;AACxD,QAAA,EAAE,aAAa,IAAI,uBAAuB;AAChD,QAAM,CAAG,EAAA,aAAa,IAAI,oBAAoB;AAI9C,QAAM,eAAN,MAAM,qBAAoB,OAAO;AAAA;AAAA,IAI/B,OAAO,OAAO,OAAO;AACf,UAAA,CAAC,SAAS,OAAO,UAAU,SAAiB,QAAA,SAAS,cAAc,aAAY,OAAO;AAEpF,YAAA,OAAO,MAAM,OAAO,KAAK;AAE/B,YAAM,mBAAmB,MAAM,MAAM,GAAG,EAAE,MAAM;AAChD,YAAM,iBAAiB,MAAM,MAAM,GAAG,EAAE,IAAI;AAEvC,WAAA,UAAU,IAAI,SAAS;AACvB,WAAA,UAAU,IAAI,gBAAgB;AAEnC,WAAK,aAAa,MAAM,OAAO,cAAc,EAAE;AAE1C,WAAA,aAAa,mBAAmB,OAAO;AAGvC,WAAA,aAAa,cAAc,KAAK;AAGhC,WAAA,iBAAiB,SAAS,CAAC,MAAqC;AACnE,UAAE,eAAe;AACjB,YAAI,qBAAqB,OAAQ;AAEpB,qBAAA;AAAA,UACX,UAAU;AAAA,UACV,YAAY;AAAA,UACZ;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAGI,WAAA,iBAAiB,cAAc,CAAC,MAAwC;AACrE,cAAA,SAAS,EAAE,UAAU,CAAC;AAC5B,cAAM,QAAS,OAAuB,UAAU,QAAQ,KAAK,EAAE;AAE/D,cAAM,EAAE,GAAG,GAAG,MAAM,IAAK,OAAuB,sBAAsB;AACtE,cAAM,MAAM,EAAE,MAAM,IAAI,QAAQ,GAAG,KAAK,EAAE;AAE5B,sBAAA;AAAA,UACZ,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,MAAM;AAAA,UACN;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAED,aAAO,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIjB,OAAO,MAAM,MAAW;AACf,aAAA,KAAK,aAAa,YAAY;AAAA,IAAA;AAAA,EACvC;AAxDA,gBADI,cACG,YAAW;AAClB,gBAFI,cAEG,WAAU;AAFnB,MAAM,cAAN;AA6DY,cAAA,WAAW,CAAC,QAAQ;AAE1B,QAAA,SAAS,aAAa,IAAI;AAClC;"}
+{"version":3,"file":"useMentionLink.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useMentionLink.ts"],"sourcesContent":["import { Quill } from 'react-quill-ayon'\nimport useReferenceTooltip from '../../../hooks/useReferenceTooltip'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Inline = Quill.import('blots/inline')\n\ninterface MentionLinkOptions {\n  projectName: string\n}\n\n// custom mention links\nconst useMentionLink = ({ projectName }: MentionLinkOptions) => {\n  const { openSlideOut } = useDetailsPanelContext()\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  // special link for mentions\n  // @ts-ignore\n  class MentionLink extends Inline {\n    static blotName = 'mention'\n    static tagName = 'MENTION'\n    // @ts-ignore\n    static create(value) {\n      if (!value || typeof value !== 'string') return document.createElement(MentionLink.tagName)\n\n      const node = super.create(value)\n      // check if this is a mention url\n      const valueMentionType = value.split(':').shift() as string\n      const valueMentionId = value.split(':').pop() as string\n\n      node.classList.add('mention')\n      node.classList.add(valueMentionType)\n      // add id=id-ref\n      node.setAttribute('id', `ref-${valueMentionId}`)\n      //   set as not editable\n      node.setAttribute('contenteditable', 'false')\n\n      // add data-value attribute\n      node.setAttribute('data-value', value)\n\n      //   on mouse click open reference\n      node.addEventListener('click', (e: React.MouseEvent<HTMLElement>) => {\n        e.preventDefault()\n        if (valueMentionType === 'user') return\n\n        openSlideOut({\n          entityId: valueMentionId,\n          entityType: valueMentionType as DetailsPanelEntityType,\n          projectName,\n        })\n      })\n\n      // add on mouse enter\n      node.addEventListener('mouseenter', (e: React.KeyboardEvent<HTMLElement>) => {\n        const target = e.target || {}\n        const label = (target as HTMLElement).innerText.replace('@', '')\n        // get the center of the reference\n        const { x, y, width } = (target as HTMLElement).getBoundingClientRect()\n        const pos = { left: x + width / 2, top: y }\n\n        setRefTooltip({\n          id: valueMentionId,\n          name: valueMentionId,\n          type: valueMentionType,\n          label,\n          pos,\n        })\n      })\n\n      return node || ''\n    }\n\n    // Added value method to retrieve the value from the DOM node\n    static value(node: any) {\n      return node.getAttribute('data-value')\n    }\n  }\n\n  // @ts-ignore\n  MentionLink.sanitize = (url) => url\n  // @ts-ignore\n  Quill.register(MentionLink, true)\n}\n\nexport default useMentionLink\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAKA,MAAM,SAAS,MAAM,OAAO,cAAc;AAO1C,MAAM,iBAAiB,CAAC,EAAE,kBAAsC;AACxD,QAAA,EAAE,aAAa,IAAI,uBAAuB;AAChD,QAAM,CAAG,EAAA,aAAa,IAAI,oBAAoB;AAI9C,QAAM,eAAN,MAAM,qBAAoB,OAAO;AAAA;AAAA,IAI/B,OAAO,OAAO,OAAO;AACf,UAAA,CAAC,SAAS,OAAO,UAAU,SAAiB,QAAA,SAAS,cAAc,aAAY,OAAO;AAEpF,YAAA,OAAO,MAAM,OAAO,KAAK;AAE/B,YAAM,mBAAmB,MAAM,MAAM,GAAG,EAAE,MAAM;AAChD,YAAM,iBAAiB,MAAM,MAAM,GAAG,EAAE,IAAI;AAEvC,WAAA,UAAU,IAAI,SAAS;AACvB,WAAA,UAAU,IAAI,gBAAgB;AAEnC,WAAK,aAAa,MAAM,OAAO,cAAc,EAAE;AAE1C,WAAA,aAAa,mBAAmB,OAAO;AAGvC,WAAA,aAAa,cAAc,KAAK;AAGhC,WAAA,iBAAiB,SAAS,CAAC,MAAqC;AACnE,UAAE,eAAe;AACjB,YAAI,qBAAqB,OAAQ;AAEpB,qBAAA;AAAA,UACX,UAAU;AAAA,UACV,YAAY;AAAA,UACZ;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAGI,WAAA,iBAAiB,cAAc,CAAC,MAAwC;AACrE,cAAA,SAAS,EAAE,UAAU,CAAC;AAC5B,cAAM,QAAS,OAAuB,UAAU,QAAQ,KAAK,EAAE;AAE/D,cAAM,EAAE,GAAG,GAAG,MAAM,IAAK,OAAuB,sBAAsB;AACtE,cAAM,MAAM,EAAE,MAAM,IAAI,QAAQ,GAAG,KAAK,EAAE;AAE5B,sBAAA;AAAA,UACZ,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,MAAM;AAAA,UACN;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAED,aAAO,QAAQ;AAAA,IAAA;AAAA;AAAA,IAIjB,OAAO,MAAM,MAAW;AACf,aAAA,KAAK,aAAa,YAAY;AAAA,IAAA;AAAA,EACvC;AAxDA,gBADI,cACG,YAAW;AAClB,gBAFI,cAEG,WAAU;AAFnB,MAAM,cAAN;AA6DY,cAAA,WAAW,CAAC,QAAQ;AAE1B,QAAA,SAAS,aAAa,IAAI;AAClC;"}

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.cjs.js

@@ -14,6 +14,7 @@ require("react-dom");
 require("../../../../context/pip/PiPWrapper.cjs.js");
 require("../../../../context/AddonProjectContext.cjs.js");
 require("../../../../context/AddonContext.cjs.js");
+require("../../../../context/PowerpackContext.cjs.js");
 const fileIcons = {
   // special cases
   description: ["doc"],
@@ -69,7 +70,7 @@ const FileUploadCard = ({
   name,
   mime,
   src,
-  isUnsavedAnnotation,
+  unsavedAnnotation,
   savedAnnotation,
   size,
   progress,
@@ -88,11 +89,12 @@ const FileUploadCard = ({
   const extension = nameParts.pop() || "";
   const fileName = nameParts.join(".");
   const isPreviewable = FileUploadPreview.isFilePreviewable(mime || "." + extension);
-  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isUnsavedAnnotation;
+  const isImage = (mime == null ? void 0 : mime.includes("image/")) || Boolean(unsavedAnnotation);
   const downloadComponent = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "size", children: ayonReactComponents.getFileSizeString(size) }),
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "download", className: "download-icon" })
   ] });
+  const someAnnotation = unsavedAnnotation ?? savedAnnotation;
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
     FileUploadCard_styled.File,
     {
@@ -100,14 +102,17 @@ const FileUploadCard = ({
         compact: isCompact,
         isDownloadable,
         isPreviewable,
-        isUnsavedAnnotation
+        isUnsavedAnnotation: Boolean(unsavedAnnotation)
       }),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
           FileUploadCard_styled.ContentWrapper,
           {
-            className: clsx("content-wrapper", { isPreviewable, isUnsavedAnnotation }),
+            className: clsx("content-wrapper", {
+              isPreviewable,
+              isUnsavedAnnotation: Boolean(unsavedAnnotation)
+            }),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: getIconForType(mime || "." + extension), className: "type-icon" }),
               isImage && src && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
@@ -115,7 +120,7 @@ const FileUploadCard = ({
                 {
                   className: clsx({
                     "image-wrapper": true,
-                    isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation
+                    isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation
                   }),
                   children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
                     "img",
@@ -139,7 +144,7 @@ const FileUploadCard = ({
                     onClick: onExpand
                   }
                 ),
-                (isUnsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                (unsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
                   FileUploadCard_styled.ExpandButton,
                   {
                     "data-tooltip": "Jump to annotation",
@@ -154,11 +159,17 @@ const FileUploadCard = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(FileUploadCard_styled.Footer, { className: clsx({ inProgress, isPreviewable, isDownloadable }), children: [
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "progress", style: { right: `${100 - progress}%` } }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "name", children: fileName }) }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "extension", children: [
-            ".",
-            extension
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: someAnnotation ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "draw" }),
+            someAnnotation.range[0],
+            someAnnotation.range[1] !== someAnnotation.range[0] && ` - ${someAnnotation.range[1]}`
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            fileName,
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "extension", children: [
+              ".",
+              extension
+            ] })
+          ] }) }),
           isDownloadable && (!onRemove ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("a", { href: src, download: true, className: "download", children: downloadComponent }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "download", children: downloadComponent }))
         ] }),
         onRemove && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Button, { className: "remove", onClick: onRemove, icon: "close" })

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  isUnsavedAnnotation?: boolean\n  savedAnnotation: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  isUnsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || isUnsavedAnnotation\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation,\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', { isPreviewable, isUnsavedAnnotation })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(isUnsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          <span className=\"name\">{fileName}</span>\n        </div>\n        <span className=\"extension\">.{extension}</span>\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} download className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["useState","useDetailsPanelContext","isFilePreviewable","jsxs","Fragment","jsx","getFileSizeString","Icon","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}
+{"version":3,"file":"FileUploadCard.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = unsavedAnnotation ?? savedAnnotation\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {someAnnotation.range[0]}\n              {someAnnotation.range[1] !== someAnnotation.range[0] &&\n                ` - ${someAnnotation.range[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} download className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["useState","useDetailsPanelContext","isFilePreviewable","jsxs","Fragment","jsx","getFileSizeString","Icon","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.es.js

@@ -13,6 +13,7 @@ import "react-dom";
 import "../../../../context/pip/PiPWrapper.es.js";
 import "../../../../context/AddonProjectContext.es.js";
 import "../../../../context/AddonContext.es.js";
+import "../../../../context/PowerpackContext.es.js";
 const fileIcons = {
   // special cases
   description: ["doc"],
@@ -68,7 +69,7 @@ const FileUploadCard = ({
   name,
   mime,
   src,
-  isUnsavedAnnotation,
+  unsavedAnnotation,
   savedAnnotation,
   size,
   progress,
@@ -87,11 +88,12 @@ const FileUploadCard = ({
   const extension = nameParts.pop() || "";
   const fileName = nameParts.join(".");
   const isPreviewable = isFilePreviewable(mime || "." + extension);
-  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isUnsavedAnnotation;
+  const isImage = (mime == null ? void 0 : mime.includes("image/")) || Boolean(unsavedAnnotation);
   const downloadComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size", children: getFileSizeString(size) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "download", className: "download-icon" })
   ] });
+  const someAnnotation = unsavedAnnotation ?? savedAnnotation;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     File,
     {
@@ -99,14 +101,17 @@ const FileUploadCard = ({
         compact: isCompact,
         isDownloadable,
         isPreviewable,
-        isUnsavedAnnotation
+        isUnsavedAnnotation: Boolean(unsavedAnnotation)
       }),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           ContentWrapper,
           {
-            className: clsx("content-wrapper", { isPreviewable, isUnsavedAnnotation }),
+            className: clsx("content-wrapper", {
+              isPreviewable,
+              isUnsavedAnnotation: Boolean(unsavedAnnotation)
+            }),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: getIconForType(mime || "." + extension), className: "type-icon" }),
               isImage && src && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -114,7 +119,7 @@ const FileUploadCard = ({
                 {
                   className: clsx({
                     "image-wrapper": true,
-                    isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation
+                    isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation
                   }),
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "img",
@@ -138,7 +143,7 @@ const FileUploadCard = ({
                     onClick: onExpand
                   }
                 ),
-                (isUnsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                (unsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ExpandButton,
                   {
                     "data-tooltip": "Jump to annotation",
@@ -153,11 +158,17 @@ const FileUploadCard = ({
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Footer, { className: clsx({ inProgress, isPreviewable, isDownloadable }), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "progress", style: { right: `${100 - progress}%` } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "name", children: fileName }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "extension", children: [
-            ".",
-            extension
-          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: someAnnotation ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "draw" }),
+            someAnnotation.range[0],
+            someAnnotation.range[1] !== someAnnotation.range[0] && ` - ${someAnnotation.range[1]}`
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            fileName,
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "extension", children: [
+              ".",
+              extension
+            ] })
+          ] }) }),
           isDownloadable && (!onRemove ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: src, download: true, className: "download", children: downloadComponent }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "download", children: downloadComponent }))
         ] }),
         onRemove && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "remove", onClick: onRemove, icon: "close" })

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  isUnsavedAnnotation?: boolean\n  savedAnnotation: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  isUnsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || isUnsavedAnnotation\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation,\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', { isPreviewable, isUnsavedAnnotation })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(isUnsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          <span className=\"name\">{fileName}</span>\n        </div>\n        <span className=\"extension\">.{extension}</span>\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} download className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["jsxs","Fragment","jsx","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer"],"mappings":"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"}
+{"version":3,"file":"FileUploadCard.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = unsavedAnnotation ?? savedAnnotation\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {someAnnotation.range[0]}\n              {someAnnotation.range[1] !== someAnnotation.range[0] &&\n                ` - ${someAnnotation.range[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} download className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["jsxs","Fragment","jsx","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.cjs.js

@@ -90,6 +90,12 @@ const Footer = styled.footer`
     white-space: nowrap;
     z-index: 20;
     display: inherit;
+
+    .icon {
+      font-size: inherit;
+      margin-right: var(--padding-s);
+      vertical-align: text-top;
+    }
   }
 
   .extension {

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: inherit;\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":["Button"],"mappings":";;;;AAGO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDpB,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FtB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC9B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmC5B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWjB,MAAA,eAAe,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;"}
+{"version":3,"file":"FileUploadCard.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: inherit;\n\n    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":["Button"],"mappings":";;;;AAGO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDpB,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGtB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC9B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmC5B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWjB,MAAA,eAAe,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;"}

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.es.js

@@ -88,6 +88,12 @@ const Footer = styled.footer`
     white-space: nowrap;
     z-index: 20;
     display: inherit;
+
+    .icon {
+      font-size: inherit;
+      margin-right: var(--padding-s);
+      vertical-align: text-top;
+    }
   }
 
   .extension {

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: inherit;\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDpB,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FtB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC9B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmC5B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWjB,MAAA,eAAe,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"FileUploadCard.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: inherit;\n\n    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDpB,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGtB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC9B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmC5B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWjB,MAAA,eAAe,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/containers/Feed/components/FilesGrid/FilesGrid.cjs.js

@@ -32,11 +32,11 @@ const FilesGrid = ({
       name: file.name,
       mime: file.mime || file.type,
       size: file.size,
-      src: file.isUnsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
-      isUnsavedAnnotation: file.isUnsavedAnnotation,
+      src: file.unsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
+      unsavedAnnotation: file.unsavedAnnotation,
       savedAnnotation: file.annotation,
       progress: file.progress,
-      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : void 0,
+      onRemove: onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : void 0,
       isCompact,
       isDownloadable,
       onExpand: () => handleExpand(index),

package/dist/shared/src/containers/Feed/components/FilesGrid/FilesGrid.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilesGrid.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.isUnsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          isUnsavedAnnotation={file.isUnsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["useCallback","isFilePreviewable","Styled.Grid","jsx"],"mappings":";;;;;;;AAkBA,MAAM,YAAsC,CAAC;AAAA,EAC3C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACA,MAAA,CAAC,MAAM,OAAe,QAAA;AAE1B,QAAM,eAAeA,MAAA;AAAA,IACnB,CAAC,UAAkB;AACX,YAAA,gBAAgB,MAAM,OAAO,CAAC,SAASC,oCAAkB,KAAK,MAAM,KAAK,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,CAAC,SAAS,KAAK,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;IACpF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,0DACGC,iBAAAA,MAAA,EAAY,WAAW,KAAK,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OACvD,gBAAM,IAAI,CAAC,MAAM,UAChBC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,KAAK,MAAM,KAAK;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,MAAM,KAAK,QAAQ,KAAK;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,KACE,KAAK,sBACD,KAAK,YACL,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,MAEnD,qBAAqB,KAAK;AAAA,MAC1B,iBAAiB,KAAK;AAAA,MACtB,UAAU,KAAK;AAAA,MACf,UACE,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,mBAAmB,IAAI;AAAA,MAE5E;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,KAAK;AAAA,MAClC,UAAU,MAAM,uDAAoB;AAAA,IAAI;AAAA,IAnBnC;AAAA,EAqBR,CAAA,GACH;AAEJ;;"}
+{"version":3,"file":"FilesGrid.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.unsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          unsavedAnnotation={file.unsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["useCallback","isFilePreviewable","Styled.Grid","jsx"],"mappings":";;;;;;;AAkBA,MAAM,YAAsC,CAAC;AAAA,EAC3C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACA,MAAA,CAAC,MAAM,OAAe,QAAA;AAE1B,QAAM,eAAeA,MAAA;AAAA,IACnB,CAAC,UAAkB;AACX,YAAA,gBAAgB,MAAM,OAAO,CAAC,SAASC,oCAAkB,KAAK,MAAM,KAAK,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,CAAC,SAAS,KAAK,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;IACpF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,0DACGC,iBAAAA,MAAA,EAAY,WAAW,KAAK,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OACvD,gBAAM,IAAI,CAAC,MAAM,UAChBC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,KAAK,MAAM,KAAK;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,MAAM,KAAK,QAAQ,KAAK;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,KACE,KAAK,oBACD,KAAK,YACL,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,MAEnD,mBAAmB,KAAK;AAAA,MACxB,iBAAiB,KAAK;AAAA,MACtB,UAAU,KAAK;AAAA,MACf,UACE,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC,KAAK,iBAAiB,IAAI;AAAA,MAE5E;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,KAAK;AAAA,MAClC,UAAU,MAAM,uDAAoB;AAAA,IAAI;AAAA,IAnBnC;AAAA,EAqBR,CAAA,GACH;AAEJ;;"}

package/dist/shared/src/containers/Feed/components/FilesGrid/FilesGrid.es.js

@@ -31,11 +31,11 @@ const FilesGrid = ({
       name: file.name,
       mime: file.mime || file.type,
       size: file.size,
-      src: file.isUnsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
-      isUnsavedAnnotation: file.isUnsavedAnnotation,
+      src: file.unsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
+      unsavedAnnotation: file.unsavedAnnotation,
       savedAnnotation: file.annotation,
       progress: file.progress,
-      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : void 0,
+      onRemove: onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : void 0,
       isCompact,
       isDownloadable,
       onExpand: () => handleExpand(index),

package/dist/shared/src/containers/Feed/components/FilesGrid/FilesGrid.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilesGrid.es.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.isUnsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          isUnsavedAnnotation={file.isUnsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["Styled.Grid","jsx"],"mappings":";;;;;;AAkBA,MAAM,YAAsC,CAAC;AAAA,EAC3C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACA,MAAA,CAAC,MAAM,OAAe,QAAA;AAE1B,QAAM,eAAe;AAAA,IACnB,CAAC,UAAkB;AACX,YAAA,gBAAgB,MAAM,OAAO,CAAC,SAAS,kBAAkB,KAAK,MAAM,KAAK,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,CAAC,SAAS,KAAK,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;IACpF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,+CACGA,MAAA,EAAY,WAAW,KAAK,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OACvD,gBAAM,IAAI,CAAC,MAAM,UAChBC,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,KAAK,MAAM,KAAK;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,MAAM,KAAK,QAAQ,KAAK;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,KACE,KAAK,sBACD,KAAK,YACL,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,MAEnD,qBAAqB,KAAK;AAAA,MAC1B,iBAAiB,KAAK;AAAA,MACtB,UAAU,KAAK;AAAA,MACf,UACE,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,mBAAmB,IAAI;AAAA,MAE5E;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,KAAK;AAAA,MAClC,UAAU,MAAM,uDAAoB;AAAA,IAAI;AAAA,IAnBnC;AAAA,EAqBR,CAAA,GACH;AAEJ;"}
+{"version":3,"file":"FilesGrid.es.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.unsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          unsavedAnnotation={file.unsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["Styled.Grid","jsx"],"mappings":";;;;;;AAkBA,MAAM,YAAsC,CAAC;AAAA,EAC3C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACA,MAAA,CAAC,MAAM,OAAe,QAAA;AAE1B,QAAM,eAAe;AAAA,IACnB,CAAC,UAAkB;AACX,YAAA,gBAAgB,MAAM,OAAO,CAAC,SAAS,kBAAkB,KAAK,MAAM,KAAK,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,CAAC,SAAS,KAAK,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;IACpF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,+CACGA,MAAA,EAAY,WAAW,KAAK,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OACvD,gBAAM,IAAI,CAAC,MAAM,UAChBC,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,KAAK,MAAM,KAAK;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,MAAM,KAAK,QAAQ,KAAK;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,KACE,KAAK,oBACD,KAAK,YACL,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,MAEnD,mBAAmB,KAAK;AAAA,MACxB,iBAAiB,KAAK;AAAA,MACtB,UAAU,KAAK;AAAA,MACf,UACE,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC,KAAK,iBAAiB,IAAI;AAAA,MAE5E;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,KAAK;AAAA,MAClC,UAAU,MAAM,uDAAoB;AAAA,IAAI;AAAA,IAnBnC;AAAA,EAqBR,CAAA,GACH;AAEJ;"}

package/dist/shared/src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.cjs.js

@@ -30,6 +30,7 @@ require("../../../../../context/pip/PiPProvider.cjs.js");
 require("../../../../../context/pip/PiPWrapper.cjs.js");
 require("../../../../../context/AddonProjectContext.cjs.js");
 require("../../../../../context/AddonContext.cjs.js");
+require("../../../../../context/PowerpackContext.cjs.js");
 require("../../CommentInput/quillToMarkdown.cjs.js");
 require("../../ActivityComment/ActivityComment.styled.cjs.js");
 require("../../ActivityCheckbox/ActivityCheckbox.styled.cjs.js");