npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.9 → 0.2.11 - Mend

@ynput/ayon-frontend-shared 0.2.9 → 0.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (180) hide show

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
 const styled = require("styled-components");
 const File = styled.div`
   position: relative;
@@ -47,17 +48,6 @@ const File = styled.div`
   .download-icon {
     color: var(--md-sys-color-outline);
   }
-  .expand-icon {
-    pointer-events: none;
-    position: absolute;
-    /* center */
-    left: 50%;
-    bottom: calc(50% - 20px);
-    transform: translate(-50%, -50%);
-    display: none;
-  }
 `;
 const Footer = styled.footer`
   background-color: var(--md-sys-color-surface-container-low);
@@ -171,20 +161,24 @@ const ContentWrapper = styled.div`
   }
   /* previewable styles (it can be expanded) */
-  /* on hover it shows the expand icon */
+  /* on hover it shows the expand buttons */
   &.isPreviewable,
-  &.isAnnotation {
+  &.isUnsavedAnnotation {
     cursor: pointer;
     &:hover {
-      .expand-icon {
-        display: block;
+      .expand-buttons {
+        display: flex;
       }
       .type-icon {
         display: none;
       }
     }
   }
+  &:hover .image-wrapper::after {
+    opacity: 0.8;
+  }
 `;
 const ImageWrapper = styled.div`
   position: absolute;
@@ -213,10 +207,6 @@ const ImageWrapper = styled.div`
   &.isDownloadable {
     &:hover {
-      &::after {
-        opacity: 0.8;
-      }
       .icon {
         display: block;
         z-index: 10;
@@ -224,7 +214,31 @@ const ImageWrapper = styled.div`
     }
   }
 `;
+const Buttons = styled.div`
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: none;
+  height: calc(100% - 20px);
+  width: 100%;
+  gap: 0;
+`;
+const ExpandButton = styled(ayonReactComponents.Button)`
+  height: 100%;
+  width: 100%;
+  border: none;
+  opacity: 0.5;
+  transition: opacity 250ms;
+  &:hover {
+    background: none;
+    opacity: 1;
+  }
+`;
+exports.Buttons = Buttons;
 exports.ContentWrapper = ContentWrapper;
+exports.ExpandButton = ExpandButton;
 exports.File = File;
 exports.Footer = Footer;
 exports.ImageWrapper = ImageWrapper;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileUploadCard.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import 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 .expand-icon {\n pointer-events: none;\n position: absolute;\n / center /\n left: 50%;\n bottom: calc(50% - 20px);\n transform: translate(-50%, -50%);\n\n display: none;\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 ~~icon~~ */\n &.isPreviewable,\n &.~~isAnnotation~~ {\n cursor: pointer;\n\n &:hover {\n .expand-~~icon~~ {\n display: ~~block~~;\n }\n .type-icon {\n display: none;\n }\n }\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 ~~&::after~~ {\n ~~opacity~~: ~~0.8~~;\n }\n\n ~~.icon {~~\n display: ~~block~~;\n z-~~index~~: 10;\n }\n }\n }\n`\n"],"names":[],"mappings":"~~;;;AAEO~~,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA2DpB,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;~~AAkC9B,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;AAAA;AAAA;AAAA;AAAA~~;;;;;~~"}
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;;;;;;;"}

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

@@ -1,3 +1,4 @@
+import { Button } from "@ynput/ayon-react-components";
 import styled from "styled-components";
 const File = styled.div`
   position: relative;
@@ -45,17 +46,6 @@ const File = styled.div`
   .download-icon {
     color: var(--md-sys-color-outline);
   }
-  .expand-icon {
-    pointer-events: none;
-    position: absolute;
-    /* center */
-    left: 50%;
-    bottom: calc(50% - 20px);
-    transform: translate(-50%, -50%);
-    display: none;
-  }
 `;
 const Footer = styled.footer`
   background-color: var(--md-sys-color-surface-container-low);
@@ -169,20 +159,24 @@ const ContentWrapper = styled.div`
   }
   /* previewable styles (it can be expanded) */
-  /* on hover it shows the expand icon */
+  /* on hover it shows the expand buttons */
   &.isPreviewable,
-  &.isAnnotation {
+  &.isUnsavedAnnotation {
     cursor: pointer;
     &:hover {
-      .expand-icon {
-        display: block;
+      .expand-buttons {
+        display: flex;
       }
       .type-icon {
         display: none;
       }
     }
   }
+  &:hover .image-wrapper::after {
+    opacity: 0.8;
+  }
 `;
 const ImageWrapper = styled.div`
   position: absolute;
@@ -211,10 +205,6 @@ const ImageWrapper = styled.div`
   &.isDownloadable {
     &:hover {
-      &::after {
-        opacity: 0.8;
-      }
       .icon {
         display: block;
         z-index: 10;
@@ -222,8 +212,32 @@ const ImageWrapper = styled.div`
     }
   }
 `;
+const Buttons = styled.div`
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: none;
+  height: calc(100% - 20px);
+  width: 100%;
+  gap: 0;
+`;
+const ExpandButton = styled(Button)`
+  height: 100%;
+  width: 100%;
+  border: none;
+  opacity: 0.5;
+  transition: opacity 250ms;
+  &:hover {
+    background: none;
+    opacity: 1;
+  }
+`;
 export {
+  Buttons,
   ContentWrapper,
+  ExpandButton,
   File,
   Footer,
   ImageWrapper

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileUploadCard.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import 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 .expand-icon {\n pointer-events: none;\n position: absolute;\n / center /\n left: 50%;\n bottom: calc(50% - 20px);\n transform: translate(-50%, -50%);\n\n display: none;\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 ~~icon~~ */\n &.isPreviewable,\n &.~~isAnnotation~~ {\n cursor: pointer;\n\n &:hover {\n .expand-~~icon~~ {\n display: ~~block~~;\n }\n .type-icon {\n display: none;\n }\n }\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 ~~&::after~~ {\n ~~opacity~~: ~~0.8~~;\n }\n\n ~~.icon {~~\n display: ~~block~~;\n z-~~index~~: 10;\n }\n }\n }\n`\n"],"names":[],"mappings":"~~;AAEO~~,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA2DpB,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;~~AAkC9B,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;AAAA;AAAA;AAAA;AAAA;"}
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;"}

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

@@ -4,6 +4,7 @@ const FilesGrid_styled = require("./FilesGrid.styled.cjs.js");
 const clsx = require("clsx");
 const FileUploadCard = require("../FileUploadCard/FileUploadCard.cjs.js");
 const FileUploadPreview = require("../FileUploadPreview/FileUploadPreview.cjs.js");
+const React = require("react");
 const FilesGrid = ({
   files = [],
   activityId,
@@ -16,15 +17,14 @@ const FilesGrid = ({
   ...props
 }) => {
   if (!files.length) return null;
-  const handleExpand = (file, index) => {
-    if (file.isAnnotation) {
-      onAnnotationClick == null ? void 0 : onAnnotationClick(file);
-    } else {
-      const filteredFiles = files.filter((file2) => FileUploadPreview.isFilePreviewable(file2.mime, file2.ext));
-      const updatedIndex = filteredFiles.findIndex((file2) => file2.id === files[index].id);
+  const handleExpand = React.useCallback(
+    (index) => {
+      const filteredFiles = files.filter((file) => FileUploadPreview.isFilePreviewable(file.mime, file.ext));
+      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id);
       onExpand == null ? void 0 : onExpand({ files: filteredFiles, index: updatedIndex, activityId: activityId || "" });
-    }
-  };
+    },
+    [onExpand]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(FilesGrid_styled.Grid, { className: clsx({ compact: isCompact }), ...props, children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     FileUploadCard,
     {
@@ -32,13 +32,15 @@ const FilesGrid = ({
       name: file.name,
       mime: file.mime || file.type,
       size: file.size,
-      src: file.isAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
-      isAnnotation: file.isAnnotation,
+      src: file.isUnsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
+      isUnsavedAnnotation: file.isUnsavedAnnotation,
+      savedAnnotation: file.annotation,
       progress: file.progress,
-      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isAnnotation) : void 0,
+      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : void 0,
       isCompact,
       isDownloadable,
-      onExpand: () => handleExpand(file, index)
+      onExpand: () => handleExpand(index),
+      onJumpTo: () => onAnnotationClick == null ? void 0 : onAnnotationClick(file)
     },
     index
   )) });

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

	@@ -1 +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'\n\nexport interface FilesGridProps {\n files?: any[]\n activityId?: string\n isCompact?: boolean\n onRemove?: (id: string, name: string, ~~isAnnotation~~: 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 = (~~file: any,~~ index: number) => {\n ~~if (file.isAnnotation) {\n~~ ~~onAnnotationClick?.(file)\n } else {\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 }\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={file.~~isAnnotation~~ ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`}\n ~~isAnnotation~~={file.~~isAnnotation~~}\n progress={file.progress}\n onRemove={onRemove ? () => onRemove(file.id, file.name, file.~~isAnnotation~~) : undefined}\n isCompact={isCompact}\n isDownloadable={isDownloadable}\n onExpand={() => handleExpand(~~file,~~ index)}\n />\n ))}\n </Styled.Grid>\n )\n}\n\nexport default FilesGrid\n"],"names":["~~file~~","isFilePreviewable","Styled.Grid","jsx"],"mappings":"~~;;;;;;AAiBA~~,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;~~AAEpB~~,~~QAAA~~,~~eAAe~~,~~CAAC,MAAW,UAAkB~~;~~AACjD~~,~~QAAI~~,~~KAAK~~,~~cAAc~~;~~AACrB~~,~~6DAAoB;AAAA,IAAI,OACnB;AACC,~~YAAA,gBAAgB,MAAM,OAAO,~~CAACA~~,~~UAASC~~,~~oCAAkBD~~,~~MAAK~~,~~MAAMA~~,~~MAAK~~,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,~~CAACA~~,~~UAASA~~,~~MAAK~~,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;~~IAAI~~;AAAA,~~EAE1F~~;AAEA,~~0DACGE~~,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,~~KAAK~~,KAAK,~~eAAe~~,KAAK,~~YAAY~~,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,~~MACvF~~,~~cAAc~~,KAAK;AAAA,~~MACnB~~,UAAU,KAAK;AAAA,MACf,~~UAAU~~,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,~~YAAY~~,IAAI;AAAA,~~MAC7E~~;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,MAAM,~~KAAK~~;AAAA,~~IAAA~~;AAAA,~~IAXnC~~;AAAA,~~EAaR~~,CAAA,GACH;AAEJ;;"}
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;;"}

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

@@ -3,6 +3,7 @@ import { Grid } from "./FilesGrid.styled.es.js";
 import clsx from "clsx";
 import FileUploadCard from "../FileUploadCard/FileUploadCard.es.js";
 import { isFilePreviewable } from "../FileUploadPreview/FileUploadPreview.es.js";
+import { useCallback } from "react";
 const FilesGrid = ({
   files = [],
   activityId,
@@ -15,15 +16,14 @@ const FilesGrid = ({
   ...props
 }) => {
   if (!files.length) return null;
-  const handleExpand = (file, index) => {
-    if (file.isAnnotation) {
-      onAnnotationClick == null ? void 0 : onAnnotationClick(file);
-    } else {
-      const filteredFiles = files.filter((file2) => isFilePreviewable(file2.mime, file2.ext));
-      const updatedIndex = filteredFiles.findIndex((file2) => file2.id === files[index].id);
+  const handleExpand = useCallback(
+    (index) => {
+      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext));
+      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id);
       onExpand == null ? void 0 : onExpand({ files: filteredFiles, index: updatedIndex, activityId: activityId || "" });
-    }
-  };
+    },
+    [onExpand]
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { className: clsx({ compact: isCompact }), ...props, children: files.map((file, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     FileUploadCard,
     {
@@ -31,13 +31,15 @@ const FilesGrid = ({
       name: file.name,
       mime: file.mime || file.type,
       size: file.size,
-      src: file.isAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
-      isAnnotation: file.isAnnotation,
+      src: file.isUnsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
+      isUnsavedAnnotation: file.isUnsavedAnnotation,
+      savedAnnotation: file.annotation,
       progress: file.progress,
-      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isAnnotation) : void 0,
+      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : void 0,
       isCompact,
       isDownloadable,
-      onExpand: () => handleExpand(file, index)
+      onExpand: () => handleExpand(index),
+      onJumpTo: () => onAnnotationClick == null ? void 0 : onAnnotationClick(file)
     },
     index
   )) });

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

	@@ -1 +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'\n\nexport interface FilesGridProps {\n files?: any[]\n activityId?: string\n isCompact?: boolean\n onRemove?: (id: string, name: string, ~~isAnnotation~~: 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 = (~~file: any,~~ index: number) => {\n ~~if (file.isAnnotation) {\n~~ ~~onAnnotationClick?.(file)\n } else {\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 }\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={file.~~isAnnotation~~ ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`}\n ~~isAnnotation~~={file.~~isAnnotation~~}\n progress={file.progress}\n onRemove={onRemove ? () => onRemove(file.id, file.name, file.~~isAnnotation~~) : undefined}\n isCompact={isCompact}\n isDownloadable={isDownloadable}\n onExpand={() => handleExpand(~~file,~~ index)}\n />\n ))}\n </Styled.Grid>\n )\n}\n\nexport default FilesGrid\n"],"names":["~~file","~~Styled.Grid","jsx"],"mappings":"~~;;;;;AAiBA~~,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;~~AAEpB~~,~~QAAA~~,eAAe,CAAC,~~MAAW,~~UAAkB;~~AACjD~~,~~QAAI,KAAK,cAAc;AACrB,6DAAoB;AAAA,IAAI,OACnB;AACC,~~YAAA,gBAAgB,MAAM,OAAO,~~CAACA~~,~~UAAS~~,~~kBAAkBA~~,~~MAAK~~,~~MAAMA~~,~~MAAK~~,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,~~CAACA~~,~~UAASA~~,~~MAAK~~,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;~~IAAI~~;AAAA,~~EAE1F~~;AAEA,+~~CACGC~~,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,~~KAAK~~,KAAK,~~eAAe~~,KAAK,~~YAAY~~,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,~~MACvF~~,~~cAAc~~,KAAK;AAAA,~~MACnB~~,UAAU,KAAK;AAAA,MACf,~~UAAU~~,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,~~YAAY~~,IAAI;AAAA,~~MAC7E~~;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,MAAM,~~KAAK~~;AAAA,~~IAAA~~;AAAA,~~IAXnC~~;AAAA,~~EAaR~~,CAAA,GACH;AAEJ;"}
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;"}

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

@@ -22,6 +22,14 @@ require("../../CommentInput/CommentInput.cjs.js");
 require("../../ReactionContainer/Reactions.styled.cjs.js");
 require("../../FilesGrid/FilesGrid.styled.cjs.js");
 require("../../FileUploadCard/FileUploadCard.styled.cjs.js");
+require("../../../../../context/RemoteModulesContext.cjs.js");
+require("../../../../../context/DetailsPanelContext.cjs.js");
+require("../../../../../context/ThumbnailUploaderContext.cjs.js");
+require("../../../../../context/SettingsPanelContext.cjs.js");
+require("../../../../../context/pip/PiPProvider.cjs.js");
+require("../../../../../context/pip/PiPWrapper.cjs.js");
+require("../../../../../context/AddonProjectContext.cjs.js");
+require("../../../../../context/AddonContext.cjs.js");
 require("../../CommentInput/quillToMarkdown.cjs.js");
 require("../../ActivityComment/ActivityComment.styled.cjs.js");
 require("../../ActivityCheckbox/ActivityCheckbox.styled.cjs.js");
@@ -34,14 +42,6 @@ require("../../ActivityStatusChange/ActivityStatusChange.styled.cjs.js");
 require("../../ActivityAssigneeChange/ActivityAssigneeChange.styled.cjs.js");
 require("../../ActivityVersions/ActivityVersions.styled.cjs.js");
 require("../../ActivityGroup/ActivityGroup.styled.cjs.js");
-require("../../../../../context/RemoteModulesContext.cjs.js");
-require("../../../../../context/DetailsPanelContext.cjs.js");
-require("../../../../../context/ThumbnailUploaderContext.cjs.js");
-require("../../../../../context/SettingsPanelContext.cjs.js");
-require("../../../../../context/pip/PiPProvider.cjs.js");
-require("../../../../../context/pip/PiPWrapper.cjs.js");
-require("../../../../../context/AddonProjectContext.cjs.js");
-require("../../../../../context/AddonContext.cjs.js");
 require("../../../Feed.styled.cjs.js");
 require("date-fns");
 require("../../../../../components/EmptyPlaceholder/EmptyPlaceholder.cjs.js");

package/dist/shared/src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.es.js CHANGED Viewed

@@ -21,6 +21,14 @@ import "../../CommentInput/CommentInput.es.js";
 import "../../ReactionContainer/Reactions.styled.es.js";
 import "../../FilesGrid/FilesGrid.styled.es.js";
 import "../../FileUploadCard/FileUploadCard.styled.es.js";
+import "../../../../../context/RemoteModulesContext.es.js";
+import "../../../../../context/DetailsPanelContext.es.js";
+import "../../../../../context/ThumbnailUploaderContext.es.js";
+import "../../../../../context/SettingsPanelContext.es.js";
+import "../../../../../context/pip/PiPProvider.es.js";
+import "../../../../../context/pip/PiPWrapper.es.js";
+import "../../../../../context/AddonProjectContext.es.js";
+import "../../../../../context/AddonContext.es.js";
 import "../../CommentInput/quillToMarkdown.es.js";
 import "../../ActivityComment/ActivityComment.styled.es.js";
 import "../../ActivityCheckbox/ActivityCheckbox.styled.es.js";
@@ -33,14 +41,6 @@ import "../../ActivityStatusChange/ActivityStatusChange.styled.es.js";
 import "../../ActivityAssigneeChange/ActivityAssigneeChange.styled.es.js";
 import "../../ActivityVersions/ActivityVersions.styled.es.js";
 import "../../ActivityGroup/ActivityGroup.styled.es.js";
-import "../../../../../context/RemoteModulesContext.es.js";
-import "../../../../../context/DetailsPanelContext.es.js";
-import "../../../../../context/ThumbnailUploaderContext.es.js";
-import "../../../../../context/SettingsPanelContext.es.js";
-import "../../../../../context/pip/PiPProvider.es.js";
-import "../../../../../context/pip/PiPWrapper.es.js";
-import "../../../../../context/AddonProjectContext.es.js";
-import "../../../../../context/AddonContext.es.js";
 import "../../../Feed.styled.es.js";
 import "date-fns";
 import "../../../../../components/EmptyPlaceholder/EmptyPlaceholder.es.js";

package/dist/shared/src/containers/Feed/helpers/mergeAnnotationAttachments.cjs.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+const mergeAnnotationAttachments = (activities) => {
+  return activities.map((activity) => {
+    var _a;
+    if (activity.activityType !== "comment" || !((_a = activity.activityData) == null ? void 0 : _a.annotations)) return activity;
+    const files = activity.files.map((file) => {
+      const annotation = activity.activityData.annotations.find(
+        (annotation2) => annotation2.composite === file.id || annotation2.transparent === file.id
+      );
+      if (annotation.transparent === file.id) return null;
+      return { ...file, annotation };
+    }).filter(Boolean);
+    const newActivity = { ...activity, files };
+    return newActivity;
+  });
+};
+module.exports = mergeAnnotationAttachments;
+//# sourceMappingURL=mergeAnnotationAttachments.cjs.js.map

package/dist/shared/src/containers/Feed/helpers/mergeAnnotationAttachments.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mergeAnnotationAttachments.cjs.js","sources":["../../../../../../src/containers/Feed/helpers/mergeAnnotationAttachments.ts"],"sourcesContent":["import { SavedAnnotationMetadata } from '../../index'\n\nexport default (activities: any[]) => {\n return activities.map((activity) => {\n if (activity.activityType !== 'comment' || !activity.activityData?.annotations) return activity\n\n const files = activity.files\n .map((file: any) => {\n // look for an annotation that is using this file\n const annotation = activity.activityData.annotations.find(\n (annotation: SavedAnnotationMetadata) =>\n annotation.composite === file.id || annotation.transparent === file.id,\n )\n\n // if the file is the transparent version of the annotation, ignore it\n if (annotation.transparent === file.id) return null\n\n return { ...file, annotation }\n })\n .filter(Boolean)\n\n const newActivity = { ...activity, files }\n return newActivity\n })\n}\n"],"names":["annotation"],"mappings":";AAEA,MAAe,6BAAA,CAAC,eAAsB;AAC7B,SAAA,WAAW,IAAI,CAAC,aAAa;;AAClC,QAAI,SAAS,iBAAiB,aAAa,GAAC,cAAS,iBAAT,mBAAuB,aAAoB,QAAA;AAEvF,UAAM,QAAQ,SAAS,MACpB,IAAI,CAAC,SAAc;AAEZ,YAAA,aAAa,SAAS,aAAa,YAAY;AAAA,QACnD,CAACA,gBACCA,YAAW,cAAc,KAAK,MAAMA,YAAW,gBAAgB,KAAK;AAAA,MACxE;AAGA,UAAI,WAAW,gBAAgB,KAAK,GAAW,QAAA;AAExC,aAAA,EAAE,GAAG,MAAM,WAAW;AAAA,IAAA,CAC9B,EACA,OAAO,OAAO;AAEjB,UAAM,cAAc,EAAE,GAAG,UAAU,MAAM;AAClC,WAAA;AAAA,EAAA,CACR;AACH;;"}

package/dist/shared/src/containers/Feed/helpers/mergeAnnotationAttachments.es.js ADDED Viewed

@@ -0,0 +1,19 @@
+const mergeAnnotationAttachments = (activities) => {
+  return activities.map((activity) => {
+    var _a;
+    if (activity.activityType !== "comment" || !((_a = activity.activityData) == null ? void 0 : _a.annotations)) return activity;
+    const files = activity.files.map((file) => {
+      const annotation = activity.activityData.annotations.find(
+        (annotation2) => annotation2.composite === file.id || annotation2.transparent === file.id
+      );
+      if (annotation.transparent === file.id) return null;
+      return { ...file, annotation };
+    }).filter(Boolean);
+    const newActivity = { ...activity, files };
+    return newActivity;
+  });
+};
+export {
+  mergeAnnotationAttachments as default
+};
+//# sourceMappingURL=mergeAnnotationAttachments.es.js.map

package/dist/shared/src/containers/Feed/helpers/mergeAnnotationAttachments.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mergeAnnotationAttachments.es.js","sources":["../../../../../../src/containers/Feed/helpers/mergeAnnotationAttachments.ts"],"sourcesContent":["import { SavedAnnotationMetadata } from '../../index'\n\nexport default (activities: any[]) => {\n return activities.map((activity) => {\n if (activity.activityType !== 'comment' || !activity.activityData?.annotations) return activity\n\n const files = activity.files\n .map((file: any) => {\n // look for an annotation that is using this file\n const annotation = activity.activityData.annotations.find(\n (annotation: SavedAnnotationMetadata) =>\n annotation.composite === file.id || annotation.transparent === file.id,\n )\n\n // if the file is the transparent version of the annotation, ignore it\n if (annotation.transparent === file.id) return null\n\n return { ...file, annotation }\n })\n .filter(Boolean)\n\n const newActivity = { ...activity, files }\n return newActivity\n })\n}\n"],"names":["annotation"],"mappings":"AAEA,MAAe,6BAAA,CAAC,eAAsB;AAC7B,SAAA,WAAW,IAAI,CAAC,aAAa;AADtC;AAEI,QAAI,SAAS,iBAAiB,aAAa,GAAC,cAAS,iBAAT,mBAAuB,aAAoB,QAAA;AAEvF,UAAM,QAAQ,SAAS,MACpB,IAAI,CAAC,SAAc;AAEZ,YAAA,aAAa,SAAS,aAAa,YAAY;AAAA,QACnD,CAACA,gBACCA,YAAW,cAAc,KAAK,MAAMA,YAAW,gBAAgB,KAAK;AAAA,MACxE;AAGA,UAAI,WAAW,gBAAgB,KAAK,GAAW,QAAA;AAExC,aAAA,EAAE,GAAG,MAAM,WAAW;AAAA,IAAA,CAC9B,EACA,OAAO,OAAO;AAEjB,UAAM,cAAc,EAAE,GAAG,UAAU,MAAM;AAClC,WAAA;AAAA,EAAA,CACR;AACH;"}

package/dist/shared/src/containers/Feed/hooks/useCommentMutations.cjs.js CHANGED Viewed

@@ -50,7 +50,7 @@ const useCommentMutations = ({
     return patch;
   };
   const getActivityId = () => v1().replace(/-/g, "");
-  const submitComment = async (value, files = []) => {
+  const submitComment = async (value, files = [], data = {}) => {
     const promises = entities.map(({ id: entityId, subTitle }) => {
       const newId = getActivityId();
       const fileIds = files.map((file) => file.id);
@@ -58,9 +58,18 @@ const useCommentMutations = ({
         body: value,
         activityType: "comment",
         id: newId,
-        files: fileIds
+        files: fileIds,
+        data
       };
-      const patch = createPatch({ entityId, newId, subTitle, value, files });
+      const optimisticFiles = files.filter(
+        ({ id }) => {
+          var _a;
+          return !((_a = data.annotations) == null ? void 0 : _a.some(
+            (annotation) => annotation.transparent === id
+          ));
+        }
+      );
+      const patch = createPatch({ entityId, newId, subTitle, value, files: optimisticFiles });
       const argsForCachingMatching = { entityIds, activityTypes };
       return createEntityActivity({
         projectName,

package/dist/shared/src/containers/Feed/hooks/useCommentMutations.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCommentMutations.cjs.js","sources":["../../../../../../src/containers/Feed/hooks/useCommentMutations.ts"],"sourcesContent":["import { v1 as uuid1 } from 'uuid'\nimport { formatISO } from 'date-fns'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../context/FeedContext'\n\n// Type definitions\ninterface Entity {\n id: string\n subTitle?: string\n}\n\ninterface File {\n id: string\n [key: string]: any\n}\n\nexport interface Activity {\n activityId: string\n entityId: string\n body: string\n files: File[]\n [key: string]: any\n}\n\ninterface CommentPatch {\n body: string\n activityType: string\n activityId: string\n entityId: string\n referenceType: string\n authorName: string\n authorFullName?: string\n createdAt: string\n files: File[]\n reactions: any[]\n origin: {\n id: string\n type: string\n name?: string\n }\n author: {\n active: boolean\n deleted: boolean\n }\n}\n\ninterface CommentMutationsProps {\n projectName: string\n entityType: string\n entities: Entity[]\n filter: any\n}\n\ninterface CommentPayload {\n entityId: string\n newId: string\n subTitle?: string\n value: string\n files?: File[]\n}\n\n// does the body have a checklist anywhere in it\n// * [ ] or * [x]\nexport const bodyHasChecklist = (body: string): boolean => {\n return body.includes('* [ ]') \|\| body.includes('* [x]')\n}\n\nconst useCommentMutations = ({\n projectName,\n entityType,\n entities = [],\n filter,\n}: CommentMutationsProps) => {\n const {\n createEntityActivity,\n updateActivity,\n deleteActivity,\n isUpdatingActivity,\n userName,\n userFullName,\n activityTypes,\n } = useFeedContext()\n const entityIds = entities.map((entity) => entity.id)\n\n const createPatch = ({\n entityId,\n newId,\n subTitle,\n value,\n files = [],\n }: CommentPayload): CommentPatch => {\n const patch: CommentPatch = {\n body: value,\n activityType: 'comment',\n activityId: newId,\n entityId: entityId,\n referenceType: 'origin',\n authorName: userName,\n authorFullName: userFullName,\n createdAt: formatISO(new Date()),\n files: files,\n reactions: [],\n origin: {\n id: '8090c2dafcc811eeaf820242c0a80002',\n type: entityType,\n name: subTitle,\n },\n author: {\n active: true,\n deleted: false,\n },\n }\n\n return patch\n }\n\n const getActivityId = (): string => uuid1().replace(/-/g, '')\n\n const submitComment = async (value: string, files: File[] = []): Promise<void> => {\n // map over all the entities and create a new comment for each\n let patchId: string \| null = null\n const promises = entities.map(({ id: entityId, subTitle }) => {\n const newId = getActivityId()\n if (!patchId) patchId = newId\n const fileIds = files.map((file) => file.id)\n\n const newComment = {\n body: value,\n activityType: 'comment',\n id: newId,\n files: fileIds,\n }\n\n // create a new patch for optimistic update\n const patch = createPatch({ entityId, newId, subTitle, value, files })\n\n // we only need these args to update the cache of the original query\n const argsForCachingMatching = { entityIds, activityTypes }\n\n return createEntityActivity({\n projectName,\n entityType,\n entityId,\n data: newComment,\n patch,\n filter,\n ...argsForCachingMatching,\n })\n })\n\n await Promise.all(promises)\n }\n\n const updateComment = async (\n activity: Activity,\n value: string,\n files: File[] = [],\n ): Promise<void> => {\n const fileIds = files.map((file) => file.id)\n\n const updatedActivity = {\n body: value,\n files: fileIds,\n }\n\n const patch = {\n ...activity,\n ...updatedActivity,\n files,\n }\n\n // we only need these args to update the cache of the original query\n const argsForCachingMatching = { entityType, entityIds, activityTypes }\n\n try {\n await updateActivity({\n projectName,\n data: updatedActivity,\n activityId: activity.activityId,\n entityId: activity.entityId,\n patch,\n filter,\n ...argsForCachingMatching,\n })\n } catch (error: any) {\n console.error(error)\n toast.error(error?.data?.detail)\n // so higher level can detect the error\n throw error\n }\n }\n\n const deleteComment = async (id: string, entityId: string, refs: any[] = []): Promise<void> => {\n // we only need these args to update the cache of the original query\n const argsForCachingMatching = { entityType, entityIds, activityTypes }\n\n if (!id) return\n\n try {\n await deleteActivity({\n projectName,\n activityId: id,\n entityId,\n filter,\n patch: { activityId: id },\n refs,\n ...argsForCachingMatching,\n })\n } catch (error) {\n // error is handled in the mutation\n }\n }\n\n return {\n submitComment,\n updateComment,\n deleteComment,\n isSaving: isUpdatingActivity,\n }\n}\n\nexport default useCommentMutations\n"],"names":["useFeedContext","formatISO","uuid1","toast"],"mappings":";;;;;~~AAmEA~~,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACF,MAA6B;AACrB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACEA,2BAAe;AACnB,QAAM,YAAY,SAAS,IAAI,CAAC,WAAW,OAAO,EAAE;AAEpD,QAAM,cAAc,CAAC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,CAAA;AAAA,EAAC,MACyB;AAClC,UAAM,QAAsB;AAAA,MAC1B,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY;AAAA,MACZ;AAAA,MACA,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAWC,QAAAA,UAAc,oBAAA,MAAM;AAAA,MAC/B;AAAA,MACA,WAAW,CAAC;AAAA,MACZ,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,MAAA;AAAA,IAEb;AAEO,WAAA;AAAA,EACT;AAEA,QAAM,gBAAgB,MAAcC,GAAA,EAAQ,QAAQ,MAAM,EAAE;~~AAE5D~~,~~QAAM~~,gBAAgB,~~OAAO~~,~~OAAe~~,QAAgB,~~CAAA~~,~~MAAsB~~;~~AAG1E~~,UAAA,WAAW,SAAS,IAAI,CAAC,EAAE,IAAI,UAAU,eAAe;AAC5D,YAAM,QAAQ,cAAc;AAE5B,YAAM,UAAU,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE;AAE3C,YAAM,aAAa;AAAA,QACjB,MAAM;AAAA,QACN,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,OAAO;AAAA,~~MACT~~;AAGM,YAAA,QAAQ,YAAY,EAAE,UAAU,OAAO,UAAU,OAAO,OAAO;~~AAG/D~~,YAAA,yBAAyB,EAAE,WAAW,cAAc;AAE1D,aAAO,qBAAqB;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA,CACF;AAEK,UAAA,QAAQ,IAAI,QAAQ;AAAA,EAC5B;AAEA,QAAM,gBAAgB,OACpB,UACA,OACA,QAAgB,CAAA,MACE;;AAClB,UAAM,UAAU,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE;AAE3C,UAAM,kBAAkB;AAAA,MACtB,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAEA,UAAM,QAAQ;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,IACF;AAGA,UAAM,yBAAyB,EAAE,YAAY,WAAW,cAAc;AAElE,QAAA;AACF,YAAM,eAAe;AAAA,QACnB;AAAA,QACA,MAAM;AAAA,QACN,YAAY,SAAS;AAAA,QACrB,UAAU,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,aACM,OAAY;AACnB,cAAQ,MAAM,KAAK;AACbC,oBAAAA,MAAA,OAAM,oCAAO,SAAP,mBAAa,MAAM;AAEzB,YAAA;AAAA,IAAA;AAAA,EAEV;AAEA,QAAM,gBAAgB,OAAO,IAAY,UAAkB,OAAc,CAAA,MAAsB;AAE7F,UAAM,yBAAyB,EAAE,YAAY,WAAW,cAAc;AAEtE,QAAI,CAAC,GAAI;AAEL,QAAA;AACF,YAAM,eAAe;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,OAAO,EAAE,YAAY,GAAG;AAAA,QACxB;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,aACM,OAAO;AAAA,IAAA;AAAA,EAGlB;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ;AACF;;"}
1	+ {"version":3,"file":"useCommentMutations.cjs.js","sources":["../../../../../../src/containers/Feed/hooks/useCommentMutations.ts"],"sourcesContent":["import { v1 as uuid1 } from 'uuid'\nimport { formatISO } from 'date-fns'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../context/FeedContext'\nimport { SavedAnnotationMetadata } from '..'\n\n// Type definitions\ninterface Entity {\n id: string\n subTitle?: string\n}\n\ninterface File {\n id: string\n [key: string]: any\n}\n\nexport interface Activity {\n activityId: string\n entityId: string\n body: string\n files: File[]\n [key: string]: any\n}\n\ninterface CommentPatch {\n body: string\n activityType: string\n activityId: string\n entityId: string\n referenceType: string\n authorName: string\n authorFullName?: string\n createdAt: string\n files: File[]\n reactions: any[]\n origin: {\n id: string\n type: string\n name?: string\n }\n author: {\n active: boolean\n deleted: boolean\n }\n}\n\ninterface CommentMutationsProps {\n projectName: string\n entityType: string\n entities: Entity[]\n filter: any\n}\n\ninterface CommentPayload {\n entityId: string\n newId: string\n subTitle?: string\n value: string\n files?: File[]\n}\n\n// does the body have a checklist anywhere in it\n// * [ ] or * [x]\nexport const bodyHasChecklist = (body: string): boolean => {\n return body.includes('* [ ]') \|\| body.includes('* [x]')\n}\n\nconst useCommentMutations = ({\n projectName,\n entityType,\n entities = [],\n filter,\n}: CommentMutationsProps) => {\n const {\n createEntityActivity,\n updateActivity,\n deleteActivity,\n isUpdatingActivity,\n userName,\n userFullName,\n activityTypes,\n } = useFeedContext()\n const entityIds = entities.map((entity) => entity.id)\n\n const createPatch = ({\n entityId,\n newId,\n subTitle,\n value,\n files = [],\n }: CommentPayload): CommentPatch => {\n const patch: CommentPatch = {\n body: value,\n activityType: 'comment',\n activityId: newId,\n entityId: entityId,\n referenceType: 'origin',\n authorName: userName,\n authorFullName: userFullName,\n createdAt: formatISO(new Date()),\n files: files,\n reactions: [],\n origin: {\n id: '8090c2dafcc811eeaf820242c0a80002',\n type: entityType,\n name: subTitle,\n },\n author: {\n active: true,\n deleted: false,\n },\n }\n\n return patch\n }\n\n const getActivityId = (): string => uuid1().replace(/-/g, '')\n\n const submitComment = async (\n value: string,\n files: File[] = [],\n data: any = {},\n ): Promise<void> => {\n // map over all the entities and create a new comment for each\n let patchId: string \| null = null\n const promises = entities.map(({ id: entityId, subTitle }) => {\n const newId = getActivityId()\n if (!patchId) patchId = newId\n const fileIds = files.map((file) => file.id)\n\n const newComment = {\n body: value,\n activityType: 'comment',\n id: newId,\n files: fileIds,\n data,\n }\n\n // filter out files which are transparent versions of an annotation\n const optimisticFiles = files.filter(\n ({ id }) =>\n !data.annotations?.some(\n (annotation: SavedAnnotationMetadata) => annotation.transparent === id,\n ),\n )\n\n // create a new patch for optimistic update\n const patch = createPatch({ entityId, newId, subTitle, value, files: optimisticFiles })\n\n // we only need these args to update the cache of the original query\n const argsForCachingMatching = { entityIds, activityTypes }\n\n return createEntityActivity({\n projectName,\n entityType,\n entityId,\n data: newComment,\n patch,\n filter,\n ...argsForCachingMatching,\n })\n })\n\n await Promise.all(promises)\n }\n\n const updateComment = async (\n activity: Activity,\n value: string,\n files: File[] = [],\n ): Promise<void> => {\n const fileIds = files.map((file) => file.id)\n\n const updatedActivity = {\n body: value,\n files: fileIds,\n }\n\n const patch = {\n ...activity,\n ...updatedActivity,\n files,\n }\n\n // we only need these args to update the cache of the original query\n const argsForCachingMatching = { entityType, entityIds, activityTypes }\n\n try {\n await updateActivity({\n projectName,\n data: updatedActivity,\n activityId: activity.activityId,\n entityId: activity.entityId,\n patch,\n filter,\n ...argsForCachingMatching,\n })\n } catch (error: any) {\n console.error(error)\n toast.error(error?.data?.detail)\n // so higher level can detect the error\n throw error\n }\n }\n\n const deleteComment = async (id: string, entityId: string, refs: any[] = []): Promise<void> => {\n // we only need these args to update the cache of the original query\n const argsForCachingMatching = { entityType, entityIds, activityTypes }\n\n if (!id) return\n\n try {\n await deleteActivity({\n projectName,\n activityId: id,\n entityId,\n filter,\n patch: { activityId: id },\n refs,\n ...argsForCachingMatching,\n })\n } catch (error) {\n // error is handled in the mutation\n }\n }\n\n return {\n submitComment,\n updateComment,\n deleteComment,\n isSaving: isUpdatingActivity,\n }\n}\n\nexport default useCommentMutations\n"],"names":["useFeedContext","formatISO","uuid1","toast"],"mappings":";;;;;AAoEA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACF,MAA6B;AACrB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACEA,2BAAe;AACnB,QAAM,YAAY,SAAS,IAAI,CAAC,WAAW,OAAO,EAAE;AAEpD,QAAM,cAAc,CAAC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,CAAA;AAAA,EAAC,MACyB;AAClC,UAAM,QAAsB;AAAA,MAC1B,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY;AAAA,MACZ;AAAA,MACA,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAWC,QAAAA,UAAc,oBAAA,MAAM;AAAA,MAC/B;AAAA,MACA,WAAW,CAAC;AAAA,MACZ,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,MAAA;AAAA,IAEb;AAEO,WAAA;AAAA,EACT;AAEA,QAAM,gBAAgB,MAAcC,GAAA,EAAQ,QAAQ,MAAM,EAAE;AAEtD,QAAA,gBAAgB,OACpB,OACA,QAAgB,CAChB,GAAA,OAAY,OACM;AAGZ,UAAA,WAAW,SAAS,IAAI,CAAC,EAAE,IAAI,UAAU,eAAe;AAC5D,YAAM,QAAQ,cAAc;AAE5B,YAAM,UAAU,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE;AAE3C,YAAM,aAAa;AAAA,QACjB,MAAM;AAAA,QACN,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,OAAO;AAAA,QACP;AAAA,MACF;AAGA,YAAM,kBAAkB,MAAM;AAAA,QAC5B,CAAC,EAAE,GACD,MAAA;;AAAA,oBAAC,UAAK,gBAAL,mBAAkB;AAAA,YACjB,CAAC,eAAwC,WAAW,gBAAgB;AAAA;AAAA;AAAA,MAE1E;AAGM,YAAA,QAAQ,YAAY,EAAE,UAAU,OAAO,UAAU,OAAO,OAAO,iBAAiB;AAGhF,YAAA,yBAAyB,EAAE,WAAW,cAAc;AAE1D,aAAO,qBAAqB;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA,CACF;AAEK,UAAA,QAAQ,IAAI,QAAQ;AAAA,EAC5B;AAEA,QAAM,gBAAgB,OACpB,UACA,OACA,QAAgB,CAAA,MACE;;AAClB,UAAM,UAAU,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE;AAE3C,UAAM,kBAAkB;AAAA,MACtB,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAEA,UAAM,QAAQ;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,IACF;AAGA,UAAM,yBAAyB,EAAE,YAAY,WAAW,cAAc;AAElE,QAAA;AACF,YAAM,eAAe;AAAA,QACnB;AAAA,QACA,MAAM;AAAA,QACN,YAAY,SAAS;AAAA,QACrB,UAAU,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,aACM,OAAY;AACnB,cAAQ,MAAM,KAAK;AACbC,oBAAAA,MAAA,OAAM,oCAAO,SAAP,mBAAa,MAAM;AAEzB,YAAA;AAAA,IAAA;AAAA,EAEV;AAEA,QAAM,gBAAgB,OAAO,IAAY,UAAkB,OAAc,CAAA,MAAsB;AAE7F,UAAM,yBAAyB,EAAE,YAAY,WAAW,cAAc;AAEtE,QAAI,CAAC,GAAI;AAEL,QAAA;AACF,YAAM,eAAe;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,OAAO,EAAE,YAAY,GAAG;AAAA,QACxB;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,aACM,OAAO;AAAA,IAAA;AAAA,EAGlB;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ;AACF;;"}

package/dist/shared/src/containers/Feed/hooks/useCommentMutations.es.js CHANGED Viewed

@@ -49,7 +49,7 @@ const useCommentMutations = ({
     return patch;
   };
   const getActivityId = () => v1().replace(/-/g, "");
-  const submitComment = async (value, files = []) => {
+  const submitComment = async (value, files = [], data = {}) => {
     const promises = entities.map(({ id: entityId, subTitle }) => {
       const newId = getActivityId();
       const fileIds = files.map((file) => file.id);
@@ -57,9 +57,18 @@ const useCommentMutations = ({
         body: value,
         activityType: "comment",
         id: newId,
-        files: fileIds
+        files: fileIds,
+        data
       };
-      const patch = createPatch({ entityId, newId, subTitle, value, files });
+      const optimisticFiles = files.filter(
+        ({ id }) => {
+          var _a;
+          return !((_a = data.annotations) == null ? void 0 : _a.some(
+            (annotation) => annotation.transparent === id
+          ));
+        }
+      );
+      const patch = createPatch({ entityId, newId, subTitle, value, files: optimisticFiles });
       const argsForCachingMatching = { entityIds, activityTypes };
       return createEntityActivity({
         projectName,