@ynput/ayon-frontend-shared 0.2.29 → 0.2.30

package/dist/shared/src/components/EntityPanelUploader/EntityPanelUploader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPanelUploader.es.js","sources":["../../../../../src/components/EntityPanelUploader/EntityPanelUploader.tsx"],"sourcesContent":["import { ChangeEvent, useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { ThumbnailWrapper } from '@shared/containers'\nimport {\n  useCreateVersionMutation,\n  useUpdateEntitiesMutation,\n  useCreateProductMutation,\n} from '@shared/api'\nimport * as Styled from './EntityPanelUploader.styled'\nimport { ThumbnailUploadProvider } from '../../context/ThumbnailUploaderContext'\nimport Dropzone, { DropzoneType } from './Dropzone'\nimport axios from 'axios'\nimport { toast } from 'react-toastify'\nimport { useReviewablesUpload } from '../ReviewablesList'\nimport { useDetailsPanelContext } from '@shared/context'\nimport EntityPanelUploaderDialog from './EntityPanelUploaderDialog'\nimport {\n  sanitizeProductName,\n  createProductHelper,\n  createVersionHelper,\n  getNextVersionNumber,\n  handleUploadError,\n} from '@shared/util'\n\ntype Operation = {\n  id: string\n  projectName: string\n  currentAssignees: any[]\n  data: { updatedAt: string }\n}\nexport type EntityPanelUploaderProps = {\n  entityType: string\n  entities: any[]\n  projectName: any\n  children?: JSX.Element | JSX.Element[]\n  onUploaded?: (operations: Operation[]) => void\n  resetFileUploadState?: () => void\n  onVersionCreated?: (versionId: string) => void\n}\n\ntype UploadType = 'thumbnail' | 'version'\nconst dropZones: (DropzoneType & { id: UploadType })[] = [\n  { id: 'thumbnail', label: 'Upload thumbnail', icon: 'add_photo_alternate' },\n  { id: 'version', label: 'Upload version', icon: 'layers' },\n]\n\nexport const EntityPanelUploader = ({\n  children = [],\n  entityType,\n  entities = [],\n  projectName,\n  onUploaded,\n  onVersionCreated,\n}: EntityPanelUploaderProps) => {\n  const { dispatch } = useDetailsPanelContext()\n  // Dragging and dropping state\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [draggingZone, setDraggingZone] = useState<UploadType | null>(null)\n  const dragCounterRef = useRef(0)\n\n  // Uploading state\n  const [uploadingType, setUploadingType] = useState<UploadType | null>(null)\n  const [progress, setProgress] = useState(0)\n\n  // Dialog state for product creation\n  const [showProductDialog, setShowProductDialog] = useState(false)\n  const [pendingFiles, setPendingFiles] = useState<FileList | null>(null)\n\n  // Check if we have exactly one entity selected\n  const singleEntity = entities.length === 1 ? entities[0] : null\n  // extra all entity IDs for the single version entity\n  const taskId: string | undefined = singleEntity?.task?.id\n  const folderId: string | undefined = singleEntity?.folder?.id\n  const productId: string | undefined = singleEntity?.product?.id\n  const versionId: string | undefined = singleEntity?.id\n  const canUploadVersions = Boolean(singleEntity && entityType !== 'representation')\n\n  // Use the custom hook for reviewable upload logic (only when single version)\n  const { handleFileUpload: uploadReviewableFiles } = useReviewablesUpload({\n    projectName,\n    versionId: versionId,\n    taskId: taskId,\n    folderId: folderId,\n    productId: productId,\n    dispatch,\n    onUpload: () => {\n      setUploadingType(null)\n      setProgress(0)\n    },\n    onProgress: (progress) => {\n      setProgress(progress)\n    },\n  })\n\n  // Filter drop zones based on whether we can upload reviewables\n  const availableDropZones = dropZones.filter((zone) => {\n    if (zone.id === 'version') {\n      return canUploadVersions\n    }\n    return true\n  })\n\n  const resetState = () => {\n    setUploadingType(null)\n    setIsDraggingFile(false)\n    setDraggingZone(null)\n    dragCounterRef.current = 0\n    setProgress(0)\n    setShowProductDialog(false)\n    setPendingFiles(null)\n  }\n\n  // Handle dialog submission - create product and upload version\n  const handleDialogSubmit = async (productName: string) => {\n    if (!pendingFiles || !singleEntity) {\n      setShowProductDialog(false)\n      setPendingFiles(null)\n      return\n    }\n\n    const sanitizedName = sanitizeProductName(productName)\n\n    if (!sanitizedName.trim()) {\n      toast.error(\n        'Product name must contain valid characters (letters, numbers, underscore, or hyphen)',\n      )\n      return\n    }\n\n    try {\n      if (!folderId) {\n        throw new Error('Folder ID is required to create a product')\n      }\n      setUploadingType('version')\n\n      // Create the product\n      const productRes = await createProductHelper(createProduct, projectName, {\n        folderId: folderId,\n        name: sanitizedName,\n        productType: 'review', // default product type for uploaded files\n      })\n\n      // Close dialog and proceed with version upload\n      setShowProductDialog(false)\n      await uploadVersionWithProduct(pendingFiles, productRes.id)\n      setPendingFiles(null)\n    } catch (error: any) {\n      handleUploadError(error, 'creating product')\n      resetState()\n    }\n  }\n\n  // Handle dialog cancellation\n  const handleDialogCancel = () => {\n    setShowProductDialog(false)\n    setPendingFiles(null)\n    resetState()\n  }\n\n  const [createVersion] = useCreateVersionMutation()\n  const [createProduct] = useCreateProductMutation()\n  // Handle version/reviewable file upload\n  const handleVersionUpload = async (files: FileList) => {\n    if (!canUploadVersions || !singleEntity) {\n      toast.error('Please select exactly one version to upload reviewables')\n      return resetState()\n    }\n\n    const productId = singleEntity.product?.id\n    if (!productId) {\n      // Show dialog to create product first\n      setPendingFiles(files)\n      setShowProductDialog(true)\n      return\n    }\n\n    // If we have a productId, proceed with upload\n    await uploadVersionWithProduct(files, productId)\n  }\n\n  // Helper function to handle the actual version upload\n  const uploadVersionWithProduct = async (files: FileList, productId: string) => {\n    try {\n      const nextVersion = getNextVersionNumber(singleEntity!.product?.latestVersion)\n\n      // create a new version\n      const versionRes = await createVersionHelper(createVersion, projectName, {\n        productId,\n        taskId, // previous version could have a taskId or we are uploading on a task\n        version: nextVersion,\n      })\n\n      await uploadReviewableFiles(files, versionRes.id)\n      // The hook handles success callbacks, just reset our local state\n      resetState()\n\n      // update entity panel to focus the new version\n      onVersionCreated?.(versionRes.id)\n    } catch (error: any) {\n      handleUploadError(error, 'uploading version')\n      resetState()\n    }\n  }\n\n  // once the file has been uploaded, we need to patch the entities with the new thumbnail\n  const handleThumbnailFileUploaded = async (thumbnails: any[] = []) => {\n    // always set isDragginle to false\n    setIsDraggingFile(false)\n\n    // check something was actually uploaded\n    if (!entities.length) {\n      return\n    }\n\n    // patching the updatedAt will force a refresh of the thumbnail url\n    const newUpdatedAt = new Date().toISOString()\n\n    let operations: Operation[] = []\n    let versionPatches = []\n\n    for (const entity of thumbnails) {\n      const entityToPatch = entities.find((e) => e.id === entity.id)\n      if (!entityToPatch) continue\n      const thumbnailId = entity.thumbnailId\n      const currentAssignees = entity.users || []\n\n      operations.push({\n        id: entityToPatch.id,\n        projectName: entityToPatch.projectName,\n        data: { updatedAt: newUpdatedAt },\n        currentAssignees,\n      })\n\n      const versionPatch = {\n        productId: entityToPatch.productId,\n        versionUpdatedAt: newUpdatedAt,\n        versionThumbnailId: thumbnailId,\n      }\n\n      versionPatches.push(versionPatch)\n    }\n\n    try {\n      await updateEntities({ operations, entityType })\n      onUploaded && onUploaded(operations)\n    } catch (error) {\n      console.error('Error uploading thumbnail:', error)\n    }\n  }\n\n  const handleUploadThumbnail = async (file: File) => {\n    if (!file) return resetState()\n\n    try {\n      // check file is an image\n      if (!file.type.includes('image')) {\n        throw new Error('File is not an image')\n      }\n\n      let promises = []\n      for (const entity of entities) {\n        const { id, entityType, projectName } = entity\n\n        if (!projectName) throw new Error('Project name is required')\n\n        const promise = axios.post(\n          projectName && `/api/projects/${projectName}/${entityType}s/${id}/thumbnail`,\n          file,\n          {\n            onUploadProgress: (e) => {\n              setProgress(Math.round((100 * e.loaded) / (e.total || file.size)))\n            },\n            headers: {\n              'Content-Type': file.type,\n            },\n          },\n        )\n\n        promises.push(promise)\n      }\n\n      const res = await Promise.all(promises)\n\n      const updatedEntities = res.map((res, i) => ({\n        thumbnailId: res.data.id as string,\n        id: entities[i].id,\n      }))\n\n      handleThumbnailFileUploaded(updatedEntities)\n      resetState()\n    } catch (error: any) {\n      console.error(error)\n      toast.error(error.message)\n      resetState()\n    }\n  }\n\n  const [updateEntities] = useUpdateEntitiesMutation()\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    dragCounterRef.current++\n    if (dragCounterRef.current === 1) {\n      setIsDraggingFile(true)\n    }\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    e.preventDefault()\n    dragCounterRef.current--\n    if (dragCounterRef.current === 0) {\n      setIsDraggingFile(false)\n      setDraggingZone(null)\n    }\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n  }\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault()\n    dragCounterRef.current = 0\n    setIsDraggingFile(false)\n    setDraggingZone(null)\n\n    if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) {\n      return\n    }\n\n    if (draggingZone === 'thumbnail') {\n      setUploadingType('thumbnail')\n      const file = e.dataTransfer.files[0]\n      // try to upload the thumbnail\n      handleUploadThumbnail(file)\n    }\n\n    if (draggingZone === 'version') {\n      setUploadingType('version')\n      const files = e.dataTransfer.files\n      // try to upload the reviewables using the hook\n      handleVersionUpload(files)\n    }\n  }\n\n  // upload thumbnail from input (right click on thumbnail)\n  const handleInputUpload = async (event: ChangeEvent<HTMLInputElement>, type: UploadType) => {\n    const files = event.target.files\n    if (!files || files.length === 0) {\n      return\n    }\n\n    if (type === 'version') {\n      setUploadingType('version')\n      handleVersionUpload(files)\n    }\n    if (type === 'thumbnail') {\n      setUploadingType('thumbnail')\n      handleUploadThumbnail(files[0])\n    }\n  }\n\n  const thumbnailInputRef = useRef<HTMLInputElement>(null)\n  const versionsInputRef = useRef<HTMLInputElement>(null)\n\n  return (\n    <ThumbnailUploadProvider\n      entities={entities}\n      handleThumbnailUpload={handleThumbnailFileUploaded}\n      thumbnailInputRef={thumbnailInputRef}\n      versionsInputRef={canUploadVersions ? versionsInputRef : undefined}\n    >\n      <Styled.DragAndDropWrapper\n        className={clsx({ dragging: isDraggingFile })}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <ThumbnailWrapper>\n          <div>{children}</div>\n        </ThumbnailWrapper>\n        {isDraggingFile && (\n          <Styled.DropZones>\n            {availableDropZones.map((zone) => (\n              <Dropzone\n                key={zone.id}\n                id={zone.id}\n                label={zone.label}\n                icon={zone.icon}\n                isActive={draggingZone === zone.id}\n                onDragOver={() => setDraggingZone(zone.id)}\n                onDragLeave={() => setDraggingZone(null)}\n              />\n            ))}\n          </Styled.DropZones>\n        )}\n        {(uploadingType === 'thumbnail' || uploadingType === 'version') && (\n          <Styled.DropZones>\n            <Styled.UploadingProgress>\n              <Styled.Progress\n                style={{\n                  right: `${100 - progress}%`,\n                }}\n              />\n              <span className=\"label\">{`Uploading ${uploadingType}...`}</span>\n            </Styled.UploadingProgress>\n            <Styled.CancelButton icon={'close'} variant=\"text\" onClick={resetState} />\n          </Styled.DropZones>\n        )}\n        <input\n          type=\"file\"\n          onChange={(e) => handleInputUpload(e, 'thumbnail')}\n          ref={thumbnailInputRef}\n        />\n        <input\n          type=\"file\"\n          onChange={(e) => handleInputUpload(e, 'version')}\n          ref={versionsInputRef}\n        />\n      </Styled.DragAndDropWrapper>\n\n      {/* Product creation dialog */}\n      <EntityPanelUploaderDialog\n        isOpen={showProductDialog}\n        files={pendingFiles}\n        onSubmit={handleDialogSubmit}\n        onCancel={handleDialogCancel}\n      />\n    </ThumbnailUploadProvider>\n  )\n}\n"],"names":["dropZones","EntityPanelUploader","children","entityType","entities","projectName","onUploaded","onVersionCreated","dispatch","useDetailsPanelContext","isDraggingFile","setIsDraggingFile","useState","draggingZone","setDraggingZone","dragCounterRef","useRef","uploadingType","setUploadingType","progress","setProgress","showProductDialog","setShowProductDialog","pendingFiles","setPendingFiles","singleEntity","taskId","_a","folderId","_b","productId","_c","versionId","canUploadVersions","uploadReviewableFiles","useReviewablesUpload","availableDropZones","zone","resetState","handleDialogSubmit","productName","sanitizedName","sanitizeProductName","toast","productRes","createProductHelper","createProduct","uploadVersionWithProduct","error","handleUploadError","handleDialogCancel","createVersion","useCreateVersionMutation","useCreateProductMutation","handleVersionUpload","files","nextVersion","getNextVersionNumber","versionRes","createVersionHelper","handleThumbnailFileUploaded","thumbnails","newUpdatedAt","operations","entity","entityToPatch","e","currentAssignees","updateEntities","handleUploadThumbnail","file","promises","id","promise","axios","updatedEntities","res","i","useUpdateEntitiesMutation","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleInputUpload","event","type","thumbnailInputRef","versionsInputRef","jsxs","ThumbnailUploadProvider","Styled.DragAndDropWrapper","clsx","jsx","ThumbnailWrapper","Styled.DropZones","Dropzone","Styled.UploadingProgress","Styled.Progress","Styled.CancelButton","EntityPanelUploaderDialog"],"mappings":"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"}
+{"version":3,"file":"EntityPanelUploader.es.js","sources":["../../../../../src/components/EntityPanelUploader/EntityPanelUploader.tsx"],"sourcesContent":["import { ChangeEvent, useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { ThumbnailWrapper } from '@shared/containers'\nimport {\n  useCreateVersionMutation,\n  useUpdateEntitiesMutation,\n  useCreateProductMutation,\n} from '@shared/api'\nimport * as Styled from './EntityPanelUploader.styled'\nimport { ThumbnailUploadProvider } from '../../context/ThumbnailUploaderContext'\nimport Dropzone, { DropzoneType } from './Dropzone'\nimport axios from 'axios'\nimport { toast } from 'react-toastify'\nimport { useReviewablesUpload } from '../ReviewablesList'\nimport { useDetailsPanelContext } from '@shared/context'\nimport EntityPanelUploaderDialog from './EntityPanelUploaderDialog'\nimport {\n  sanitizeProductName,\n  createProductHelper,\n  createVersionHelper,\n  getNextVersionNumber,\n  handleUploadError,\n} from '@shared/util'\n\ntype Operation = {\n  id: string\n  projectName: string\n  currentAssignees: any[]\n  data: { updatedAt: string }\n}\nexport type EntityPanelUploaderProps = {\n  entityType: string\n  entities: any[]\n  projectName: any\n  children?: JSX.Element | JSX.Element[]\n  onUploaded?: (operations: Operation[]) => void\n  resetFileUploadState?: () => void\n  onVersionCreated?: (versionId: string) => void\n}\n\ntype UploadType = 'thumbnail' | 'version'\nconst dropZones: (DropzoneType & { id: UploadType })[] = [\n  { id: 'thumbnail', label: 'Upload thumbnail', icon: 'add_photo_alternate' },\n  { id: 'version', label: 'Upload version', icon: 'layers' },\n]\n\nexport const EntityPanelUploader = ({\n  children = [],\n  entityType,\n  entities = [],\n  projectName,\n  onUploaded,\n  onVersionCreated,\n}: EntityPanelUploaderProps) => {\n  const { dispatch } = useDetailsPanelContext()\n  // Dragging and dropping state\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [draggingZone, setDraggingZone] = useState<UploadType | null>(null)\n  const dragCounterRef = useRef(0)\n\n  // Uploading state\n  const [uploadingType, setUploadingType] = useState<UploadType | null>(null)\n  const [progress, setProgress] = useState(0)\n\n  // Dialog state for product creation\n  const [showProductDialog, setShowProductDialog] = useState(false)\n  const [pendingFiles, setPendingFiles] = useState<FileList | null>(null)\n\n  // Check if we have exactly one entity selected\n  const singleEntity = entities.length === 1 ? entities[0] : null\n  // extra all entity IDs for the single version entity\n  const taskId: string | undefined = singleEntity?.task?.id\n  const folderId: string | undefined = singleEntity?.folder?.id\n  const productId: string | undefined = singleEntity?.product?.id\n  const versionId: string | undefined = singleEntity?.id\n  const canUploadVersions = Boolean(singleEntity && entityType !== 'representation')\n\n  // Use the custom hook for reviewable upload logic (only when single version)\n  const { handleFileUpload: uploadReviewableFiles } = useReviewablesUpload({\n    projectName,\n    versionId: versionId,\n    taskId: taskId,\n    folderId: folderId,\n    productId: productId,\n    dispatch,\n    onUpload: () => {\n      setUploadingType(null)\n      setProgress(0)\n    },\n    onProgress: (progress) => {\n      setProgress(progress)\n    },\n  })\n\n  // Filter drop zones based on whether we can upload reviewables\n  const availableDropZones = dropZones.filter((zone) => {\n    if (zone.id === 'version') {\n      return canUploadVersions\n    }\n    return true\n  })\n\n  const resetState = () => {\n    setUploadingType(null)\n    setIsDraggingFile(false)\n    setDraggingZone(null)\n    dragCounterRef.current = 0\n    setProgress(0)\n    setShowProductDialog(false)\n    setPendingFiles(null)\n  }\n\n  // Handle dialog submission - create product and upload version\n  const handleDialogSubmit = async (productName: string) => {\n    if (!pendingFiles || !singleEntity) {\n      setShowProductDialog(false)\n      setPendingFiles(null)\n      return\n    }\n\n    const sanitizedName = sanitizeProductName(productName)\n\n    if (!sanitizedName.trim()) {\n      toast.error(\n        'Product name must contain valid characters (letters, numbers, underscore, or hyphen)',\n      )\n      return\n    }\n\n    try {\n      if (!folderId) {\n        throw new Error('Folder ID is required to create a product')\n      }\n      setUploadingType('version')\n\n      // Create the product\n      const productRes = await createProductHelper(createProduct, projectName, {\n        folderId: folderId,\n        name: sanitizedName,\n        productType: 'review', // default product type for uploaded files\n      })\n\n      // Close dialog and proceed with version upload\n      setShowProductDialog(false)\n      await uploadVersionWithProduct(pendingFiles, productRes.id)\n      setPendingFiles(null)\n    } catch (error: any) {\n      handleUploadError(error, 'creating product')\n      resetState()\n    }\n  }\n\n  // Handle dialog cancellation\n  const handleDialogCancel = () => {\n    setShowProductDialog(false)\n    setPendingFiles(null)\n    resetState()\n  }\n\n  const [createVersion] = useCreateVersionMutation()\n  const [createProduct] = useCreateProductMutation()\n  // Handle version/reviewable file upload\n  const handleVersionUpload = async (files: FileList) => {\n    if (!canUploadVersions || !singleEntity) {\n      toast.error('Please select exactly one version to upload reviewables')\n      return resetState()\n    }\n\n    const productId = singleEntity.product?.id\n    if (!productId) {\n      // Show dialog to create product first\n      setPendingFiles(files)\n      setShowProductDialog(true)\n      return\n    }\n\n    // If we have a productId, proceed with upload\n    await uploadVersionWithProduct(files, productId)\n  }\n\n  // Helper function to handle the actual version upload\n  const uploadVersionWithProduct = async (files: FileList, productId: string) => {\n    try {\n      const nextVersion = getNextVersionNumber(singleEntity!.product?.latestVersion)\n\n      // create a new version\n      const versionRes = await createVersionHelper(createVersion, projectName, {\n        productId,\n        taskId, // previous version could have a taskId or we are uploading on a task\n        version: nextVersion,\n      })\n\n      await uploadReviewableFiles(files, versionRes.id)\n      // The hook handles success callbacks, just reset our local state\n      resetState()\n\n      // update entity panel to focus the new version\n      onVersionCreated?.(versionRes.id)\n    } catch (error: any) {\n      handleUploadError(error, 'uploading version')\n      resetState()\n    }\n  }\n\n  // once the file has been uploaded, we need to patch the entities with the new thumbnail\n  const handleThumbnailFileUploaded = async (thumbnails: any[] = []) => {\n    // always set isDragginle to false\n    setIsDraggingFile(false)\n\n    // check something was actually uploaded\n    if (!entities.length) {\n      return\n    }\n\n    // patching the updatedAt will force a refresh of the thumbnail url\n    const newUpdatedAt = new Date().toISOString()\n\n    let operations: Operation[] = []\n    let versionPatches = []\n\n    for (const entity of thumbnails) {\n      const entityToPatch = entities.find((e) => e.id === entity.id)\n      if (!entityToPatch) continue\n      const thumbnailId = entity.thumbnailId\n      const currentAssignees = entity.users || []\n\n      operations.push({\n        id: entityToPatch.id,\n        projectName: entityToPatch.projectName,\n        data: { updatedAt: newUpdatedAt },\n        currentAssignees,\n      })\n\n      const versionPatch = {\n        productId: entityToPatch.productId,\n        versionUpdatedAt: newUpdatedAt,\n        versionThumbnailId: thumbnailId,\n      }\n\n      versionPatches.push(versionPatch)\n    }\n\n    try {\n      await updateEntities({ operations, entityType })\n      onUploaded && onUploaded(operations)\n    } catch (error) {\n      console.error('Error uploading thumbnail:', error)\n    }\n  }\n\n  const handleUploadThumbnail = async (file: File) => {\n    if (!file) return resetState()\n\n    try {\n      // check file is an image\n      if (!file.type.includes('image')) {\n        throw new Error('File is not an image')\n      }\n\n      let promises = []\n      for (const entity of entities) {\n        const { id, entityType, projectName } = entity\n\n        if (!projectName) throw new Error('Project name is required')\n\n        const promise = axios.post(\n          projectName && `/api/projects/${projectName}/${entityType}s/${id}/thumbnail`,\n          file,\n          {\n            onUploadProgress: (e) => {\n              setProgress(Math.round((100 * e.loaded) / (e.total || file.size)))\n            },\n            headers: {\n              'Content-Type': file.type,\n            },\n          },\n        )\n\n        promises.push(promise)\n      }\n\n      const res = await Promise.all(promises)\n\n      const updatedEntities = res.map((res, i) => ({\n        thumbnailId: res.data.id as string,\n        id: entities[i].id,\n      }))\n\n      handleThumbnailFileUploaded(updatedEntities)\n      resetState()\n    } catch (error: any) {\n      console.error(error)\n      toast.error(error.message)\n      resetState()\n    }\n  }\n\n  const [updateEntities] = useUpdateEntitiesMutation()\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    dragCounterRef.current++\n    if (dragCounterRef.current === 1) {\n      setIsDraggingFile(true)\n    }\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    e.preventDefault()\n    dragCounterRef.current--\n    if (dragCounterRef.current === 0) {\n      setIsDraggingFile(false)\n      setDraggingZone(null)\n    }\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n  }\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault()\n    dragCounterRef.current = 0\n    setIsDraggingFile(false)\n    setDraggingZone(null)\n\n    if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) {\n      return\n    }\n\n    if (draggingZone === 'thumbnail') {\n      setUploadingType('thumbnail')\n      const file = e.dataTransfer.files[0]\n      // try to upload the thumbnail\n      handleUploadThumbnail(file)\n    }\n\n    if (draggingZone === 'version') {\n      setUploadingType('version')\n      const files = e.dataTransfer.files\n      // try to upload the reviewables using the hook\n      handleVersionUpload(files)\n    }\n  }\n\n  // upload thumbnail from input (right click on thumbnail)\n  const handleInputUpload = async (event: ChangeEvent<HTMLInputElement>, type: UploadType) => {\n    const files = event.target.files\n    if (!files || files.length === 0) {\n      return\n    }\n\n    if (type === 'version') {\n      setUploadingType('version')\n      handleVersionUpload(files)\n    }\n    if (type === 'thumbnail') {\n      setUploadingType('thumbnail')\n      handleUploadThumbnail(files[0])\n    }\n  }\n\n  const thumbnailInputRef = useRef<HTMLInputElement>(null)\n  const versionsInputRef = useRef<HTMLInputElement>(null)\n\n  return (\n    <ThumbnailUploadProvider\n      entities={entities}\n      handleThumbnailUpload={handleThumbnailFileUploaded}\n      thumbnailInputRef={thumbnailInputRef}\n      versionsInputRef={canUploadVersions ? versionsInputRef : undefined}\n    >\n      <Styled.DragAndDropWrapper\n        className={clsx({ dragging: isDraggingFile })}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <ThumbnailWrapper>\n          <div>{children}</div>\n        </ThumbnailWrapper>\n        {isDraggingFile && (\n          <Styled.DropZones>\n            {availableDropZones.map((zone) => (\n              <Dropzone\n                key={zone.id}\n                id={zone.id}\n                label={zone.label}\n                icon={zone.icon}\n                isActive={draggingZone === zone.id}\n                onDragOver={() => setDraggingZone(zone.id)}\n                onDragLeave={() => setDraggingZone(null)}\n              />\n            ))}\n          </Styled.DropZones>\n        )}\n        {(uploadingType === 'thumbnail' || uploadingType === 'version') && (\n          <Styled.DropZones>\n            <Styled.UploadingProgress>\n              <Styled.Progress\n                style={{\n                  right: `${100 - progress}%`,\n                }}\n              />\n              <span className=\"label\">{`Uploading ${uploadingType}...`}</span>\n            </Styled.UploadingProgress>\n            <Styled.CancelButton icon={'close'} variant=\"text\" onClick={resetState} />\n          </Styled.DropZones>\n        )}\n        <input\n          type=\"file\"\n          onChange={(e) => handleInputUpload(e, 'thumbnail')}\n          ref={thumbnailInputRef}\n        />\n        <input\n          type=\"file\"\n          onChange={(e) => handleInputUpload(e, 'version')}\n          ref={versionsInputRef}\n        />\n      </Styled.DragAndDropWrapper>\n\n      {/* Product creation dialog */}\n      <EntityPanelUploaderDialog\n        isOpen={showProductDialog}\n        files={pendingFiles}\n        onSubmit={handleDialogSubmit}\n        onCancel={handleDialogCancel}\n      />\n    </ThumbnailUploadProvider>\n  )\n}\n"],"names":["dropZones","EntityPanelUploader","children","entityType","entities","projectName","onUploaded","onVersionCreated","dispatch","useDetailsPanelContext","isDraggingFile","setIsDraggingFile","useState","draggingZone","setDraggingZone","dragCounterRef","useRef","uploadingType","setUploadingType","progress","setProgress","showProductDialog","setShowProductDialog","pendingFiles","setPendingFiles","singleEntity","taskId","_a","folderId","_b","productId","_c","versionId","canUploadVersions","uploadReviewableFiles","useReviewablesUpload","availableDropZones","zone","resetState","handleDialogSubmit","productName","sanitizedName","sanitizeProductName","toast","productRes","createProductHelper","createProduct","uploadVersionWithProduct","error","handleUploadError","handleDialogCancel","createVersion","useCreateVersionMutation","useCreateProductMutation","handleVersionUpload","files","nextVersion","getNextVersionNumber","versionRes","createVersionHelper","handleThumbnailFileUploaded","thumbnails","newUpdatedAt","operations","entity","entityToPatch","e","currentAssignees","updateEntities","handleUploadThumbnail","file","promises","id","promise","axios","updatedEntities","res","i","useUpdateEntitiesMutation","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleInputUpload","event","type","thumbnailInputRef","versionsInputRef","jsxs","ThumbnailUploadProvider","Styled.DragAndDropWrapper","clsx","jsx","ThumbnailWrapper","Styled.DropZones","Dropzone","Styled.UploadingProgress","Styled.Progress","Styled.CancelButton","EntityPanelUploaderDialog"],"mappings":"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"}

package/dist/shared/src/components/EntityPath/SegmentProvider.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const x=require("../../../../_virtual/jsx-runtime.cjs.js"),C=require("react"),y=require("./EntityPath.styled.cjs.js"),b=require("../../../node_modules/primereact/utils/utils.esm.cjs.js");require("../../containers/ContextMenu/ContextMenuContext.cjs.js");require("@ynput/ayon-react-components");;/* empty css                                                 */require("clsx");const f=require("../../containers/ContextMenu/useCreateContextMenu.cjs.js");require("lodash");require("react-toastify");const j=require("../../util/copyToClipboard.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");require("../../context/RemoteModulesContext.cjs.js");const M=require("../../context/DetailsPanelContext.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");const h=C.forwardRef(({children:o,segment:e,isOpen:u,scope:k,projectName:n,...c},s)=>{const{openSlideOut:q}=M.useDetailsPanelContext(),i=(e==null?void 0:e.type)!=="product"&&(e==null?void 0:e.type)!=="project",a=()=>{if(!i)return;const{type:r,id:t}=e||{};!r||r==="project"||r==="product"||!t||q({entityType:r,entityId:t,projectName:n})},l=r=>[{label:`ID: ${r}`,icon:"content_copy",command:()=>j.copyToClipboard(r)}],[p]=f.useCreateContextMenu(),d=r=>{if(!e)return;const t=l(e.id);p(r,t)};return x.jsxRuntimeExports.jsx(y.ActiveSegment,{onClick:a,onContextMenu:d,className:b.classNames({link:i,open:u}),...c,ref:s,children:o})});module.exports=h;
+"use strict";const x=require("../../../../_virtual/jsx-runtime.cjs.js"),C=require("react"),y=require("./EntityPath.styled.cjs.js"),b=require("../../../node_modules/primereact/utils/utils.esm.cjs.js");require("../../containers/ContextMenu/ContextMenuContext.cjs.js");require("@ynput/ayon-react-components");;/* empty css                                                 */require("clsx");const f=require("../../containers/ContextMenu/useCreateContextMenu.cjs.js");require("lodash");require("react-toastify");const j=require("../../util/copyToClipboard.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");require("../../context/RemoteModulesContext.cjs.js");const M=require("../../context/DetailsPanelContext.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");const h=C.forwardRef(({children:o,segment:e,isOpen:u,scope:k,projectName:n,...c},q)=>{const{openSlideOut:s}=M.useDetailsPanelContext(),i=(e==null?void 0:e.type)!=="product"&&(e==null?void 0:e.type)!=="project",a=()=>{if(!i)return;const{type:r,id:t}=e||{};!r||r==="project"||r==="product"||!t||s({entityType:r,entityId:t,projectName:n})},l=r=>[{label:`ID: ${r}`,icon:"content_copy",command:()=>j.copyToClipboard(r)}],[p]=f.useCreateContextMenu(),d=r=>{if(!e)return;const t=l(e.id);p(r,t)};return x.jsxRuntimeExports.jsx(y.ActiveSegment,{onClick:a,onContextMenu:d,className:b.classNames({link:i,open:u}),...c,ref:q,children:o})});module.exports=h;
 //# sourceMappingURL=SegmentProvider.cjs.js.map

package/dist/shared/src/components/EntityPath/SegmentProvider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentProvider.cjs.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["SegmentProvider","forwardRef","children","segment","isOpen","scope","projectName","props","ref","openSlideOut","useDetailsPanelContext","isLinkable","handleClick","entityType","entityId","buildContextMenu","id","copyToClipboard","contextMenuShow","useCreateContextMenu","handleOnContext","e","menu","jsx","ActiveSegment","classNames"],"mappings":"0nCAeA,MAAMA,EAAkBC,EAAA,WACtB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,MAAAC,EAAO,YAAAC,EAAa,GAAGC,CAAM,EAAGC,IAAQ,CAC9D,KAAA,CAAE,aAAAC,CAAa,EAAIC,yBAAuB,EAE1CC,GAAaR,GAAA,YAAAA,EAAS,QAAS,YAAaA,GAAA,YAAAA,EAAS,QAAS,UAE9DS,EAAc,IAAM,CACxB,GAAI,CAACD,EAAY,OAEjB,KAAM,CAAE,KAAME,EAAY,GAAIC,CAAS,EAAIX,GAAW,CAAC,EAEnD,CAACU,GAAcA,IAAe,WAAaA,IAAe,WAAa,CAACC,GAE/DL,EAAA,CACX,WAAAI,EACA,SAAAC,EACA,YAAAR,CAAA,CACD,CACH,EAEMS,EAAoBC,GAAe,CACvC,CACE,MAAO,OAAOA,CAAE,GAChB,KAAM,eACN,QAAS,IAAMC,EAAAA,gBAAgBD,CAAE,CAAA,CAErC,EAEM,CAACE,CAAe,EAAIC,uBAAqB,EAEzCC,EAAmBC,GAAkC,CACzD,GAAI,CAAClB,EAAS,OACR,MAAAmB,EAAOP,EAAiBZ,EAAQ,EAAE,EAExCe,EAAgBG,EAAGC,CAAI,CACzB,EAGE,OAAAC,EAAA,kBAAA,IAACC,EAAA,cAAA,CACC,QAASZ,EACT,cAAeQ,EACf,UAAWK,EAAW,WAAA,CAAE,KAAMd,EAAY,KAAMP,EAAQ,EACvD,GAAGG,EACJ,IAAAC,EAEC,SAAAN,CAAA,CACH,CAAA,CAGN"}
+{"version":3,"file":"SegmentProvider.cjs.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["SegmentProvider","forwardRef","children","segment","isOpen","scope","projectName","props","ref","openSlideOut","useDetailsPanelContext","isLinkable","handleClick","entityType","entityId","buildContextMenu","id","copyToClipboard","contextMenuShow","useCreateContextMenu","handleOnContext","e","menu","jsx","ActiveSegment","classNames"],"mappings":"sqCAeA,MAAMA,EAAkBC,EAAA,WACtB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,MAAAC,EAAO,YAAAC,EAAa,GAAGC,CAAM,EAAGC,IAAQ,CAC9D,KAAA,CAAE,aAAAC,CAAa,EAAIC,yBAAuB,EAE1CC,GAAaR,GAAA,YAAAA,EAAS,QAAS,YAAaA,GAAA,YAAAA,EAAS,QAAS,UAE9DS,EAAc,IAAM,CACxB,GAAI,CAACD,EAAY,OAEjB,KAAM,CAAE,KAAME,EAAY,GAAIC,CAAS,EAAIX,GAAW,CAAC,EAEnD,CAACU,GAAcA,IAAe,WAAaA,IAAe,WAAa,CAACC,GAE/DL,EAAA,CACX,WAAAI,EACA,SAAAC,EACA,YAAAR,CAAA,CACD,CACH,EAEMS,EAAoBC,GAAe,CACvC,CACE,MAAO,OAAOA,CAAE,GAChB,KAAM,eACN,QAAS,IAAMC,EAAAA,gBAAgBD,CAAE,CAAA,CAErC,EAEM,CAACE,CAAe,EAAIC,uBAAqB,EAEzCC,EAAmBC,GAAkC,CACzD,GAAI,CAAClB,EAAS,OACR,MAAAmB,EAAOP,EAAiBZ,EAAQ,EAAE,EAExCe,EAAgBG,EAAGC,CAAI,CACzB,EAGE,OAAAC,EAAA,kBAAA,IAACC,EAAA,cAAA,CACC,QAASZ,EACT,cAAeQ,EACf,UAAWK,EAAW,WAAA,CAAE,KAAMd,EAAY,KAAMP,EAAQ,EACvD,GAAGG,EACJ,IAAAC,EAEC,SAAAN,CAAA,CACH,CAAA,CAGN"}

package/dist/shared/src/components/EntityPath/SegmentProvider.es.js

@@ -23,7 +23,8 @@ import "../../context/AddonProjectContext.es.js";
 import "../../context/AddonContext.es.js";
 import "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
-const U = x(
+import "../../context/MenuContext.es.js";
+const V = x(
   ({ children: p, segment: o, isOpen: n, scope: M, projectName: m, ...e }, c) => {
     const { openSlideOut: a } = k(), i = (o == null ? void 0 : o.type) !== "product" && (o == null ? void 0 : o.type) !== "project", u = () => {
       if (!i) return;
@@ -58,6 +59,6 @@ const U = x(
   }
 );
 export {
-  U as default
+  V as default
 };
 //# sourceMappingURL=SegmentProvider.es.js.map

package/dist/shared/src/components/EntityPath/SegmentProvider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentProvider.es.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["SegmentProvider","forwardRef","children","segment","isOpen","scope","projectName","props","ref","openSlideOut","useDetailsPanelContext","isLinkable","handleClick","entityType","entityId","buildContextMenu","id","copyToClipboard","contextMenuShow","useCreateContextMenu","handleOnContext","e","menu","jsx","ActiveSegment","classNames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,IAAkBC;AAAA,EACtB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,QAAAC,GAAQ,OAAAC,GAAO,aAAAC,GAAa,GAAGC,EAAM,GAAGC,MAAQ;AAC9D,UAAA,EAAE,cAAAC,EAAa,IAAIC,EAAuB,GAE1CC,KAAaR,KAAA,gBAAAA,EAAS,UAAS,cAAaA,KAAA,gBAAAA,EAAS,UAAS,WAE9DS,IAAc,MAAM;AACxB,UAAI,CAACD,EAAY;AAEjB,YAAM,EAAE,MAAME,GAAY,IAAIC,EAAS,IAAIX,KAAW,CAAC;AAEvD,MAAI,CAACU,KAAcA,MAAe,aAAaA,MAAe,aAAa,CAACC,KAE/DL,EAAA;AAAA,QACX,YAAAI;AAAA,QACA,UAAAC;AAAA,QACA,aAAAR;AAAA,MAAA,CACD;AAAA,IACH,GAEMS,IAAmB,CAACC,MAAe;AAAA,MACvC;AAAA,QACE,OAAO,OAAOA,CAAE;AAAA,QAChB,MAAM;AAAA,QACN,SAAS,MAAMC,EAAgBD,CAAE;AAAA,MAAA;AAAA,IAErC,GAEM,CAACE,CAAe,IAAIC,EAAqB,GAEzCC,IAAkB,CAACC,MAAkC;AACzD,UAAI,CAAClB,EAAS;AACR,YAAAmB,IAAOP,EAAiBZ,EAAQ,EAAE;AAExC,MAAAe,EAAgBG,GAAGC,CAAI;AAAA,IACzB;AAGE,WAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASZ;AAAA,QACT,eAAeQ;AAAA,QACf,WAAWK,EAAW,EAAE,MAAMd,GAAY,MAAMP,GAAQ;AAAA,QACvD,GAAGG;AAAA,QACJ,KAAAC;AAAA,QAEC,UAAAN;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SegmentProvider.es.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["SegmentProvider","forwardRef","children","segment","isOpen","scope","projectName","props","ref","openSlideOut","useDetailsPanelContext","isLinkable","handleClick","entityType","entityId","buildContextMenu","id","copyToClipboard","contextMenuShow","useCreateContextMenu","handleOnContext","e","menu","jsx","ActiveSegment","classNames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,IAAkBC;AAAA,EACtB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,QAAAC,GAAQ,OAAAC,GAAO,aAAAC,GAAa,GAAGC,EAAM,GAAGC,MAAQ;AAC9D,UAAA,EAAE,cAAAC,EAAa,IAAIC,EAAuB,GAE1CC,KAAaR,KAAA,gBAAAA,EAAS,UAAS,cAAaA,KAAA,gBAAAA,EAAS,UAAS,WAE9DS,IAAc,MAAM;AACxB,UAAI,CAACD,EAAY;AAEjB,YAAM,EAAE,MAAME,GAAY,IAAIC,EAAS,IAAIX,KAAW,CAAC;AAEvD,MAAI,CAACU,KAAcA,MAAe,aAAaA,MAAe,aAAa,CAACC,KAE/DL,EAAA;AAAA,QACX,YAAAI;AAAA,QACA,UAAAC;AAAA,QACA,aAAAR;AAAA,MAAA,CACD;AAAA,IACH,GAEMS,IAAmB,CAACC,MAAe;AAAA,MACvC;AAAA,QACE,OAAO,OAAOA,CAAE;AAAA,QAChB,MAAM;AAAA,QACN,SAAS,MAAMC,EAAgBD,CAAE;AAAA,MAAA;AAAA,IAErC,GAEM,CAACE,CAAe,IAAIC,EAAqB,GAEzCC,IAAkB,CAACC,MAAkC;AACzD,UAAI,CAAClB,EAAS;AACR,YAAAmB,IAAOP,EAAiBZ,EAAQ,EAAE;AAExC,MAAAe,EAAgBG,GAAGC,CAAI;AAAA,IACzB;AAGE,WAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASZ;AAAA,QACT,eAAeQ;AAAA,QACf,WAAWK,EAAW,EAAE,MAAMd,GAAY,MAAMP,GAAQ;AAAA,QACvD,GAAGG;AAAA,QACJ,KAAAC;AAAA,QAEC,UAAAN;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/shared/src/components/EnumEditor/DraggableEnumEditorItem.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),n=require("clsx"),b=require("lodash"),c=require("react"),S=require("@dnd-kit/sortable"),_=require("../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs.js"),u=require("@ynput/ayon-react-components"),s=require("./EnumEditor.styled.cjs.js"),B=({item:p,isBeingDragged:f,onChange:t,onRemove:v,onDuplicate:h})=>{var E;const{id:k,label:j,value:y,icon:o,color:i,isExpanded:l,isNewAttribute:d}=p,a=c.useRef(null),x=c.useRef(null),m=c.useRef(null),R=c.useRef(null),I=()=>{l||setTimeout(()=>a.current.focus(),250)};c.useEffect(()=>{p.isNewAttribute&&a.current.select()},[]);const{attributes:N,listeners:g,setNodeRef:q,transform:w,transition:L}=S.useSortable({id:k,animateLayoutChanges:()=>!1}),P={transition:L,transform:_.CSS.Translate.toString(w)};return e.jsxRuntimeExports.jsxs(s.EnumItemWrapper,{ref:q,style:P,className:n({dragged:f}),children:[e.jsxRuntimeExports.jsxs(s.EnumItemHeader,{className:n({expanded:l}),onClick:()=>{t&&t(["isExpanded"],[!l]),I()},children:[i&&e.jsxRuntimeExports.jsx(s.LabelColor,{style:{backgroundColor:i}}),o&&e.jsxRuntimeExports.jsx(u.Icon,{className:"icon",icon:o}),e.jsxRuntimeExports.jsxs("span",{children:[" ",j," "]}),e.jsxRuntimeExports.jsx("span",{className:"spacer"}),e.jsxRuntimeExports.jsx(u.Icon,{className:"icon toggle-expand",icon:l?"collapse_all":"expand_all"}),e.jsxRuntimeExports.jsx(u.Icon,{...g,...N,className:"icon draggable",icon:"drag_indicator",id:"icon"})]}),e.jsxRuntimeExports.jsx(s.EnumItemBodyExpander,{className:n({expanded:l}),children:e.jsxRuntimeExports.jsxs(s.EnumItemBody,{className:n(l?"expanded":"collapsed"),children:[e.jsxRuntimeExports.jsxs(s.Row,{children:[e.jsxRuntimeExports.jsx(s.Label,{children:" Label "}),e.jsxRuntimeExports.jsx(s.InputText,{ref:a,value:j,autoFocus:d,onChange:r=>{if(!d)return t&&t(["label"],[r.target.value]);x.current.value=b.kebabCase(r.target.value),t&&t(["label","value"],[r.target.value,b.kebabCase(r.target.value)])}})]},"label"),e.jsxRuntimeExports.jsxs(s.Row,{children:[e.jsxRuntimeExports.jsx(s.Label,{children:" Value "}),e.jsxRuntimeExports.jsx(s.InputText,{ref:x,value:((E=x.current)==null?void 0:E.value)||y,onChange:r=>t&&t(["value"],[r.target.value])})]},"value"),e.jsxRuntimeExports.jsxs(s.Row,{children:[e.jsxRuntimeExports.jsx(s.Label,{children:" Icon "}),e.jsxRuntimeExports.jsxs(s.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsx(s.Placeholder,{style:{display:o?"none":"flex"},onClick:()=>{R.current.open()},children:"Pick an icon..."}),e.jsxRuntimeExports.jsx(s.IconSelect,{ref:R,value:[o||"question_mark"],widthExpand:!0,style:{position:o?"relative":"absolute",visibility:o?"visible":"hidden"},onChange:r=>t&&t(["icon"],[r[0]])}),o&&e.jsxRuntimeExports.jsx(s.Button,{icon:"close",variant:"text",onClick:()=>{t&&t(["icon"],[void 0])}})]})]},"icon"),e.jsxRuntimeExports.jsxs(s.Row,{children:[e.jsxRuntimeExports.jsx(s.Label,{children:" Color "}),e.jsxRuntimeExports.jsxs(s.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsxs(s.ColorPicker,{className:n({active:i}),style:{backgroundColor:i||void 0},onClick:()=>m.current.click(),children:[i?"":"Pick a color...",e.jsxRuntimeExports.jsx("input",{type:"color",ref:m,value:i||"#000000",onChange:r=>t&&t(["color"],[r==null?void 0:r.target.value.toString()])})]}),i&&e.jsxRuntimeExports.jsx(s.Button,{icon:"close",variant:"text",onClick:()=>{t&&t(["color"],[void 0])}})]})]},"color"),e.jsxRuntimeExports.jsxs(s.Row,{className:"footer",children:[e.jsxRuntimeExports.jsx(s.ActionWrapper,{children:e.jsxRuntimeExports.jsx(s.Button,{icon:"close",variant:"text",onClick:v,children:"Remove"})}),e.jsxRuntimeExports.jsx(s.ActionWrapper,{children:e.jsxRuntimeExports.jsx(s.Button,{icon:"content_copy",variant:"text",onClick:h,children:"Duplicate"})})]})]})})]})};module.exports=B;
+"use strict";const s=require("../../../../_virtual/jsx-runtime.cjs.js"),o=require("clsx"),I=require("@dnd-kit/sortable"),N=require("../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs.js"),r=require("@ynput/ayon-react-components"),t=require("./EnumEditor.styled.cjs.js"),q=require("./EnumEditorItem.cjs.js"),f=({item:a,isBeingDragged:x,onChange:n,onRemove:l,onDuplicate:u})=>{const{id:m,label:d,icon:i,color:c,isExpanded:e}=a,{attributes:p,listeners:E,setNodeRef:j,transform:R,transition:g}=I.useSortable({id:m,animateLayoutChanges:()=>!1}),b={transition:g,transform:N.CSS.Translate.toString(R)};return s.jsxRuntimeExports.jsxs(t.EnumItemWrapper,{ref:j,style:b,className:o({dragged:x}),children:[s.jsxRuntimeExports.jsxs(t.EnumItemHeader,{className:o({expanded:e}),onClick:()=>{n&&n(["isExpanded"],[!e])},children:[c&&s.jsxRuntimeExports.jsx(t.LabelColor,{style:{backgroundColor:c}}),i&&s.jsxRuntimeExports.jsx(r.Icon,{className:"icon",icon:i}),s.jsxRuntimeExports.jsxs("span",{children:[" ",d," "]}),s.jsxRuntimeExports.jsx("span",{className:"spacer"}),s.jsxRuntimeExports.jsx(r.Icon,{className:"icon toggle-expand",icon:e?"collapse_all":"expand_all"}),s.jsxRuntimeExports.jsx(r.Icon,{...E,...p,className:"icon draggable",icon:"drag_indicator",id:"icon"})]}),s.jsxRuntimeExports.jsx(t.EnumItemBodyExpander,{className:o({expanded:e}),children:s.jsxRuntimeExports.jsx(q,{item:a,onChange:n,onRemove:l,onDuplicate:u,showRemoveButton:!0,showDuplicateButton:!0,autoFocus:!1,isExpanded:e})})]})};module.exports=f;
 //# sourceMappingURL=DraggableEnumEditorItem.cjs.js.map

package/dist/shared/src/components/EnumEditor/DraggableEnumEditorItem.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableEnumEditorItem.cjs.js","sources":["../../../../../src/components/EnumEditor/DraggableEnumEditorItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { kebabCase } from 'lodash'\nimport { useEffect, useRef } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\n\ntype Props = {\n  item: AttributeData\n  isBeingDragged?: boolean\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n}\n\nconst DraggableEnumEditorItem = ({\n  item,\n  isBeingDragged,\n  onChange,\n  onRemove,\n  onDuplicate,\n}: Props) => {\n  const { id, label, value, icon, color, isExpanded, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  const focusLabelIfExpanded = () => {\n    if (!isExpanded) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current!.focus(), 250)\n    }\n  }\n\n  useEffect(() => {\n    if (item.isNewAttribute) {\n      labelRef.current!.select()\n    }\n  }, [])\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n    id: id,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transition,\n    transform: CSS.Translate.toString(transform),\n  }\n\n  return (\n    <Styled.EnumItemWrapper\n      ref={setNodeRef}\n      style={style}\n      className={clsx({ dragged: isBeingDragged })}\n    >\n      <Styled.EnumItemHeader\n        className={clsx({ expanded: isExpanded })}\n        onClick={() => {\n          onChange && onChange(['isExpanded'], [!isExpanded])\n          focusLabelIfExpanded()\n        }}\n      >\n        {color && <Styled.LabelColor style={{ backgroundColor: color }} />}\n        {icon && <Icon className=\"icon\" icon={icon} />}\n        <span> {label} </span>\n        <span className=\"spacer\" />\n\n        <Icon className=\"icon toggle-expand\" icon={isExpanded ? 'collapse_all' : 'expand_all'} />\n        <Icon\n          {...listeners}\n          {...attributes}\n          className=\"icon draggable\"\n          icon=\"drag_indicator\"\n          id=\"icon\"\n        />\n      </Styled.EnumItemHeader>\n\n      <Styled.EnumItemBodyExpander className={clsx({ expanded: isExpanded })}>\n        <Styled.EnumItemBody className={clsx(isExpanded ? 'expanded' : 'collapsed')}>\n          <Styled.Row key=\"label\">\n            <Styled.Label> Label </Styled.Label>\n            <Styled.InputText\n              ref={labelRef}\n              value={label}\n              autoFocus={isNewAttribute}\n              onChange={(event) => {\n                if (!isNewAttribute) {\n                  return onChange && onChange(['label'], [event.target.value])\n                }\n                valueRef.current!.value = kebabCase(event.target.value)\n                onChange &&\n                  onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n              }}\n            />\n          </Styled.Row>\n\n          <Styled.Row key=\"value\">\n            <Styled.Label> Value </Styled.Label>\n            <Styled.InputText\n              ref={valueRef}\n              value={valueRef.current?.value || value}\n              onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n            />\n          </Styled.Row>\n\n          <Styled.Row key=\"icon\">\n            <Styled.Label> Icon </Styled.Label>\n\n            <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n              {\n                <Styled.Placeholder\n                  style={{ display: icon ? 'none' : 'flex' }}\n                  onClick={() => {\n                    iconSelectRef.current!.open()\n                  }}\n                >\n                  Pick an icon...\n                </Styled.Placeholder>\n              }\n\n              <Styled.IconSelect\n                ref={iconSelectRef}\n                value={[icon || 'question_mark']}\n                widthExpand\n                style={{\n                  position: icon ? 'relative' : 'absolute',\n                  visibility: icon ? 'visible' : 'hidden',\n                }}\n                onChange={(value) => {\n                  return onChange && onChange(['icon'], [value[0]])\n                }}\n              />\n              {icon && (\n                <Styled.Button\n                  icon=\"close\"\n                  variant=\"text\"\n                  onClick={() => {\n                    onChange && onChange(['icon'], [undefined])\n                  }}\n                />\n              )}\n            </Styled.PlaceholderWrapper>\n          </Styled.Row>\n\n          <Styled.Row key=\"color\">\n            <Styled.Label> Color </Styled.Label>\n\n            <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n              <Styled.ColorPicker\n                className={clsx({ active: color })}\n                style={{ backgroundColor: color || undefined }}\n                onClick={() => colorPickerRef.current!.click()}\n              >\n                {!color ? 'Pick a color...' : ''}\n                <input\n                  type=\"color\"\n                  ref={colorPickerRef}\n                  value={color || '#000000'}\n                  onChange={(event) =>\n                    onChange && onChange(['color'], [event?.target.value.toString()])\n                  }\n                />\n              </Styled.ColorPicker>\n              {color && (\n                <Styled.Button\n                  icon=\"close\"\n                  variant=\"text\"\n                  onClick={() => {\n                    onChange && onChange(['color'], [undefined])\n                  }}\n                />\n              )}\n            </Styled.PlaceholderWrapper>\n          </Styled.Row>\n\n          <Styled.Row className=\"footer\">\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          </Styled.Row>\n        </Styled.EnumItemBody>\n      </Styled.EnumItemBodyExpander>\n    </Styled.EnumItemWrapper>\n  )\n}\n\nexport default DraggableEnumEditorItem\n"],"names":["DraggableEnumEditorItem","item","isBeingDragged","onChange","onRemove","onDuplicate","id","label","value","icon","color","isExpanded","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","focusLabelIfExpanded","useEffect","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","jsxs","Styled.EnumItemWrapper","clsx","Styled.EnumItemHeader","jsx","Styled.LabelColor","Icon","Styled.EnumItemBodyExpander","Styled.EnumItemBody","Styled.Row","Styled.Label","Styled.InputText","event","kebabCase","_a","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}
+{"version":3,"file":"DraggableEnumEditorItem.cjs.js","sources":["../../../../../src/components/EnumEditor/DraggableEnumEditorItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\nimport EnumEditorItem from './EnumEditorItem'\n\ntype Props = {\n  item: AttributeData\n  isBeingDragged?: boolean\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n}\n\nconst DraggableEnumEditorItem = ({\n  item,\n  isBeingDragged,\n  onChange,\n  onRemove,\n  onDuplicate,\n}: Props) => {\n  const { id, label, icon, color, isExpanded } = item\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n    id: id,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transition,\n    transform: CSS.Translate.toString(transform),\n  }\n\n  return (\n    <Styled.EnumItemWrapper\n      ref={setNodeRef}\n      style={style}\n      className={clsx({ dragged: isBeingDragged })}\n    >\n      <Styled.EnumItemHeader\n        className={clsx({ expanded: isExpanded })}\n        onClick={() => {\n          onChange && onChange(['isExpanded'], [!isExpanded])\n        }}\n      >\n        {color && <Styled.LabelColor style={{ backgroundColor: color }} />}\n        {icon && <Icon className=\"icon\" icon={icon} />}\n        <span> {label} </span>\n        <span className=\"spacer\" />\n\n        <Icon className=\"icon toggle-expand\" icon={isExpanded ? 'collapse_all' : 'expand_all'} />\n        <Icon\n          {...listeners}\n          {...attributes}\n          className=\"icon draggable\"\n          icon=\"drag_indicator\"\n          id=\"icon\"\n        />\n      </Styled.EnumItemHeader>\n\n      <Styled.EnumItemBodyExpander className={clsx({ expanded: isExpanded })}>\n        <EnumEditorItem\n          item={item}\n          onChange={onChange}\n          onRemove={onRemove}\n          onDuplicate={onDuplicate}\n          showRemoveButton={true}\n          showDuplicateButton={true}\n          autoFocus={false}\n          isExpanded={isExpanded}\n        />\n      </Styled.EnumItemBodyExpander>\n    </Styled.EnumItemWrapper>\n  )\n}\n\nexport default DraggableEnumEditorItem\n"],"names":["DraggableEnumEditorItem","item","isBeingDragged","onChange","onRemove","onDuplicate","id","label","icon","color","isExpanded","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","jsxs","Styled.EnumItemWrapper","clsx","Styled.EnumItemHeader","jsx","Styled.LabelColor","Icon","Styled.EnumItemBodyExpander","EnumEditorItem"],"mappings":"mUAkBMA,EAA0B,CAAC,CAC/B,KAAAC,EACA,eAAAC,EACA,SAAAC,EACA,SAAAC,EACA,YAAAC,CACF,IAAa,CACX,KAAM,CAAE,GAAAC,EAAI,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,WAAAC,GAAeT,EAEzC,CAAE,WAAAU,EAAY,UAAAC,EAAW,WAAAC,EAAY,UAAAC,EAAW,WAAAC,GAAeC,cAAY,CAC/E,GAAAV,EACA,qBAAsB,IAAM,EAAA,CAC7B,EAEKW,EAAQ,CACZ,WAAAF,EACA,UAAWG,EAAA,IAAI,UAAU,SAASJ,CAAS,CAC7C,EAGE,OAAAK,EAAA,kBAAA,KAACC,EAAO,gBAAP,CACC,IAAKP,EACL,MAAAI,EACA,UAAWI,EAAK,CAAE,QAASnB,EAAgB,EAE3C,SAAA,CAAAiB,EAAA,kBAAA,KAACG,EAAO,eAAP,CACC,UAAWD,EAAK,CAAE,SAAUX,EAAY,EACxC,QAAS,IAAM,CACbP,GAAYA,EAAS,CAAC,YAAY,EAAG,CAAC,CAACO,CAAU,CAAC,CACpD,EAEC,SAAA,CAASD,GAAAc,EAAA,kBAAA,IAACC,aAAA,CAAkB,MAAO,CAAE,gBAAiBf,GAAS,EAC/DD,GAAQe,EAAA,kBAAA,IAACE,EAAK,KAAA,CAAA,UAAU,OAAO,KAAAjB,EAAY,2BAC3C,OAAK,CAAA,SAAA,CAAA,IAAED,EAAM,GAAA,EAAC,EACfgB,EAAAA,kBAAAA,IAAC,OAAK,CAAA,UAAU,QAAS,CAAA,0BAExBE,EAAAA,KAAK,CAAA,UAAU,qBAAqB,KAAMf,EAAa,eAAiB,aAAc,EACvFa,EAAA,kBAAA,IAACE,EAAA,KAAA,CACE,GAAGb,EACH,GAAGD,EACJ,UAAU,iBACV,KAAK,iBACL,GAAG,MAAA,CAAA,CACL,CAAA,CACF,EAEAY,wBAACG,EAAAA,qBAAA,CAA4B,UAAWL,EAAK,CAAE,SAAUX,CAAW,CAAC,EACnE,SAAAa,EAAA,kBAAA,IAACI,EAAA,CACC,KAAA1B,EACA,SAAAE,EACA,SAAAC,EACA,YAAAC,EACA,iBAAkB,GAClB,oBAAqB,GACrB,UAAW,GACX,WAAAK,CAAA,CAAA,CAEJ,CAAA,CAAA,CAAA,CACF,CAEJ"}

package/dist/shared/src/components/EnumEditor/DraggableEnumEditorItem.es.js

@@ -1,61 +1,53 @@
-import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
-import a from "clsx";
-import { kebabCase as k } from "lodash";
-import { useRef as i, useEffect as W } from "react";
-import { useSortable as D } from "@dnd-kit/sortable";
-import { CSS as q } from "../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.es.js";
-import { Icon as m } from "@ynput/ayon-react-components";
-import { EnumItemWrapper as F, EnumItemHeader as H, LabelColor as V, EnumItemBodyExpander as z, EnumItemBody as G, Row as c, Label as n, InputText as y, PlaceholderWrapper as E, Placeholder as J, IconSelect as K, Button as d, ColorPicker as M, ActionWrapper as N } from "./EnumEditor.styled.es.js";
-const le = ({
-  item: p,
-  isBeingDragged: I,
-  onChange: l,
-  onRemove: g,
-  onDuplicate: R
+import { j as s } from "../../../../_virtual/jsx-runtime.es.js";
+import o from "clsx";
+import { useSortable as N } from "@dnd-kit/sortable";
+import { CSS as b } from "../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.es.js";
+import { Icon as r } from "@ynput/ayon-react-components";
+import { EnumItemWrapper as I, EnumItemHeader as h, LabelColor as y, EnumItemBodyExpander as S } from "./EnumEditor.styled.es.js";
+import B from "./EnumEditorItem.es.js";
+const v = ({
+  item: t,
+  isBeingDragged: m,
+  onChange: a,
+  onRemove: i,
+  onDuplicate: c
 }) => {
-  var h;
-  const { id: S, label: j, value: P, icon: s, color: o, isExpanded: t, isNewAttribute: f } = p, u = i(null), x = i(null), v = i(null), b = i(null), L = () => {
-    t || setTimeout(() => u.current.focus(), 250);
-  };
-  W(() => {
-    p.isNewAttribute && u.current.select();
-  }, []);
-  const { attributes: _, listeners: w, setNodeRef: C, transform: A, transition: B } = D({
-    id: S,
+  const { id: d, label: p, icon: n, color: l, isExpanded: e } = t, { attributes: x, listeners: u, setNodeRef: f, transform: j, transition: E } = N({
+    id: d,
     animateLayoutChanges: () => !1
-  }), T = {
-    transition: B,
-    transform: q.Translate.toString(A)
+  }), g = {
+    transition: E,
+    transform: b.Translate.toString(j)
   };
-  return /* @__PURE__ */ e.jsxs(
-    F,
+  return /* @__PURE__ */ s.jsxs(
+    I,
     {
-      ref: C,
-      style: T,
-      className: a({ dragged: I }),
+      ref: f,
+      style: g,
+      className: o({ dragged: m }),
       children: [
-        /* @__PURE__ */ e.jsxs(
-          H,
+        /* @__PURE__ */ s.jsxs(
+          h,
           {
-            className: a({ expanded: t }),
+            className: o({ expanded: e }),
             onClick: () => {
-              l && l(["isExpanded"], [!t]), L();
+              a && a(["isExpanded"], [!e]);
             },
             children: [
-              o && /* @__PURE__ */ e.jsx(V, { style: { backgroundColor: o } }),
-              s && /* @__PURE__ */ e.jsx(m, { className: "icon", icon: s }),
-              /* @__PURE__ */ e.jsxs("span", { children: [
+              l && /* @__PURE__ */ s.jsx(y, { style: { backgroundColor: l } }),
+              n && /* @__PURE__ */ s.jsx(r, { className: "icon", icon: n }),
+              /* @__PURE__ */ s.jsxs("span", { children: [
                 " ",
-                j,
+                p,
                 " "
               ] }),
-              /* @__PURE__ */ e.jsx("span", { className: "spacer" }),
-              /* @__PURE__ */ e.jsx(m, { className: "icon toggle-expand", icon: t ? "collapse_all" : "expand_all" }),
-              /* @__PURE__ */ e.jsx(
-                m,
+              /* @__PURE__ */ s.jsx("span", { className: "spacer" }),
+              /* @__PURE__ */ s.jsx(r, { className: "icon toggle-expand", icon: e ? "collapse_all" : "expand_all" }),
+              /* @__PURE__ */ s.jsx(
+                r,
                 {
-                  ...w,
-                  ..._,
+                  ...u,
+                  ...x,
                   className: "icon draggable",
                   icon: "drag_indicator",
                   id: "icon"
@@ -64,117 +56,24 @@ const le = ({
             ]
           }
         ),
-        /* @__PURE__ */ e.jsx(z, { className: a({ expanded: t }), children: /* @__PURE__ */ e.jsxs(G, { className: a(t ? "expanded" : "collapsed"), children: [
-          /* @__PURE__ */ e.jsxs(c, { children: [
-            /* @__PURE__ */ e.jsx(n, { children: " Label " }),
-            /* @__PURE__ */ e.jsx(
-              y,
-              {
-                ref: u,
-                value: j,
-                autoFocus: f,
-                onChange: (r) => {
-                  if (!f)
-                    return l && l(["label"], [r.target.value]);
-                  x.current.value = k(r.target.value), l && l(["label", "value"], [r.target.value, k(r.target.value)]);
-                }
-              }
-            )
-          ] }, "label"),
-          /* @__PURE__ */ e.jsxs(c, { children: [
-            /* @__PURE__ */ e.jsx(n, { children: " Value " }),
-            /* @__PURE__ */ e.jsx(
-              y,
-              {
-                ref: x,
-                value: ((h = x.current) == null ? void 0 : h.value) || P,
-                onChange: (r) => l && l(["value"], [r.target.value])
-              }
-            )
-          ] }, "value"),
-          /* @__PURE__ */ e.jsxs(c, { children: [
-            /* @__PURE__ */ e.jsx(n, { children: " Icon " }),
-            /* @__PURE__ */ e.jsxs(E, { style: { position: "relative" }, children: [
-              /* @__PURE__ */ e.jsx(
-                J,
-                {
-                  style: { display: s ? "none" : "flex" },
-                  onClick: () => {
-                    b.current.open();
-                  },
-                  children: "Pick an icon..."
-                }
-              ),
-              /* @__PURE__ */ e.jsx(
-                K,
-                {
-                  ref: b,
-                  value: [s || "question_mark"],
-                  widthExpand: !0,
-                  style: {
-                    position: s ? "relative" : "absolute",
-                    visibility: s ? "visible" : "hidden"
-                  },
-                  onChange: (r) => l && l(["icon"], [r[0]])
-                }
-              ),
-              s && /* @__PURE__ */ e.jsx(
-                d,
-                {
-                  icon: "close",
-                  variant: "text",
-                  onClick: () => {
-                    l && l(["icon"], [void 0]);
-                  }
-                }
-              )
-            ] })
-          ] }, "icon"),
-          /* @__PURE__ */ e.jsxs(c, { children: [
-            /* @__PURE__ */ e.jsx(n, { children: " Color " }),
-            /* @__PURE__ */ e.jsxs(E, { style: { position: "relative" }, children: [
-              /* @__PURE__ */ e.jsxs(
-                M,
-                {
-                  className: a({ active: o }),
-                  style: { backgroundColor: o || void 0 },
-                  onClick: () => v.current.click(),
-                  children: [
-                    o ? "" : "Pick a color...",
-                    /* @__PURE__ */ e.jsx(
-                      "input",
-                      {
-                        type: "color",
-                        ref: v,
-                        value: o || "#000000",
-                        onChange: (r) => l && l(["color"], [r == null ? void 0 : r.target.value.toString()])
-                      }
-                    )
-                  ]
-                }
-              ),
-              o && /* @__PURE__ */ e.jsx(
-                d,
-                {
-                  icon: "close",
-                  variant: "text",
-                  onClick: () => {
-                    l && l(["color"], [void 0]);
-                  }
-                }
-              )
-            ] })
-          ] }, "color"),
-          /* @__PURE__ */ e.jsxs(c, { className: "footer", children: [
-            /* @__PURE__ */ e.jsx(N, { children: /* @__PURE__ */ e.jsx(d, { icon: "close", variant: "text", onClick: g, children: "Remove" }) }),
-            /* @__PURE__ */ e.jsx(N, { children: /* @__PURE__ */ e.jsx(d, { icon: "content_copy", variant: "text", onClick: R, children: "Duplicate" }) })
-          ] })
-        ] }) })
+        /* @__PURE__ */ s.jsx(S, { className: o({ expanded: e }), children: /* @__PURE__ */ s.jsx(
+          B,
+          {
+            item: t,
+            onChange: a,
+            onRemove: i,
+            onDuplicate: c,
+            showRemoveButton: !0,
+            showDuplicateButton: !0,
+            autoFocus: !1,
+            isExpanded: e
+          }
+        ) })
       ]
     }
   );
 };
 export {
-  le as default
+  v as default
 };
 //# sourceMappingURL=DraggableEnumEditorItem.es.js.map

package/dist/shared/src/components/EnumEditor/DraggableEnumEditorItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableEnumEditorItem.es.js","sources":["../../../../../src/components/EnumEditor/DraggableEnumEditorItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { kebabCase } from 'lodash'\nimport { useEffect, useRef } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\n\ntype Props = {\n  item: AttributeData\n  isBeingDragged?: boolean\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n}\n\nconst DraggableEnumEditorItem = ({\n  item,\n  isBeingDragged,\n  onChange,\n  onRemove,\n  onDuplicate,\n}: Props) => {\n  const { id, label, value, icon, color, isExpanded, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  const focusLabelIfExpanded = () => {\n    if (!isExpanded) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current!.focus(), 250)\n    }\n  }\n\n  useEffect(() => {\n    if (item.isNewAttribute) {\n      labelRef.current!.select()\n    }\n  }, [])\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n    id: id,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transition,\n    transform: CSS.Translate.toString(transform),\n  }\n\n  return (\n    <Styled.EnumItemWrapper\n      ref={setNodeRef}\n      style={style}\n      className={clsx({ dragged: isBeingDragged })}\n    >\n      <Styled.EnumItemHeader\n        className={clsx({ expanded: isExpanded })}\n        onClick={() => {\n          onChange && onChange(['isExpanded'], [!isExpanded])\n          focusLabelIfExpanded()\n        }}\n      >\n        {color && <Styled.LabelColor style={{ backgroundColor: color }} />}\n        {icon && <Icon className=\"icon\" icon={icon} />}\n        <span> {label} </span>\n        <span className=\"spacer\" />\n\n        <Icon className=\"icon toggle-expand\" icon={isExpanded ? 'collapse_all' : 'expand_all'} />\n        <Icon\n          {...listeners}\n          {...attributes}\n          className=\"icon draggable\"\n          icon=\"drag_indicator\"\n          id=\"icon\"\n        />\n      </Styled.EnumItemHeader>\n\n      <Styled.EnumItemBodyExpander className={clsx({ expanded: isExpanded })}>\n        <Styled.EnumItemBody className={clsx(isExpanded ? 'expanded' : 'collapsed')}>\n          <Styled.Row key=\"label\">\n            <Styled.Label> Label </Styled.Label>\n            <Styled.InputText\n              ref={labelRef}\n              value={label}\n              autoFocus={isNewAttribute}\n              onChange={(event) => {\n                if (!isNewAttribute) {\n                  return onChange && onChange(['label'], [event.target.value])\n                }\n                valueRef.current!.value = kebabCase(event.target.value)\n                onChange &&\n                  onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n              }}\n            />\n          </Styled.Row>\n\n          <Styled.Row key=\"value\">\n            <Styled.Label> Value </Styled.Label>\n            <Styled.InputText\n              ref={valueRef}\n              value={valueRef.current?.value || value}\n              onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n            />\n          </Styled.Row>\n\n          <Styled.Row key=\"icon\">\n            <Styled.Label> Icon </Styled.Label>\n\n            <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n              {\n                <Styled.Placeholder\n                  style={{ display: icon ? 'none' : 'flex' }}\n                  onClick={() => {\n                    iconSelectRef.current!.open()\n                  }}\n                >\n                  Pick an icon...\n                </Styled.Placeholder>\n              }\n\n              <Styled.IconSelect\n                ref={iconSelectRef}\n                value={[icon || 'question_mark']}\n                widthExpand\n                style={{\n                  position: icon ? 'relative' : 'absolute',\n                  visibility: icon ? 'visible' : 'hidden',\n                }}\n                onChange={(value) => {\n                  return onChange && onChange(['icon'], [value[0]])\n                }}\n              />\n              {icon && (\n                <Styled.Button\n                  icon=\"close\"\n                  variant=\"text\"\n                  onClick={() => {\n                    onChange && onChange(['icon'], [undefined])\n                  }}\n                />\n              )}\n            </Styled.PlaceholderWrapper>\n          </Styled.Row>\n\n          <Styled.Row key=\"color\">\n            <Styled.Label> Color </Styled.Label>\n\n            <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n              <Styled.ColorPicker\n                className={clsx({ active: color })}\n                style={{ backgroundColor: color || undefined }}\n                onClick={() => colorPickerRef.current!.click()}\n              >\n                {!color ? 'Pick a color...' : ''}\n                <input\n                  type=\"color\"\n                  ref={colorPickerRef}\n                  value={color || '#000000'}\n                  onChange={(event) =>\n                    onChange && onChange(['color'], [event?.target.value.toString()])\n                  }\n                />\n              </Styled.ColorPicker>\n              {color && (\n                <Styled.Button\n                  icon=\"close\"\n                  variant=\"text\"\n                  onClick={() => {\n                    onChange && onChange(['color'], [undefined])\n                  }}\n                />\n              )}\n            </Styled.PlaceholderWrapper>\n          </Styled.Row>\n\n          <Styled.Row className=\"footer\">\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          </Styled.Row>\n        </Styled.EnumItemBody>\n      </Styled.EnumItemBodyExpander>\n    </Styled.EnumItemWrapper>\n  )\n}\n\nexport default DraggableEnumEditorItem\n"],"names":["DraggableEnumEditorItem","item","isBeingDragged","onChange","onRemove","onDuplicate","id","label","value","icon","color","isExpanded","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","focusLabelIfExpanded","useEffect","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","jsxs","Styled.EnumItemWrapper","clsx","Styled.EnumItemHeader","jsx","Styled.LabelColor","Icon","Styled.EnumItemBodyExpander","Styled.EnumItemBody","Styled.Row","Styled.Label","Styled.InputText","event","kebabCase","_a","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}
+{"version":3,"file":"DraggableEnumEditorItem.es.js","sources":["../../../../../src/components/EnumEditor/DraggableEnumEditorItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\nimport EnumEditorItem from './EnumEditorItem'\n\ntype Props = {\n  item: AttributeData\n  isBeingDragged?: boolean\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n}\n\nconst DraggableEnumEditorItem = ({\n  item,\n  isBeingDragged,\n  onChange,\n  onRemove,\n  onDuplicate,\n}: Props) => {\n  const { id, label, icon, color, isExpanded } = item\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n    id: id,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transition,\n    transform: CSS.Translate.toString(transform),\n  }\n\n  return (\n    <Styled.EnumItemWrapper\n      ref={setNodeRef}\n      style={style}\n      className={clsx({ dragged: isBeingDragged })}\n    >\n      <Styled.EnumItemHeader\n        className={clsx({ expanded: isExpanded })}\n        onClick={() => {\n          onChange && onChange(['isExpanded'], [!isExpanded])\n        }}\n      >\n        {color && <Styled.LabelColor style={{ backgroundColor: color }} />}\n        {icon && <Icon className=\"icon\" icon={icon} />}\n        <span> {label} </span>\n        <span className=\"spacer\" />\n\n        <Icon className=\"icon toggle-expand\" icon={isExpanded ? 'collapse_all' : 'expand_all'} />\n        <Icon\n          {...listeners}\n          {...attributes}\n          className=\"icon draggable\"\n          icon=\"drag_indicator\"\n          id=\"icon\"\n        />\n      </Styled.EnumItemHeader>\n\n      <Styled.EnumItemBodyExpander className={clsx({ expanded: isExpanded })}>\n        <EnumEditorItem\n          item={item}\n          onChange={onChange}\n          onRemove={onRemove}\n          onDuplicate={onDuplicate}\n          showRemoveButton={true}\n          showDuplicateButton={true}\n          autoFocus={false}\n          isExpanded={isExpanded}\n        />\n      </Styled.EnumItemBodyExpander>\n    </Styled.EnumItemWrapper>\n  )\n}\n\nexport default DraggableEnumEditorItem\n"],"names":["DraggableEnumEditorItem","item","isBeingDragged","onChange","onRemove","onDuplicate","id","label","icon","color","isExpanded","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","jsxs","Styled.EnumItemWrapper","clsx","Styled.EnumItemHeader","jsx","Styled.LabelColor","Icon","Styled.EnumItemBodyExpander","EnumEditorItem"],"mappings":";;;;;;;AAkBA,MAAMA,IAA0B,CAAC;AAAA,EAC/B,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AACF,MAAa;AACX,QAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,MAAAC,GAAM,OAAAC,GAAO,YAAAC,MAAeT,GAEzC,EAAE,YAAAU,GAAY,WAAAC,GAAW,YAAAC,GAAY,WAAAC,GAAW,YAAAC,MAAeC,EAAY;AAAA,IAC/E,IAAAV;AAAA,IACA,sBAAsB,MAAM;AAAA,EAAA,CAC7B,GAEKW,IAAQ;AAAA,IACZ,YAAAF;AAAA,IACA,WAAWG,EAAI,UAAU,SAASJ,CAAS;AAAA,EAC7C;AAGE,SAAAK,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKP;AAAA,MACL,OAAAI;AAAA,MACA,WAAWI,EAAK,EAAE,SAASnB,GAAgB;AAAA,MAE3C,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAACG;AAAAA,UAAA;AAAA,YACC,WAAWD,EAAK,EAAE,UAAUX,GAAY;AAAA,YACxC,SAAS,MAAM;AACb,cAAAP,KAAYA,EAAS,CAAC,YAAY,GAAG,CAAC,CAACO,CAAU,CAAC;AAAA,YACpD;AAAA,YAEC,UAAA;AAAA,cAASD,KAAAc,gBAAAA,EAAA,IAACC,GAAA,EAAkB,OAAO,EAAE,iBAAiBf,KAAS;AAAA,cAC/DD,KAAQe,gBAAAA,EAAA,IAACE,GAAK,EAAA,WAAU,QAAO,MAAAjB,GAAY;AAAA,qCAC3C,QAAK,EAAA,UAAA;AAAA,gBAAA;AAAA,gBAAED;AAAA,gBAAM;AAAA,cAAA,GAAC;AAAA,cACfgB,gBAAAA,EAAAA,IAAC,QAAK,EAAA,WAAU,SAAS,CAAA;AAAA,oCAExBE,GAAK,EAAA,WAAU,sBAAqB,MAAMf,IAAa,iBAAiB,cAAc;AAAA,cACvFa,gBAAAA,EAAA;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACE,GAAGb;AAAA,kBACH,GAAGD;AAAA,kBACJ,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,IAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL;AAAA,UAAA;AAAA,QACF;AAAA,QAEAY,gBAAAA,MAACG,GAAA,EAA4B,WAAWL,EAAK,EAAE,UAAUX,EAAW,CAAC,GACnE,UAAAa,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAA1B;AAAA,YACA,UAAAE;AAAA,YACA,UAAAC;AAAA,YACA,aAAAC;AAAA,YACA,kBAAkB;AAAA,YAClB,qBAAqB;AAAA,YACrB,WAAW;AAAA,YACX,YAAAK;AAAA,UAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/shared/src/components/EnumEditor/EnumEditor.styled.cjs.js

@@ -27,6 +27,7 @@
   justify-content: stretch;
   border-radius: 4px;
   overflow: hidden;
+  background-color: var(--md-sys-color-surface-container-high);
   &.dragged {
     opacity: 0;
   }
@@ -81,7 +82,6 @@
   }
 `,l=e.div`
   ${i}
-  background-color: var(--md-sys-color-surface-container-high);
   align-items: stretch;
   padding: 0 8px;
   min-height: 0;
@@ -107,6 +107,7 @@
   height: 14px;
 `,v=e(o.IconSelect)`
   flex-grow: 1;
+  width: 100%;
   button div {
     width: 100%;
   }
@@ -124,6 +125,7 @@
   justify-content: start;
   flex-grow: 1;
   gap: var(--base-gap-small);
+  width: 100%;
 `,n=e.div`
   ${t}
   cursor: pointer;

package/dist/shared/src/components/EnumEditor/EnumEditor.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumEditor.styled.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.styled.ts"],"sourcesContent":["import {\n  InputText as BaseInputText,\n  IconSelect as BaseIconSelect,\n  Button as BaseButton,\n} from '@ynput/ayon-react-components'\nimport styled, { css } from 'styled-components'\n\nconst centeredContentFlexColumn = css`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n`\n\nconst centeredContentFlexRow = css`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\nconst inputLikeColorsAndBorder = css`\n  min-height: var(--base-input-size);\n  max-height: var(--base-input-size);\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: var(--border-radius-m);\n  border: 1px solid;\n  border-color: var(--md-sys-color-outline-variant);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n`\n\nexport const EnumListWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  gap: 4px;\n`\n\nexport const EnumItemWrapper = styled.div`\n  justify-content: stretch;\n  border-radius: 4px;\n  overflow: hidden;\n  &.dragged {\n    opacity: 0;\n  }\n`\n\nexport const EnumItemHeader = styled.div`\n  ${centeredContentFlexRow}\n  cursor: pointer;\n  user-select: none;\n  padding: 8px;\n  height: 36px;\n  font-size: 14px;\n  line-height: 17px;\n  background-color: var(--md-sys-color-surface-container-high);\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .icon {\n    width: 20px;\n    height: 20px;\n    &.draggable {\n      cursor: grab;\n    }\n    &.toggle-expand {\n      visibility: hidden;\n    }\n  }\n  &.collapsed {\n    color: red;\n    height: 0;\n  }\n  &.expanded {\n    background-color: var(--md-sys-color-surface-container-highest);\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .spacer {\n    flex-grow: 1;\n  }\n`\n\nexport const EnumItemBodyExpander = styled.div`\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  transition: grid-template-rows 0.25s;\n  &.expanded {\n    grid-template-rows: 1fr;\n  }\n`\n\nexport const EnumItemBody = styled.div`\n  ${centeredContentFlexColumn}\n  background-color: var(--md-sys-color-surface-container-high);\n  align-items: stretch;\n  padding: 0 8px;\n  min-height: 0;\n  transition: padding 0.25s;\n  &.expanded {\n    padding: 8px;\n  }\n`\n\nexport const Label = styled.div`\n  user-select: none;\n  min-width: 80px;\n`\n\nexport const Row = styled.div`\n  ${centeredContentFlexRow}\n  &.footer {\n    justify-content: space-between;\n    padding: 0 8px;\n  }\n`\n\nexport const ActionWrapper = styled.div`\n  ${centeredContentFlexRow}\n  gap: 4px;\n`\n\nexport const LabelColor = styled.div`\n  border-radius: 4px;\n  width: 14px;\n  height: 14px;\n`\n\nexport const IconSelect = styled(BaseIconSelect)`\n  flex-grow: 1;\n  button div {\n    width: 100%;\n  }\n`\n\nexport const Button = styled(BaseButton)`\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport const InputText = styled(BaseInputText)`\n  background-color: var(--md-sys-color-surface-container-low);\n  border-color: var(--md-sys-color-outline-variant);\n  flex-grow: 1;\n  padding: 4px 8px;\n`\n\nexport const PlaceholderWrapper = styled.div`\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  gap: var(--base-gap-small);\n`\nexport const Placeholder = styled.div`\n  ${inputLikeColorsAndBorder}\n  cursor: pointer;\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  align-items: center;\n  width: 100%;\n  padding-left: 8px;\n  user-select: none;\n`\n\nexport const ColorPicker = styled(Placeholder)`\n  ${inputLikeColorsAndBorder}\n  position: relative;\n  cursor: pointer;\n  &.active:hover {\n    filter: brightness(1.4);\n  }\n  input {\n    position: absolute;\n    visibility: hidden;\n  }\n`\n"],"names":["centeredContentFlexColumn","css","centeredContentFlexRow","inputLikeColorsAndBorder","EnumListWrapper","styled","EnumItemWrapper","EnumItemHeader","EnumItemBodyExpander","EnumItemBody","Label","Row","ActionWrapper","LabelColor","IconSelect","BaseIconSelect","Button","BaseButton","InputText","BaseInputText","PlaceholderWrapper","Placeholder","ColorPicker"],"mappings":"+JAOMA,EAA4BC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5BC,EAAyBD,EAAA;AAAA;AAAA;AAAA;AAAA,EAKzBE,EAA2BF,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAapBG,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzBC,EAAkBD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASzBE,EAAiBF,EAAO;AAAA,IACjCH,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0CbM,EAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU9BI,EAAeJ,EAAO;AAAA,IAC/BL,CAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWhBU,EAAQL,EAAO;AAAA;AAAA;AAAA,EAKfM,EAAMN,EAAO;AAAA,IACtBH,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,EAObU,EAAgBP,EAAO;AAAA,IAChCH,CAAsB;AAAA;AAAA,EAIbW,EAAaR,EAAO;AAAA;AAAA;AAAA;AAAA,EAMpBS,EAAaT,EAAOU,YAAc;AAAA;AAAA;AAAA;AAAA;AAAA,EAOlCC,EAASX,EAAOY,QAAU;AAAA;AAAA;AAAA;AAAA,EAM1BC,EAAYb,EAAOc,WAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhCC,EAAqBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAM5BgB,EAAchB,EAAO;AAAA,IAC9BF,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWfmB,EAAcjB,EAAOgB,CAAW;AAAA,IACzClB,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"EnumEditor.styled.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.styled.ts"],"sourcesContent":["import {\n  InputText as BaseInputText,\n  IconSelect as BaseIconSelect,\n  Button as BaseButton,\n} from '@ynput/ayon-react-components'\nimport styled, { css } from 'styled-components'\n\nconst centeredContentFlexColumn = css`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n`\n\nconst centeredContentFlexRow = css`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\nconst inputLikeColorsAndBorder = css`\n  min-height: var(--base-input-size);\n  max-height: var(--base-input-size);\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: var(--border-radius-m);\n  border: 1px solid;\n  border-color: var(--md-sys-color-outline-variant);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n`\n\nexport const EnumListWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  gap: 4px;\n`\n\nexport const EnumItemWrapper = styled.div`\n  justify-content: stretch;\n  border-radius: 4px;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-high);\n  &.dragged {\n    opacity: 0;\n  }\n`\n\nexport const EnumItemHeader = styled.div`\n  ${centeredContentFlexRow}\n  cursor: pointer;\n  user-select: none;\n  padding: 8px;\n  height: 36px;\n  font-size: 14px;\n  line-height: 17px;\n  background-color: var(--md-sys-color-surface-container-high);\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .icon {\n    width: 20px;\n    height: 20px;\n    &.draggable {\n      cursor: grab;\n    }\n    &.toggle-expand {\n      visibility: hidden;\n    }\n  }\n  &.collapsed {\n    color: red;\n    height: 0;\n  }\n  &.expanded {\n    background-color: var(--md-sys-color-surface-container-highest);\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .spacer {\n    flex-grow: 1;\n  }\n`\n\nexport const EnumItemBodyExpander = styled.div`\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  transition: grid-template-rows 0.25s;\n  &.expanded {\n    grid-template-rows: 1fr;\n  }\n`\n\nexport const EnumItemBody = styled.div`\n  ${centeredContentFlexColumn}\n  align-items: stretch;\n  padding: 0 8px;\n  min-height: 0;\n  transition: padding 0.25s;\n  &.expanded {\n    padding: 8px;\n  }\n`\n\nexport const Label = styled.div`\n  user-select: none;\n  min-width: 80px;\n`\n\nexport const Row = styled.div`\n  ${centeredContentFlexRow}\n  &.footer {\n    justify-content: space-between;\n    padding: 0 8px;\n  }\n`\n\nexport const ActionWrapper = styled.div`\n  ${centeredContentFlexRow}\n  gap: 4px;\n`\n\nexport const LabelColor = styled.div`\n  border-radius: 4px;\n  width: 14px;\n  height: 14px;\n`\n\nexport const IconSelect = styled(BaseIconSelect)`\n  flex-grow: 1;\n  width: 100%;\n  button div {\n    width: 100%;\n  }\n`\n\nexport const Button = styled(BaseButton)`\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport const InputText = styled(BaseInputText)`\n  background-color: var(--md-sys-color-surface-container-low);\n  border-color: var(--md-sys-color-outline-variant);\n  flex-grow: 1;\n  padding: 4px 8px;\n`\n\nexport const PlaceholderWrapper = styled.div`\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  gap: var(--base-gap-small);\n  width: 100%;\n`\nexport const Placeholder = styled.div`\n  ${inputLikeColorsAndBorder}\n  cursor: pointer;\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  align-items: center;\n  width: 100%;\n  padding-left: 8px;\n  user-select: none;\n`\n\nexport const ColorPicker = styled(Placeholder)`\n  ${inputLikeColorsAndBorder}\n  position: relative;\n  cursor: pointer;\n  &.active:hover {\n    filter: brightness(1.4);\n  }\n  input {\n    position: absolute;\n    visibility: hidden;\n  }\n`\n"],"names":["centeredContentFlexColumn","css","centeredContentFlexRow","inputLikeColorsAndBorder","EnumListWrapper","styled","EnumItemWrapper","EnumItemHeader","EnumItemBodyExpander","EnumItemBody","Label","Row","ActionWrapper","LabelColor","IconSelect","BaseIconSelect","Button","BaseButton","InputText","BaseInputText","PlaceholderWrapper","Placeholder","ColorPicker"],"mappings":"+JAOMA,EAA4BC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5BC,EAAyBD,EAAA;AAAA;AAAA;AAAA;AAAA,EAKzBE,EAA2BF,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAapBG,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzBC,EAAkBD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzBE,EAAiBF,EAAO;AAAA,IACjCH,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0CbM,EAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU9BI,EAAeJ,EAAO;AAAA,IAC/BL,CAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUhBU,EAAQL,EAAO;AAAA;AAAA;AAAA,EAKfM,EAAMN,EAAO;AAAA,IACtBH,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,EAObU,EAAgBP,EAAO;AAAA,IAChCH,CAAsB;AAAA;AAAA,EAIbW,EAAaR,EAAO;AAAA;AAAA;AAAA;AAAA,EAMpBS,EAAaT,EAAOU,YAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlCC,EAASX,EAAOY,QAAU;AAAA;AAAA;AAAA;AAAA,EAM1BC,EAAYb,EAAOc,WAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhCC,EAAqBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5BgB,EAAchB,EAAO;AAAA,IAC9BF,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWfmB,EAAcjB,EAAOgB,CAAW;AAAA,IACzClB,CAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}