@ynput/ayon-frontend-shared 0.2.15 → 0.2.17

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewablesUpload.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n  projectName: string | null\n  versionId: string\n  productId: string | null\n  variant?: 'normal' | 'large'\n  onUpload?: () => void\n  children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  versionId,\n  productId,\n  onUpload,\n  children,\n  variant = 'normal',\n}) => {\n  const { viewer, dispatch } = useDetailsPanelContext()\n\n  const taskId = viewer?.taskId\n  const folderId = viewer?.folderId\n\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  const handleRemoveUpload = (name: string) => {\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList) => {\n    const uploadingFiles = Array.from(files).map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of files) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      {!isDraggingFile && (\n        <Styled.ReviewablesList\n          onDragEnter={() => setIsDraggingFile(true)}\n          className={clsx(variant)}\n        >\n          <>\n            {children}\n            {/* uploading items */}\n            {uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n            {/* upload button */}\n            <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n              <span>Drop or click to upload</span>\n              <input type=\"file\" multiple onChange={handleInputChange} />\n            </Styled.Upload>\n          </>\n        </Styled.ReviewablesList>\n      )}\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["useDetailsPanelContext","useState","_a","reviewablesQueries","api","toast","jsxs","Fragment","jsx","Styled.ReviewablesList","ReviewableProgressCard","Styled.Upload","Styled.Dropzone","Icon"],"mappings":"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"}
+{"version":3,"file":"ReviewablesUpload.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent, useEffect } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\n\nexport interface ReviewableUploadProps extends React.HTMLProps<HTMLDivElement> {\n  projectName: string | null\n  taskId?: string | null\n  folderId?: string | null\n  versionId?: string | null\n  productId?: string | null\n  variant?: 'normal' | 'large'\n  dispatch: any\n  pendingFiles?: Array<{ file: File; preview?: string }>\n  setPendingFiles?: React.Dispatch<React.SetStateAction<Array<{ file: File; preview?: string }>>>\n  onUpload?: () => void\n  onFilesAdded?: (files: File[]) => void\n  children?: any\n  pt?: {\n    upload?: React.HTMLProps<HTMLDivElement>\n    dropzone?: React.HTMLProps<HTMLDivElement>\n  }\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  taskId,\n  folderId,\n  versionId,\n  productId,\n  onUpload,\n  onFilesAdded,\n  children,\n  dispatch,\n  variant = 'normal',\n  pendingFiles = [],\n  setPendingFiles,\n  className,\n  pt,\n  ...props\n}) => {\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  // Check if we can upload files straight away\n  const canUpload = Boolean(versionId)\n\n  // Monitor changes to versionId to trigger pending uploads\n  useEffect(() => {\n    if (canUpload && versionId && pendingFiles.length > 0 && setPendingFiles) {\n      const files = pendingFiles.map((item) => item.file)\n      // Clear pending files for this version and revoke object URLs\n      pendingFiles.forEach((item) => {\n        if (item.preview) {\n          URL.revokeObjectURL(item.preview)\n        }\n      })\n      setPendingFiles([])\n      // Start upload\n      handleFileUpload(files)\n    }\n  }, [canUpload, versionId, pendingFiles.length])\n\n  // Helper function to check if file is an image\n  const isImageFile = (file: File) => {\n    return file.type.startsWith('image/')\n  }\n\n  // Helper function to create file items with previews\n  const createFileItems = (files: File[]) => {\n    return files.map((file) => ({\n      file,\n      preview: isImageFile(file) ? URL.createObjectURL(file) : undefined,\n    }))\n  }\n\n  const handleRemoveUpload = (name: string) => {\n    if (!versionId) return\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList | File[]) => {\n    const fileArray = Array.from(files)\n\n    // Notify parent about files being added for version extraction\n    onFilesAdded?.(fileArray)\n\n    // If we can't upload yet, store files as pending\n    if (!canUpload || !versionId) {\n      if (setPendingFiles) {\n        setPendingFiles((prev) => [...prev, ...createFileItems(fileArray)])\n      }\n      return\n    }\n\n    const uploadingFiles = fileArray.map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      if (!versionId) return\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      folderId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      taskId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      if (!versionId) return\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      if (!versionId) return () => {}\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of fileArray) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      <Styled.ReviewablesList\n        className={clsx(className, variant, { dragging: isDraggingFile })}\n        {...props}\n        onDragEnter={() => setIsDraggingFile(true)}\n      >\n        <>\n          {children}\n          {/* pending files */}\n          {!canUpload &&\n            pendingFiles?.map((item) => (\n              <ReviewableProgressCard\n                key={item.file.name}\n                name={item.file.name}\n                size={item.file.size}\n                src={item.preview}\n                type={'waiting'}\n                onRemove={() => {\n                  if (setPendingFiles) {\n                    setPendingFiles((prev) => prev.filter((f) => f.file.name !== item.file.name))\n                  }\n                }}\n              />\n            ))}\n          {/* uploading items */}\n          {versionId &&\n            uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n          {/* upload button */}\n          <Styled.Upload\n            id=\"upload\"\n            className={clsx('upload', variant)}\n            style={variantStyles}\n            {...pt?.upload}\n          >\n            <span>Drop or click to upload</span>\n            <input type=\"file\" multiple onChange={handleInputChange} />\n          </Styled.Upload>\n        </>\n      </Styled.ReviewablesList>\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n          {...pt?.dropzone}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["useState","useEffect","_a","reviewablesQueries","api","toast","jsxs","Fragment","jsx","Styled.ReviewablesList","ReviewableProgressCard","Styled.Upload","Styled.Dropzone","Icon"],"mappings":"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"}

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.es.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
 import axios from "axios";
 import { toast } from "react-toastify";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import clsx from "clsx";
 import { Icon } from "@ynput/ayon-react-components";
 import { api } from "../../api/base/client.es.js";
@@ -39,6 +39,7 @@ import "../../api/generated/users.es.js";
 import "../../api/generated/versions.es.js";
 import "../../api/generated/workfiles.es.js";
 import "../../api/generated/ynputCloud.es.js";
+import "../../api/generated/grouping.es.js";
 import "../../api/queries/actions/getActions.es.js";
 import "../../api/queries/activities/getActivities.es.js";
 import "../../api/queries/activities/updateActivities.es.js";
@@ -69,6 +70,7 @@ import "../../api/queries/users/getUsers.es.js";
 import "../../api/queries/users/updateUsers.es.js";
 import "../../api/queries/watchers/getWatchers.es.js";
 import "../../api/queries/permissions/getPermissions.es.js";
+import "../../api/queries/grouping/getGrouping.es.js";
 import "../ThumbnailSimple/ThumbnailSimple.es.js";
 import "../EmptyPlaceholder/EmptyPlaceholder.es.js";
 import "../EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
@@ -81,7 +83,7 @@ import "lodash";
 import "../../util/pubsub.es.js";
 import { ReviewablesList, Upload, Dropzone } from "./ReviewablesUpload.styled.es.js";
 import "../../context/RemoteModulesContext.es.js";
-import { useDetailsPanelContext } from "../../context/DetailsPanelContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
 import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
@@ -124,17 +126,15 @@ import "../../containers/Feed/components/ActivityGroup/ActivityGroup.styled.es.j
 import "../../containers/Feed/Feed.styled.es.js";
 import "date-fns";
 import "../../containers/ProjectTreeTable/ProjectTreeTable.es.js";
+import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
+import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
+import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/context/SelectionCellsContext.es.js";
+import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
 import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
-import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
-import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
-import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectTableModulesContext.es.js";
-import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
@@ -148,11 +148,12 @@ import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
 import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
 import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
 import "../../containers/ProjectTreeTable/widgets/LoadMoreWidget.es.js";
-import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../../../_virtual/runtime.es.js";
 import "../../../../_virtual/semver.es.js";
 import "react-redux";
 import "custom-protocol-check";
+import "../../containers/ProjectTreeTable/components/GroupSettingsFallback.es.js";
+import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../containers/DetailsPanel/FeedFilters/FeedFilters.styled.es.js";
 import "../../containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.es.js";
 import "../../containers/DetailsPanel/DetailsPanelFiles/DetailsPanelFiles.es.js";
@@ -177,21 +178,51 @@ import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
 import "../AttributeEditor/components/MinMaxField.es.js";
 import "../EnumEditor/EnumEditor.styled.es.js";
 import "../SearchFilter/filterDates.es.js";
+import "../Badge/Badge.es.js";
 const ReviewableUpload = ({
   projectName,
+  taskId,
+  folderId,
   versionId,
   productId,
   onUpload,
+  onFilesAdded,
   children,
-  variant = "normal"
+  dispatch,
+  variant = "normal",
+  pendingFiles = [],
+  setPendingFiles,
+  className,
+  pt,
+  ...props
 }) => {
   var _a;
-  const { viewer, dispatch } = useDetailsPanelContext();
-  const taskId = viewer == null ? void 0 : viewer.taskId;
-  const folderId = viewer == null ? void 0 : viewer.folderId;
   const [isDraggingFile, setIsDraggingFile] = useState(false);
   const [uploading, setUploads] = useState({});
+  const canUpload = Boolean(versionId);
+  useEffect(() => {
+    if (canUpload && versionId && pendingFiles.length > 0 && setPendingFiles) {
+      const files = pendingFiles.map((item) => item.file);
+      pendingFiles.forEach((item) => {
+        if (item.preview) {
+          URL.revokeObjectURL(item.preview);
+        }
+      });
+      setPendingFiles([]);
+      handleFileUpload(files);
+    }
+  }, [canUpload, versionId, pendingFiles.length]);
+  const isImageFile = (file) => {
+    return file.type.startsWith("image/");
+  };
+  const createFileItems = (files) => {
+    return files.map((file) => ({
+      file,
+      preview: isImageFile(file) ? URL.createObjectURL(file) : void 0
+    }));
+  };
   const handleRemoveUpload = (name) => {
+    if (!versionId) return;
     setUploads((uploads) => {
       var _a2;
       return {
@@ -201,7 +232,15 @@ const ReviewableUpload = ({
     });
   };
   const handleFileUpload = async (files) => {
-    const uploadingFiles = Array.from(files).map((file) => ({
+    const fileArray = Array.from(files);
+    onFilesAdded == null ? void 0 : onFilesAdded(fileArray);
+    if (!canUpload || !versionId) {
+      if (setPendingFiles) {
+        setPendingFiles((prev) => [...prev, ...createFileItems(fileArray)]);
+      }
+      return;
+    }
+    const uploadingFiles = fileArray.map((file) => ({
       name: file.name,
       size: file.size,
       progress: 0
@@ -209,6 +248,7 @@ const ReviewableUpload = ({
     const newUploadsForVersion = [...uploading[versionId] || [], ...uploadingFiles];
     setUploads({ ...uploading, [versionId]: newUploadsForVersion });
     const successHandler = (file) => (response) => {
+      if (!versionId) return;
       console.log(`Upload successful for ${file.name}`);
       const data = response.data;
       if (!projectName) return;
@@ -227,11 +267,12 @@ const ReviewableUpload = ({
       );
       productId && dispatch(api.util.invalidateTags([{ type: "viewer", id: productId }]));
       dispatch(api.util.invalidateTags([{ type: "viewer", id: versionId }]));
-      dispatch(api.util.invalidateTags([{ type: "viewer", id: folderId }]));
-      dispatch(api.util.invalidateTags([{ type: "viewer", id: taskId }]));
+      folderId && dispatch(api.util.invalidateTags([{ type: "viewer", id: folderId }]));
+      taskId && dispatch(api.util.invalidateTags([{ type: "viewer", id: taskId }]));
       handleRemoveUpload(file.name);
     };
     const errorHandler = (file) => (error) => {
+      if (!versionId) return;
       console.error(`Upload failed for ${file.name}: ${error}`);
       toast.error(`Failed to upload file: ${file.name}`);
       setUploads((uploads) => {
@@ -250,6 +291,8 @@ const ReviewableUpload = ({
       });
     };
     const progressHandler = (file) => {
+      if (!versionId) return () => {
+      };
       return (progressEvent) => setUploads((uploads) => {
         const currentUploads = uploads[versionId] || [];
         const updatedUploads = currentUploads.map((upload) => {
@@ -266,7 +309,7 @@ const ReviewableUpload = ({
       });
     };
     try {
-      for (const file of files) {
+      for (const file of fileArray) {
         const autoLabel = file.name.split(".").slice(0, -1).join(".");
         const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`;
         const headers = { "content-type": file.type, "x-file-name": file.name };
@@ -294,14 +337,30 @@ const ReviewableUpload = ({
   };
   const variantStyles = variant === "large" ? { minWidth: "360px", maxWidth: "480px", alignSelf: "center" } : {};
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    !isDraggingFile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
       ReviewablesList,
       {
+        className: clsx(className, variant, { dragging: isDraggingFile }),
+        ...props,
         onDragEnter: () => setIsDraggingFile(true),
-        className: clsx(variant),
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           children,
-          (_a = uploading[versionId]) == null ? void 0 : _a.map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          !canUpload && (pendingFiles == null ? void 0 : pendingFiles.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ReviewableProgressCard,
+            {
+              name: item.file.name,
+              size: item.file.size,
+              src: item.preview,
+              type: "waiting",
+              onRemove: () => {
+                if (setPendingFiles) {
+                  setPendingFiles((prev) => prev.filter((f) => f.file.name !== item.file.name));
+                }
+              }
+            },
+            item.file.name
+          ))),
+          versionId && ((_a = uploading[versionId]) == null ? void 0 : _a.map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             ReviewableProgressCard,
             {
               ...file,
@@ -309,11 +368,20 @@ const ReviewableUpload = ({
               onRemove: () => handleRemoveUpload(file.name)
             },
             file.name
-          )),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Upload, { id: "upload", className: clsx("upload", variant), style: variantStyles, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Drop or click to upload" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "file", multiple: true, onChange: handleInputChange })
-          ] })
+          ))),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Upload,
+            {
+              id: "upload",
+              className: clsx("upload", variant),
+              style: variantStyles,
+              ...pt == null ? void 0 : pt.upload,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Drop or click to upload" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "file", multiple: true, onChange: handleInputChange })
+              ]
+            }
+          )
         ] })
       }
     ),
@@ -323,6 +391,7 @@ const ReviewableUpload = ({
         onDragOver: (e) => e.preventDefault(),
         onDragLeave: () => setIsDraggingFile(false),
         onDrop: handleFileDrop,
+        ...pt == null ? void 0 : pt.dropzone,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "upload" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Upload reviewable" })

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewablesUpload.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n  projectName: string | null\n  versionId: string\n  productId: string | null\n  variant?: 'normal' | 'large'\n  onUpload?: () => void\n  children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  versionId,\n  productId,\n  onUpload,\n  children,\n  variant = 'normal',\n}) => {\n  const { viewer, dispatch } = useDetailsPanelContext()\n\n  const taskId = viewer?.taskId\n  const folderId = viewer?.folderId\n\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  const handleRemoveUpload = (name: string) => {\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList) => {\n    const uploadingFiles = Array.from(files).map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of files) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      {!isDraggingFile && (\n        <Styled.ReviewablesList\n          onDragEnter={() => setIsDraggingFile(true)}\n          className={clsx(variant)}\n        >\n          <>\n            {children}\n            {/* uploading items */}\n            {uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n            {/* upload button */}\n            <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n              <span>Drop or click to upload</span>\n              <input type=\"file\" multiple onChange={handleInputChange} />\n            </Styled.Upload>\n          </>\n        </Styled.ReviewablesList>\n      )}\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["_a","reviewablesQueries","jsxs","Fragment","jsx","Styled.ReviewablesList","Styled.Upload","Styled.Dropzone"],"mappings":"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"}
+{"version":3,"file":"ReviewablesUpload.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent, useEffect } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\n\nexport interface ReviewableUploadProps extends React.HTMLProps<HTMLDivElement> {\n  projectName: string | null\n  taskId?: string | null\n  folderId?: string | null\n  versionId?: string | null\n  productId?: string | null\n  variant?: 'normal' | 'large'\n  dispatch: any\n  pendingFiles?: Array<{ file: File; preview?: string }>\n  setPendingFiles?: React.Dispatch<React.SetStateAction<Array<{ file: File; preview?: string }>>>\n  onUpload?: () => void\n  onFilesAdded?: (files: File[]) => void\n  children?: any\n  pt?: {\n    upload?: React.HTMLProps<HTMLDivElement>\n    dropzone?: React.HTMLProps<HTMLDivElement>\n  }\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  taskId,\n  folderId,\n  versionId,\n  productId,\n  onUpload,\n  onFilesAdded,\n  children,\n  dispatch,\n  variant = 'normal',\n  pendingFiles = [],\n  setPendingFiles,\n  className,\n  pt,\n  ...props\n}) => {\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  // Check if we can upload files straight away\n  const canUpload = Boolean(versionId)\n\n  // Monitor changes to versionId to trigger pending uploads\n  useEffect(() => {\n    if (canUpload && versionId && pendingFiles.length > 0 && setPendingFiles) {\n      const files = pendingFiles.map((item) => item.file)\n      // Clear pending files for this version and revoke object URLs\n      pendingFiles.forEach((item) => {\n        if (item.preview) {\n          URL.revokeObjectURL(item.preview)\n        }\n      })\n      setPendingFiles([])\n      // Start upload\n      handleFileUpload(files)\n    }\n  }, [canUpload, versionId, pendingFiles.length])\n\n  // Helper function to check if file is an image\n  const isImageFile = (file: File) => {\n    return file.type.startsWith('image/')\n  }\n\n  // Helper function to create file items with previews\n  const createFileItems = (files: File[]) => {\n    return files.map((file) => ({\n      file,\n      preview: isImageFile(file) ? URL.createObjectURL(file) : undefined,\n    }))\n  }\n\n  const handleRemoveUpload = (name: string) => {\n    if (!versionId) return\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList | File[]) => {\n    const fileArray = Array.from(files)\n\n    // Notify parent about files being added for version extraction\n    onFilesAdded?.(fileArray)\n\n    // If we can't upload yet, store files as pending\n    if (!canUpload || !versionId) {\n      if (setPendingFiles) {\n        setPendingFiles((prev) => [...prev, ...createFileItems(fileArray)])\n      }\n      return\n    }\n\n    const uploadingFiles = fileArray.map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      if (!versionId) return\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      folderId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      taskId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      if (!versionId) return\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      if (!versionId) return () => {}\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of fileArray) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      <Styled.ReviewablesList\n        className={clsx(className, variant, { dragging: isDraggingFile })}\n        {...props}\n        onDragEnter={() => setIsDraggingFile(true)}\n      >\n        <>\n          {children}\n          {/* pending files */}\n          {!canUpload &&\n            pendingFiles?.map((item) => (\n              <ReviewableProgressCard\n                key={item.file.name}\n                name={item.file.name}\n                size={item.file.size}\n                src={item.preview}\n                type={'waiting'}\n                onRemove={() => {\n                  if (setPendingFiles) {\n                    setPendingFiles((prev) => prev.filter((f) => f.file.name !== item.file.name))\n                  }\n                }}\n              />\n            ))}\n          {/* uploading items */}\n          {versionId &&\n            uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n          {/* upload button */}\n          <Styled.Upload\n            id=\"upload\"\n            className={clsx('upload', variant)}\n            style={variantStyles}\n            {...pt?.upload}\n          >\n            <span>Drop or click to upload</span>\n            <input type=\"file\" multiple onChange={handleInputChange} />\n          </Styled.Upload>\n        </>\n      </Styled.ReviewablesList>\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n          {...pt?.dropzone}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["_a","reviewablesQueries","jsxs","Fragment","jsx","Styled.ReviewablesList","Styled.Upload","Styled.Dropzone"],"mappings":"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"}

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.styled.cjs.js

@@ -14,6 +14,10 @@ const ReviewablesList = styled.div`
     padding: 0 25%;
     padding-bottom: 30%;
   }
+
+  &.dragging {
+    opacity: 0;
+  }
 `;
 const Upload = styled.div`
   position: relative;

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewablesUpload.styled.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.styled.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ReviewablesList = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  min-height: 100%;\n  padding-bottom: var(--padding-m);\n  width: 100%;\n  height: 100%;\n  &.large {\n    justify-content: center;\n    padding: 0 25%;\n    padding-bottom: 30%;\n  }\n`\n\nexport const Upload = styled.div`\n  position: relative;\n  min-height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  background-color: var(--md-sys-color-surface-container-low);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline-variant);\n  color: var(--md-sys-color-outline-variant);\n  &.large {\n    height: 80px;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n    border-color: var(--md-sys-color-outline);\n    color: var(--md-sys-color-outline);\n  }\n\n  input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: var(--padding-s);\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline);\n\n  display: flex;\n  gap: var(--base-gap-large);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n\n  & > * {\n    user-select: none;\n    pointer-events: none;\n  }\n  .icon {\n    font-size: 32px;\n  }\n`\n"],"names":[],"mappings":";;;AAEO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe/B,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;AA+BtB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"ReviewablesUpload.styled.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.styled.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ReviewablesList = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  min-height: 100%;\n  padding-bottom: var(--padding-m);\n  width: 100%;\n  height: 100%;\n  &.large {\n    justify-content: center;\n    padding: 0 25%;\n    padding-bottom: 30%;\n  }\n\n  &.dragging {\n    opacity: 0;\n  }\n`\n\nexport const Upload = styled.div`\n  position: relative;\n  min-height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  background-color: var(--md-sys-color-surface-container-low);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline-variant);\n  color: var(--md-sys-color-outline-variant);\n  &.large {\n    height: 80px;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n    border-color: var(--md-sys-color-outline);\n    color: var(--md-sys-color-outline);\n  }\n\n  input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: var(--padding-s);\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline);\n\n  display: flex;\n  gap: var(--base-gap-large);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n\n  & > * {\n    user-select: none;\n    pointer-events: none;\n  }\n  .icon {\n    font-size: 32px;\n  }\n`\n"],"names":[],"mappings":";;;AAEO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB/B,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;AA+BtB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.styled.es.js

@@ -12,6 +12,10 @@ const ReviewablesList = styled.div`
     padding: 0 25%;
     padding-bottom: 30%;
   }
+
+  &.dragging {
+    opacity: 0;
+  }
 `;
 const Upload = styled.div`
   position: relative;

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewablesUpload.styled.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.styled.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ReviewablesList = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  min-height: 100%;\n  padding-bottom: var(--padding-m);\n  width: 100%;\n  height: 100%;\n  &.large {\n    justify-content: center;\n    padding: 0 25%;\n    padding-bottom: 30%;\n  }\n`\n\nexport const Upload = styled.div`\n  position: relative;\n  min-height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  background-color: var(--md-sys-color-surface-container-low);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline-variant);\n  color: var(--md-sys-color-outline-variant);\n  &.large {\n    height: 80px;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n    border-color: var(--md-sys-color-outline);\n    color: var(--md-sys-color-outline);\n  }\n\n  input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: var(--padding-s);\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline);\n\n  display: flex;\n  gap: var(--base-gap-large);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n\n  & > * {\n    user-select: none;\n    pointer-events: none;\n  }\n  .icon {\n    font-size: 32px;\n  }\n`\n"],"names":[],"mappings":";AAEO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe/B,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;AA+BtB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"ReviewablesUpload.styled.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.styled.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ReviewablesList = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  min-height: 100%;\n  padding-bottom: var(--padding-m);\n  width: 100%;\n  height: 100%;\n  &.large {\n    justify-content: center;\n    padding: 0 25%;\n    padding-bottom: 30%;\n  }\n\n  &.dragging {\n    opacity: 0;\n  }\n`\n\nexport const Upload = styled.div`\n  position: relative;\n  min-height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  background-color: var(--md-sys-color-surface-container-low);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline-variant);\n  color: var(--md-sys-color-outline-variant);\n  &.large {\n    height: 80px;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n    border-color: var(--md-sys-color-outline);\n    color: var(--md-sys-color-outline);\n  }\n\n  input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: var(--padding-s);\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  border-radius: var(--border-radius-xxl);\n  border: 2px dashed var(--md-sys-color-outline);\n\n  display: flex;\n  gap: var(--base-gap-large);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n\n  & > * {\n    user-select: none;\n    pointer-events: none;\n  }\n  .icon {\n    font-size: 32px;\n  }\n`\n"],"names":[],"mappings":";AAEO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB/B,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;AA+BtB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.cjs.js

@@ -43,6 +43,7 @@ require("../../api/generated/users.cjs.js");
 require("../../api/generated/versions.cjs.js");
 require("../../api/generated/workfiles.cjs.js");
 require("../../api/generated/ynputCloud.cjs.js");
+require("../../api/generated/grouping.cjs.js");
 require("../../api/queries/actions/getActions.cjs.js");
 require("../../api/queries/activities/getActivities.cjs.js");
 require("../../api/queries/activities/updateActivities.cjs.js");
@@ -73,6 +74,7 @@ require("../../api/queries/users/getUsers.cjs.js");
 require("../../api/queries/users/updateUsers.cjs.js");
 require("../../api/queries/watchers/getWatchers.cjs.js");
 require("../../api/queries/permissions/getPermissions.cjs.js");
+require("../../api/queries/grouping/getGrouping.cjs.js");
 require("react");
 require("@dnd-kit/core");
 require("./ReviewablesList.styled.cjs.js");
@@ -126,17 +128,15 @@ require("../../containers/Feed/components/ActivityGroup/ActivityGroup.styled.cjs
 require("../../containers/Feed/Feed.styled.cjs.js");
 require("date-fns");
 require("../../containers/ProjectTreeTable/ProjectTreeTable.cjs.js");
+require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
+require("@tanstack/react-table");
 require("../../containers/ProjectTreeTable/context/SelectionCellsContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectTableContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/SelectedRowsContext.cjs.js");
-require("../../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js");
-require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
-require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
-require("../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectDataContext.cjs.js");
-require("../../containers/ProjectTreeTable/context/ProjectTableModulesContext.cjs.js");
-require("@tanstack/react-table");
 require("../../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js");
@@ -150,11 +150,12 @@ require("../../containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
 require("../../containers/ProjectTreeTable/components/SelectionCell.cjs.js");
 require("../../containers/ProjectTreeTable/components/RowSelectionHeader.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/LoadMoreWidget.cjs.js");
-require("../../containers/DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../../../../_virtual/runtime.cjs.js");
 require("../../../../_virtual/semver.cjs.js");
 require("react-redux");
 require("custom-protocol-check");
+require("../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");
+require("../../containers/DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../../containers/DetailsPanel/FeedFilters/FeedFilters.styled.cjs.js");
 require("../../containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js");
 require("../../containers/DetailsPanel/DetailsPanelFiles/DetailsPanelFiles.cjs.js");
@@ -179,6 +180,7 @@ require("../SettingsPanel/SettingsPanelItemTemplate.cjs.js");
 require("../AttributeEditor/components/MinMaxField.cjs.js");
 require("../EnumEditor/EnumEditor.styled.cjs.js");
 require("../SearchFilter/filterDates.cjs.js");
+require("../Badge/Badge.cjs.js");
 const SortableReviewableCard = ({ ...props }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({
     id: props.fileId,

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableReviewableCard.cjs.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["useSortable","CSS","jsx","ReviewableCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAeA,qBAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,cAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGC,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,2BAAA,kBAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;;"}
+{"version":3,"file":"SortableReviewableCard.cjs.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["useSortable","CSS","jsx","ReviewableCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAeA,qBAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,cAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGC,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,2BAAA,kBAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;;"}

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.es.js

@@ -42,6 +42,7 @@ import "../../api/generated/users.es.js";
 import "../../api/generated/versions.es.js";
 import "../../api/generated/workfiles.es.js";
 import "../../api/generated/ynputCloud.es.js";
+import "../../api/generated/grouping.es.js";
 import "../../api/queries/actions/getActions.es.js";
 import "../../api/queries/activities/getActivities.es.js";
 import "../../api/queries/activities/updateActivities.es.js";
@@ -72,6 +73,7 @@ import "../../api/queries/users/getUsers.es.js";
 import "../../api/queries/users/updateUsers.es.js";
 import "../../api/queries/watchers/getWatchers.es.js";
 import "../../api/queries/permissions/getPermissions.es.js";
+import "../../api/queries/grouping/getGrouping.es.js";
 import "react";
 import "@dnd-kit/core";
 import "./ReviewablesList.styled.es.js";
@@ -125,17 +127,15 @@ import "../../containers/Feed/components/ActivityGroup/ActivityGroup.styled.es.j
 import "../../containers/Feed/Feed.styled.es.js";
 import "date-fns";
 import "../../containers/ProjectTreeTable/ProjectTreeTable.es.js";
+import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
+import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
+import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/context/SelectionCellsContext.es.js";
+import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
 import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
-import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
-import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
-import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectTableModulesContext.es.js";
-import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
@@ -149,11 +149,12 @@ import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
 import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
 import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
 import "../../containers/ProjectTreeTable/widgets/LoadMoreWidget.es.js";
-import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../../../_virtual/runtime.es.js";
 import "../../../../_virtual/semver.es.js";
 import "react-redux";
 import "custom-protocol-check";
+import "../../containers/ProjectTreeTable/components/GroupSettingsFallback.es.js";
+import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../containers/DetailsPanel/FeedFilters/FeedFilters.styled.es.js";
 import "../../containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.es.js";
 import "../../containers/DetailsPanel/DetailsPanelFiles/DetailsPanelFiles.es.js";
@@ -178,6 +179,7 @@ import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
 import "../AttributeEditor/components/MinMaxField.es.js";
 import "../EnumEditor/EnumEditor.styled.es.js";
 import "../SearchFilter/filterDates.es.js";
+import "../Badge/Badge.es.js";
 const SortableReviewableCard = ({ ...props }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: props.fileId,

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableReviewableCard.es.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAe,YAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGA,kCAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}
+{"version":3,"file":"SortableReviewableCard.es.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAe,YAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGA,kCAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}

package/dist/shared/src/components/SearchFilter/useBuildFilterOptions.cjs.js

@@ -41,6 +41,7 @@ require("../../api/generated/users.cjs.js");
 require("../../api/generated/versions.cjs.js");
 require("../../api/generated/workfiles.cjs.js");
 require("../../api/generated/ynputCloud.cjs.js");
+require("../../api/generated/grouping.cjs.js");
 require("../../api/queries/actions/getActions.cjs.js");
 require("../../api/queries/activities/getActivities.cjs.js");
 require("../../api/queries/activities/updateActivities.cjs.js");
@@ -71,6 +72,7 @@ require("../../api/queries/users/getUsers.cjs.js");
 require("../../api/queries/users/updateUsers.cjs.js");
 require("../../api/queries/watchers/getWatchers.cjs.js");
 require("../../api/queries/permissions/getPermissions.cjs.js");
+require("../../api/queries/grouping/getGrouping.cjs.js");
 const ayonReactComponents = require("@ynput/ayon-react-components");
 const filterDates = require("./filterDates.cjs.js");
 const useBuildFilterOptions = ({