@ynput/ayon-frontend-shared 0.2.35 → 0.2.36

package/dist/shared/src/containers/DetailsPanel/DetailsPanel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanel.cjs.js","sources":["../../../../../src/containers/DetailsPanel/DetailsPanel.tsx"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport React, { useEffect, useMemo } from 'react'\nimport * as Styled from './DetailsPanel.styled'\n\n// shared\nimport { useGetEntitiesDetailsPanelQuery, detailsPanelEntityTypes } from '@shared/api'\nimport type { ProjectModel, Tag, DetailsPanelEntityType } from '@shared/api'\nimport { DetailsPanelDetails, EntityPath, Watchers } from '@shared/components'\nimport { usePiPWindow } from '@shared/context/pip/PiPProvider'\nimport { productTypes } from '@shared/util'\nimport { useDetailsPanelContext, usePowerpack, useScopedDetailsPanel } from '@shared/context'\n\nimport DetailsPanelHeader from './DetailsPanelHeader/DetailsPanelHeader'\nimport DetailsPanelFiles from './DetailsPanelFiles'\nimport useGetEntityPath from './hooks/useGetEntityPath'\nimport getAllProjectStatuses from './helpers/getAllProjectsStatuses'\nimport FeedWrapper from './FeedWrapper'\nimport FeedContextWrapper from './FeedContextWrapper'\nimport mergeProjectInfo from './helpers/mergeProjectInfo'\n\nexport const entitiesWithoutFeed = ['product', 'representation']\n\ntype User = { avatarUrl: string; name: string; fullName?: string }\n\nexport type DetailsPanelProps = {\n  entityType: DetailsPanelEntityType\n  entitySubTypes?: string[] // used to get actions before the entity has loaded\n  entitiesData?: { id: string; label: string; type: DetailsPanelEntityType }[]\n  entities?: { id: string; projectName: string }[]\n  tagsOptions?: Tag[]\n  disabledStatuses?: string[]\n  projectUsers?: User[]\n  disabledProjectUsers?: string[]\n  activeProjectUsers?: string[]\n  projectsInfo?: Record<string, ProjectModel>\n  projectNames?: string[]\n  isSlideOut?: boolean\n  style?: React.CSSProperties\n  scope: string\n  isCompact?: boolean\n  onClose?: () => void\n  onWatchersUpdate?: (added: any[], removed: any[]) => void\n  onOpenViewer?: (entity: any) => void\n  onEntityFocus?: (id: string, entityType: DetailsPanelEntityType) => void\n  // annotations\n  annotations?: any\n  removeAnnotation?: (id: string) => void\n  exportAnnotationComposite?: (id: string) => Promise<Blob | null>\n  entityListId?: string\n  guestCategories?: Record<string, string> // only used for guests to find if they have access to any categories\n}\n\nexport const DetailsPanel = ({\n  entityType,\n  entitySubTypes = [],\n  // entities is data we already have from kanban\n  entitiesData = [],\n  // entityIds are used to get the full details data for the entities\n  entities = [],\n  tagsOptions = [],\n  disabledStatuses,\n  projectUsers,\n  disabledProjectUsers,\n  activeProjectUsers,\n  projectsInfo = {},\n  projectNames = [],\n  isSlideOut = false,\n  style = {},\n  scope,\n  isCompact = false,\n  onClose,\n  onWatchersUpdate,\n  onOpenViewer,\n  onEntityFocus,\n  // annotations\n  annotations,\n  removeAnnotation,\n  exportAnnotationComposite,\n  entityListId,\n  guestCategories = {},\n}: DetailsPanelProps) => {\n  const { closeSlideOut, openPip, user, isGuest } = useDetailsPanelContext()\n  const { currentTab, setTab, isFeed } = useScopedDetailsPanel(scope)\n\n  // Force details tab for specific entity types\n  useEffect(() => {\n    if (entitiesWithoutFeed.includes(entityType) && currentTab !== 'details') {\n      setTab('details')\n    }\n  }, [entityType, currentTab, setTab])\n\n  // reduce projectsInfo to selected projects and into one\n  const projectInfo = useMemo(\n    () => mergeProjectInfo(projectsInfo, projectNames),\n    [projectsInfo, projectNames],\n  )\n\n  // build icons for entity types\n  const entityTypeIcons = useMemo(\n    () => ({\n      task: projectInfo.taskTypes\n        .filter((task) => !!task.icon)\n        .reduce((acc, task) => ({ ...acc, [task.name]: task.icon }), {}),\n      folder: projectInfo.folderTypes\n        .filter((folder) => !!folder.icon)\n        .reduce((acc, folder) => ({ ...acc, [folder.name]: folder.icon }), {}),\n      product: Object.entries(productTypes).reduce(\n        (acc, [key, product]) => ({ ...acc, [key]: product.icon }),\n        {},\n      ),\n    }),\n    [projectInfo],\n  )\n\n  // check if tab needs to be updated when entity type changes\n  // for example when switching from version to task, task doesn't have reps tab\n  // if reps tab was selected, set default to feed\n  useEffect(() => {\n    if (currentTab === 'files') {\n      // check entity type is still version\n      if (entityType !== 'version') {\n        setTab('activity')\n      }\n    }\n  }, [entityType, currentTab, scope])\n\n  // now we get the full details data for selected entities\n  let entitiesToQuery = entities.length\n    ? entities.map((entity) => ({ id: entity.id, projectName: entity.projectName }))\n    : // @ts-expect-error = not sure what's going on with entitiesData, we should try and remove it\n      entitiesData.map((entity) => ({ id: entity.id, projectName: entity.projectName }))\n\n  entitiesToQuery = entitiesToQuery.filter((entity) => entity.id)\n\n  const {\n    data: entityDetailsData = [],\n    isFetching: isFetchingEntitiesDetails,\n    isError,\n    originalArgs,\n  } = useGetEntitiesDetailsPanelQuery(\n    { entityType, entities: entitiesToQuery },\n    {\n      skip: !entitiesToQuery.length || !detailsPanelEntityTypes.includes(entityType),\n    },\n  )\n\n  // the entity changes then we close the slide out\n  useEffect(() => {\n    if (!isSlideOut) {\n      closeSlideOut()\n    }\n  }, [originalArgs, isSlideOut])\n\n  // TODO:  merge current entities data with fresh details data\n\n  const allStatuses = getAllProjectStatuses(projectsInfo)\n\n  // get the first project name and info to be used in the feed.\n  const firstProject = projectNames[0]\n  const firstProjectInfo = projectsInfo[firstProject] || {}\n  const firstEntityData = entityDetailsData[0] || {}\n\n  // build the full entity path for the first entity\n  const [entityPathSegments, entityPathVersions] = useGetEntityPath({\n    entity: firstEntityData,\n    entityType,\n    projectName: firstProject,\n    isLoading: isFetchingEntitiesDetails,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Don't trigger if we're in an input element\n      const target = e.target as HTMLElement\n      const isInputElement =\n        ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || target.isContentEditable\n\n      if (e.key === 'Escape' && !isInputElement && onClose) {\n        onClose()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [onClose])\n\n  const { requestPipWindow } = usePiPWindow()\n\n  const handleOpenPip = () => {\n    openPip({\n      entityType: entityType,\n      entities: entitiesToQuery,\n      scope: scope,\n    })\n    requestPipWindow(500, 500)\n  }\n\n  const isCommentingEnabled = () => {\n    // cannot comment on multiple projects\n    if (projectNames.length > 1) return false\n    if (isGuest) {\n      // Guest can only comment in review sessions (for now)\n      if (!entityListId) return false\n      // Guest must have at least one category set for list\n      const guestHasCategory = Object.prototype.hasOwnProperty.call(\n        guestCategories,\n        user.attrib?.email || '',\n      )\n      if (!guestHasCategory) return false\n    }\n    return true\n  }\n\n  return (\n    <>\n      <Styled.Panel className=\"details-panel\">\n        <Styled.Toolbar>\n          {/* TODO FIX PATH */}\n          <EntityPath\n            segments={entityPathSegments}\n            versions={entityPathVersions}\n            projectName={firstProject}\n            hideProjectName={isSlideOut}\n            isLoading={isFetchingEntitiesDetails || !entityPathSegments.length}\n            entityType={entityType}\n            scope={scope}\n            // @ts-ignore\n            entityTypeIcons={entityTypeIcons}\n          />\n          <Styled.RightTools className=\"right-tools\">\n            <Watchers\n              entities={entitiesToQuery}\n              entityType={entityType}\n              options={projectUsers || []}\n              onWatchersUpdate={onWatchersUpdate && onWatchersUpdate}\n              userName={user.name}\n            />\n            <Button\n              icon=\"picture_in_picture\"\n              variant={'text'}\n              data-tooltip=\"Picture in Picture\"\n              onClick={handleOpenPip}\n            />\n\n            {onClose && (\n              <Button\n                icon=\"close\"\n                variant={'text'}\n                onClick={() => onClose && onClose()}\n                data-shortcut={'Escape'}\n              />\n            )}\n          </Styled.RightTools>\n        </Styled.Toolbar>\n\n        <DetailsPanelHeader\n          entityType={entityType}\n          entitySubTypes={entitySubTypes}\n          entities={entityDetailsData}\n          users={projectUsers}\n          disabledAssignees={disabledProjectUsers}\n          disabledStatuses={disabledStatuses}\n          tagsOptions={tagsOptions}\n          isFetching={isFetchingEntitiesDetails}\n          isCompact={isCompact}\n          currentTab={currentTab}\n          onTabChange={setTab}\n          entityTypeIcons={entityTypeIcons}\n          onOpenViewer={(args) => onOpenViewer?.(args)}\n          onEntityFocus={onEntityFocus}\n        />\n        {isFeed && !isError && (\n          <FeedWrapper\n            entityType={entityType}\n            entities={entityDetailsData}\n            activeUsers={activeProjectUsers || []}\n            projectInfo={firstProjectInfo}\n            projectName={firstProject}\n            disabled={!isCommentingEnabled()}\n            scope={scope}\n            statuses={allStatuses}\n            readOnly={false}\n            entityListId={entityListId}\n            annotations={annotations}\n            removeAnnotation={removeAnnotation}\n            exportAnnotationComposite={exportAnnotationComposite}\n          />\n        )}\n        {currentTab === 'files' && (\n          <DetailsPanelFiles\n            entities={entityDetailsData}\n            scope={scope}\n            isLoadingVersion={isFetchingEntitiesDetails}\n          />\n        )}\n        {currentTab === 'details' && (\n          <FeedContextWrapper\n            entityType={entityType}\n            entities={entityDetailsData}\n            activeUsers={activeProjectUsers || []}\n            projectInfo={firstProjectInfo}\n            projectName={firstProject}\n            disabled={!isCommentingEnabled()}\n            scope={scope}\n            statuses={allStatuses}\n            readOnly={false}\n            annotations={annotations}\n            removeAnnotation={removeAnnotation}\n            exportAnnotationComposite={exportAnnotationComposite}\n          >\n            <DetailsPanelDetails\n              entities={entityDetailsData}\n              isLoading={isFetchingEntitiesDetails}\n            />\n          </FeedContextWrapper>\n        )}\n      </Styled.Panel>\n    </>\n  )\n}\n"],"names":["entitiesWithoutFeed","DetailsPanel","entityType","entitySubTypes","entitiesData","entities","tagsOptions","disabledStatuses","projectUsers","disabledProjectUsers","activeProjectUsers","projectsInfo","projectNames","isSlideOut","style","scope","isCompact","onClose","onWatchersUpdate","onOpenViewer","onEntityFocus","annotations","removeAnnotation","exportAnnotationComposite","entityListId","guestCategories","closeSlideOut","openPip","user","isGuest","useDetailsPanelContext","currentTab","setTab","isFeed","useScopedDetailsPanel","useEffect","projectInfo","useMemo","mergeProjectInfo","entityTypeIcons","task","acc","folder","productTypes","key","product","entitiesToQuery","entity","entityDetailsData","isFetchingEntitiesDetails","isError","originalArgs","useGetEntitiesDetailsPanelQuery","detailsPanelEntityTypes","allStatuses","getAllProjectStatuses","firstProject","firstProjectInfo","firstEntityData","entityPathSegments","entityPathVersions","useGetEntityPath","handleKeyDown","e","target","isInputElement","requestPipWindow","usePiPWindow","handleOpenPip","isCommentingEnabled","_a","jsxs","Styled.Panel","Styled.Toolbar","jsx","EntityPath","Styled.RightTools","Watchers","Button","DetailsPanelHeader","args","FeedWrapper","DetailsPanelFiles","FeedContextWrapper","DetailsPanelDetails"],"mappings":"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"}
+{"version":3,"file":"DetailsPanel.cjs.js","sources":["../../../../../src/containers/DetailsPanel/DetailsPanel.tsx"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport React, { useEffect, useMemo, useRef } from 'react'\nimport * as Styled from './DetailsPanel.styled'\n\n// shared\nimport { useGetEntitiesDetailsPanelQuery, detailsPanelEntityTypes } from '@shared/api'\nimport type { ProjectModel, Tag, DetailsPanelEntityType } from '@shared/api'\nimport { DetailsPanelDetails, EntityPath, Watchers } from '@shared/components'\nimport { usePiPWindow } from '@shared/context/pip/PiPProvider'\nimport { productTypes } from '@shared/util'\nimport { useDetailsPanelContext, usePowerpack, useScopedDetailsPanel } from '@shared/context'\n\nimport DetailsPanelHeader from './DetailsPanelHeader/DetailsPanelHeader'\nimport DetailsPanelFiles from './DetailsPanelFiles'\nimport useGetEntityPath from './hooks/useGetEntityPath'\nimport getAllProjectStatuses from './helpers/getAllProjectsStatuses'\nimport FeedWrapper from './FeedWrapper'\nimport FeedContextWrapper from './FeedContextWrapper'\nimport mergeProjectInfo from './helpers/mergeProjectInfo'\n\nexport const entitiesWithoutFeed = ['product', 'representation']\n\ntype User = { avatarUrl: string; name: string; fullName?: string }\n\nexport type DetailsPanelProps = {\n  entityType: DetailsPanelEntityType\n  entitySubTypes?: string[] // used to get actions before the entity has loaded\n  entitiesData?: { id: string; label: string; type: DetailsPanelEntityType }[]\n  entities?: { id: string; projectName: string }[]\n  tagsOptions?: Tag[]\n  disabledStatuses?: string[]\n  projectUsers?: User[]\n  disabledProjectUsers?: string[]\n  activeProjectUsers?: string[]\n  projectsInfo?: Record<string, ProjectModel>\n  projectNames?: string[]\n  isSlideOut?: boolean\n  style?: React.CSSProperties\n  scope: string\n  isCompact?: boolean\n  onClose?: () => void\n  onWatchersUpdate?: (added: any[], removed: any[]) => void\n  onOpenViewer?: (entity: any) => void\n  onEntityFocus?: (id: string, entityType: DetailsPanelEntityType) => void\n  onOpen?: () => void\n  // annotations\n  annotations?: any\n  removeAnnotation?: (id: string) => void\n  exportAnnotationComposite?: (id: string) => Promise<Blob | null>\n  entityListId?: string\n  guestCategories?: Record<string, string> // only used for guests to find if they have access to any categories\n}\n\nexport const DetailsPanel = ({\n  entityType,\n  entitySubTypes = [],\n  // entities is data we already have from kanban\n  entitiesData = [],\n  // entityIds are used to get the full details data for the entities\n  entities = [],\n  tagsOptions = [],\n  disabledStatuses,\n  projectUsers,\n  disabledProjectUsers,\n  activeProjectUsers,\n  projectsInfo = {},\n  projectNames = [],\n  isSlideOut = false,\n  style = {},\n  scope,\n  isCompact = false,\n  onClose,\n  onWatchersUpdate,\n  onOpenViewer,\n  onEntityFocus,\n  onOpen,\n  // annotations\n  annotations,\n  removeAnnotation,\n  exportAnnotationComposite,\n  entityListId,\n  guestCategories = {},\n}: DetailsPanelProps) => {\n  const {\n    closeSlideOut,\n    openPip,\n    user,\n    isGuest,\n    entities: contextEntities,\n  } = useDetailsPanelContext()\n  const { currentTab, setTab, isFeed } = useScopedDetailsPanel(scope)\n  const hasCalledOnOpen = useRef(false)\n\n  // Use context entities if available, otherwise use props\n  const activeEntityType = contextEntities?.entityType ?? entityType\n  const activeEntities = contextEntities?.entities ?? entities\n  const activeEntitySubTypes = contextEntities?.entitySubTypes ?? entitySubTypes\n\n  // Fire onOpen callback once when component mounts and renders\n  useEffect(() => {\n    if (onOpen && !hasCalledOnOpen.current) {\n      hasCalledOnOpen.current = true\n      onOpen()\n    }\n  }, [])\n\n  // Force details tab for specific entity types\n  useEffect(() => {\n    if (entitiesWithoutFeed.includes(activeEntityType) && currentTab !== 'details') {\n      setTab('details')\n    }\n  }, [activeEntityType, currentTab, setTab])\n\n  // reduce projectsInfo to selected projects and into one\n  const projectInfo = useMemo(\n    () => mergeProjectInfo(projectsInfo, projectNames),\n    [projectsInfo, projectNames],\n  )\n\n  // build icons for entity types\n  const entityTypeIcons = useMemo(\n    () => ({\n      task: projectInfo.taskTypes\n        .filter((task) => !!task.icon)\n        .reduce((acc, task) => ({ ...acc, [task.name]: task.icon }), {}),\n      folder: projectInfo.folderTypes\n        .filter((folder) => !!folder.icon)\n        .reduce((acc, folder) => ({ ...acc, [folder.name]: folder.icon }), {}),\n      product: Object.entries(productTypes).reduce(\n        (acc, [key, product]) => ({ ...acc, [key]: product.icon }),\n        {},\n      ),\n    }),\n    [projectInfo],\n  )\n\n  // check if tab needs to be updated when entity type changes\n  // for example when switching from version to task, task doesn't have reps tab\n  // if reps tab was selected, set default to feed\n  useEffect(() => {\n    if (currentTab === 'files') {\n      // check entity type is still version\n      if (activeEntityType !== 'version') {\n        setTab('activity')\n      }\n    }\n  }, [activeEntityType, currentTab, scope])\n\n  // now we get the full details data for selected entities\n  let entitiesToQuery = activeEntities.length\n    ? activeEntities.map((entity) => ({ id: entity.id, projectName: entity.projectName }))\n    : // @ts-expect-error = not sure what's going on with entitiesData, we should try and remove it\n      entitiesData.map((entity) => ({ id: entity.id, projectName: entity.projectName }))\n\n  entitiesToQuery = entitiesToQuery.filter((entity) => entity.id)\n\n  const {\n    data: entityDetailsData = [],\n    isFetching: isFetchingEntitiesDetails,\n    isError,\n    originalArgs,\n  } = useGetEntitiesDetailsPanelQuery(\n    { entityType: activeEntityType, entities: entitiesToQuery },\n    {\n      skip: !entitiesToQuery.length || !detailsPanelEntityTypes.includes(activeEntityType),\n    },\n  )\n\n  // the entity changes then we close the slide out\n  useEffect(() => {\n    if (!isSlideOut) {\n      closeSlideOut()\n    }\n  }, [originalArgs, isSlideOut])\n\n  // TODO:  merge current entities data with fresh details data\n\n  const allStatuses = getAllProjectStatuses(projectsInfo)\n\n  // get the first project name and info to be used in the feed.\n  const firstProject = projectNames[0]\n  const firstProjectInfo = projectsInfo[firstProject] || {}\n  const firstEntityData = entityDetailsData[0] || {}\n\n  // build the full entity path for the first entity\n  const [entityPathSegments, entityPathVersions] = useGetEntityPath({\n    entity: firstEntityData,\n    entityType: activeEntityType,\n    projectName: firstProject,\n    isLoading: isFetchingEntitiesDetails,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && onClose) {\n        // Don't trigger if we're in an input element\n        const target = e.target as HTMLElement\n        const isInputElement =\n          ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || target.isContentEditable\n\n        if (!isInputElement) return\n\n        // don't trigger if the viewer is open and panel not in slideout mode\n        if (isSlideOut === false && target.closest('#viewer-dialog')) return\n\n        onClose()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [onClose, isSlideOut])\n\n  const { requestPipWindow } = usePiPWindow()\n\n  const handleOpenPip = () => {\n    openPip({\n      entityType: activeEntityType,\n      entities: entitiesToQuery,\n      scope: scope,\n    })\n    requestPipWindow(500, 500)\n  }\n\n  const isCommentingEnabled = () => {\n    // cannot comment on multiple projects\n    if (projectNames.length > 1) return false\n    if (isGuest) {\n      // Guest can only comment in review sessions (for now)\n      if (!entityListId) return false\n      // Guest must have at least one category set for list\n      const guestHasCategory = Object.prototype.hasOwnProperty.call(\n        guestCategories,\n        user.attrib?.email || '',\n      )\n      if (!guestHasCategory) return false\n    }\n    return true\n  }\n\n  return (\n    <>\n      <Styled.Panel className=\"details-panel\">\n        <Styled.Toolbar>\n          {/* TODO FIX PATH */}\n          <EntityPath\n            segments={entityPathSegments}\n            versions={entityPathVersions}\n            projectName={firstProject}\n            hideProjectName={isSlideOut}\n            isLoading={isFetchingEntitiesDetails || !entityPathSegments.length}\n            entityType={activeEntityType}\n            scope={scope}\n            // @ts-ignore\n            entityTypeIcons={entityTypeIcons}\n          />\n          <Styled.RightTools className=\"right-tools\">\n            <Watchers\n              entities={entitiesToQuery}\n              entityType={entityType}\n              options={projectUsers || []}\n              onWatchersUpdate={onWatchersUpdate && onWatchersUpdate}\n              userName={user.name}\n            />\n            <Button\n              icon=\"picture_in_picture\"\n              variant={'text'}\n              data-tooltip=\"Picture in Picture\"\n              onClick={handleOpenPip}\n            />\n\n            {onClose && (\n              <Button\n                icon=\"close\"\n                variant={'text'}\n                onClick={() => onClose && onClose()}\n                data-shortcut={'Escape'}\n              />\n            )}\n          </Styled.RightTools>\n        </Styled.Toolbar>\n\n        <DetailsPanelHeader\n          entityType={activeEntityType}\n          entitySubTypes={activeEntitySubTypes}\n          entities={entityDetailsData}\n          users={projectUsers}\n          disabledAssignees={disabledProjectUsers}\n          disabledStatuses={disabledStatuses}\n          tagsOptions={tagsOptions}\n          isFetching={isFetchingEntitiesDetails}\n          isCompact={isCompact}\n          currentTab={currentTab}\n          onTabChange={setTab}\n          entityTypeIcons={entityTypeIcons}\n          onOpenViewer={(args) => onOpenViewer?.(args)}\n          onEntityFocus={onEntityFocus}\n        />\n        {isFeed && !isError && (\n          <FeedWrapper\n            entityType={activeEntityType}\n            entities={entityDetailsData}\n            activeUsers={activeProjectUsers || []}\n            projectInfo={firstProjectInfo}\n            projectName={firstProject}\n            disabled={!isCommentingEnabled()}\n            scope={scope}\n            statuses={allStatuses}\n            readOnly={false}\n            entityListId={entityListId}\n            annotations={annotations}\n            removeAnnotation={removeAnnotation}\n            exportAnnotationComposite={exportAnnotationComposite}\n          />\n        )}\n        {currentTab === 'files' && (\n          <DetailsPanelFiles\n            entities={entityDetailsData}\n            scope={scope}\n            isLoadingVersion={isFetchingEntitiesDetails}\n          />\n        )}\n        {currentTab === 'details' && (\n          <FeedContextWrapper\n            entityType={activeEntityType}\n            entities={entityDetailsData}\n            activeUsers={activeProjectUsers || []}\n            projectInfo={firstProjectInfo}\n            projectName={firstProject}\n            disabled={!isCommentingEnabled()}\n            scope={scope}\n            statuses={allStatuses}\n            readOnly={false}\n            annotations={annotations}\n            removeAnnotation={removeAnnotation}\n            exportAnnotationComposite={exportAnnotationComposite}\n          >\n            <DetailsPanelDetails\n              entities={entityDetailsData}\n              isLoading={isFetchingEntitiesDetails}\n            />\n          </FeedContextWrapper>\n        )}\n      </Styled.Panel>\n    </>\n  )\n}\n"],"names":["entitiesWithoutFeed","DetailsPanel","entityType","entitySubTypes","entitiesData","entities","tagsOptions","disabledStatuses","projectUsers","disabledProjectUsers","activeProjectUsers","projectsInfo","projectNames","isSlideOut","style","scope","isCompact","onClose","onWatchersUpdate","onOpenViewer","onEntityFocus","onOpen","annotations","removeAnnotation","exportAnnotationComposite","entityListId","guestCategories","closeSlideOut","openPip","user","isGuest","contextEntities","useDetailsPanelContext","currentTab","setTab","isFeed","useScopedDetailsPanel","hasCalledOnOpen","useRef","activeEntityType","activeEntities","activeEntitySubTypes","useEffect","projectInfo","useMemo","mergeProjectInfo","entityTypeIcons","task","acc","folder","productTypes","key","product","entitiesToQuery","entity","entityDetailsData","isFetchingEntitiesDetails","isError","originalArgs","useGetEntitiesDetailsPanelQuery","detailsPanelEntityTypes","allStatuses","getAllProjectStatuses","firstProject","firstProjectInfo","firstEntityData","entityPathSegments","entityPathVersions","useGetEntityPath","handleKeyDown","e","target","requestPipWindow","usePiPWindow","handleOpenPip","isCommentingEnabled","_a","jsxs","Styled.Panel","Styled.Toolbar","jsx","EntityPath","Styled.RightTools","Watchers","Button","DetailsPanelHeader","args","FeedWrapper","DetailsPanelFiles","FeedContextWrapper","DetailsPanelDetails"],"mappings":"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"}

package/dist/shared/src/containers/DetailsPanel/DetailsPanel.es.js

@@ -1,7 +1,7 @@
 import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
-import { Button as A } from "@ynput/ayon-react-components";
-import { useEffect as g, useMemo as G } from "react";
-import { Panel as tt, Toolbar as it, RightTools as rt } from "./DetailsPanel.styled.es.js";
+import { Button as G } from "@ynput/ayon-react-components";
+import { useRef as pt, useEffect as u, useMemo as H } from "react";
+import { Panel as et, Toolbar as st, RightTools as nt } from "./DetailsPanel.styled.es.js";
 import "../../api/base/client.es.js";
 import "../../api/generated/graphql.es.js";
 import "../../api/generated/graphqlLinks.es.js";
@@ -53,8 +53,8 @@ import "../../api/queries/attributes/updateAttributes.es.js";
 import "../../api/queries/authentication/getAuthentication.es.js";
 import "../../api/queries/cloud/cloud.es.js";
 import "../../api/queries/entities/getEntity.es.js";
-import { useGetEntitiesDetailsPanelQuery as ot } from "../../api/queries/entities/getEntityPanel.es.js";
-import { detailsPanelEntityTypes as mt } from "../../api/queries/entities/transformDetailsPanelData.es.js";
+import { useGetEntitiesDetailsPanelQuery as at } from "../../api/queries/entities/getEntityPanel.es.js";
+import { detailsPanelEntityTypes as lt } from "../../api/queries/entities/transformDetailsPanelData.es.js";
 import "../../api/queries/entities/updateEntity.es.js";
 import "../../api/queries/entityLists/getLists.es.js";
 import "../../api/queries/entityLists/updateLists.es.js";
@@ -68,6 +68,7 @@ import "../../api/queries/links/getLinks.es.js";
 import "../../api/queries/links/getEntityLinks.es.js";
 import "../../api/queries/overview/getOverview.es.js";
 import "../../api/queries/overview/updateOverview.es.js";
+import "../../api/queries/versions/getVersionsProducts.es.js";
 import "../../api/queries/permissions/getPermissions.es.js";
 import "../../api/queries/products/createProduct.es.js";
 import "../../api/queries/project/getProject.es.js";
@@ -94,17 +95,17 @@ import "@dnd-kit/sortable";
 import "../../components/ReviewablesList/ReviewablesList.styled.es.js";
 import "../ContextMenu/ContextMenuContext.es.js";
 /* empty css                                 */
-import pt from "../../util/productTypes.es.js";
+import ct from "../../util/productTypes.es.js";
 import "lodash";
 import "uuid";
 import "../../util/pubsub.es.js";
 import "../../components/ReviewablesList/ReviewablesUpload.styled.es.js";
 import "axios";
 import "../../context/RemoteModulesContext.es.js";
-import { useDetailsPanelContext as et, useScopedDetailsPanel as st } from "../../context/DetailsPanelContext.es.js";
+import { useDetailsPanelContext as dt, useScopedDetailsPanel as ft } from "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
 import "../../context/SettingsPanelContext.es.js";
-import { usePiPWindow as at } from "../../context/pip/PiPProvider.es.js";
+import { usePiPWindow as ut } from "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
 import "../../context/AddonProjectContext.es.js";
@@ -151,6 +152,7 @@ import "../Feed/components/ActivityCategorySelect/ActivityCategorySelect.es.js";
 import "../Feed/components/ActivityCategorySelect/CategoryDropdownItem.es.js";
 import "../ProjectTreeTable/ProjectTreeTable.es.js";
 import "../ProjectTreeTable/context/CellEditingContext.es.js";
+import "short-uuid";
 import "@tanstack/react-table";
 import "../ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../ProjectTreeTable/widgets/DateWidget.es.js";
@@ -165,6 +167,8 @@ import "../../components/LinksManager/CellEditingDialog.es.js";
 import "../ProjectTreeTable/context/DetailsPanelEntityContext.es.js";
 import "../ProjectTreeTable/context/SelectedRowsContext.es.js";
 import "../../components/LinksManager/LinksManager.styled.es.js";
+import "../ProjectTreeTable/widgets/EmptyWidget.es.js";
+import "../ProjectTreeTable/widgets/ErrorWidget.es.js";
 import "../ProjectTreeTable/ProjectTreeTable.styled.es.js";
 import "../ProjectTreeTable/components/SelectionCell.es.js";
 import "../ProjectTreeTable/components/RowSelectionHeader.es.js";
@@ -182,13 +186,13 @@ import "custom-protocol-check";
 import "../ProjectTreeTable/components/GroupSettingsFallback.es.js";
 import "../ProjectTreeTable/components/HeaderActionButton.es.js";
 import "../ProjectTreeTable/components/ColumnHeaderMenu.es.js";
-import nt from "./DetailsPanelHeader/DetailsPanelHeader.es.js";
-import lt from "./DetailsPanelFiles/DetailsPanelFiles.es.js";
-import ct from "./hooks/useGetEntityPath.es.js";
-import dt from "./helpers/getAllProjectsStatuses.es.js";
-import ft from "./FeedWrapper.es.js";
-import ut from "./FeedContextWrapper.es.js";
-import gt from "./helpers/mergeProjectInfo.es.js";
+import yt from "./DetailsPanelHeader/DetailsPanelHeader.es.js";
+import gt from "./DetailsPanelFiles/DetailsPanelFiles.es.js";
+import ht from "./hooks/useGetEntityPath.es.js";
+import Pt from "./helpers/getAllProjectsStatuses.es.js";
+import Tt from "./FeedWrapper.es.js";
+import jt from "./FeedContextWrapper.es.js";
+import Et from "./helpers/mergeProjectInfo.es.js";
 import "./DetailsPanelHeader/DetailsPanelHeader.styled.es.js";
 import "./DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
 import "./DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
@@ -201,23 +205,25 @@ import "../Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
 import "../Views/ViewsMenu/ViewsMenu.es.js";
 import "../../components/EntityPanelUploader/EntityPanelUploader.styled.es.js";
 import "../../components/SimpleFormDialog/SimpleFormDialog.es.js";
-import { EntityPath as ht } from "../../components/EntityPath/EntityPath.es.js";
+import { EntityPath as bt } from "../../components/EntityPath/EntityPath.es.js";
 import "../../components/DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
-import { DetailsPanelDetails as Pt } from "../../components/DetailsPanelDetails/DetailsPanelDetails.es.js";
+import { DetailsPanelDetails as xt } from "../../components/DetailsPanelDetails/DetailsPanelDetails.es.js";
 import "../../components/DetailsPanelDetails/DetailsSection.es.js";
 import "../../components/DetailsPanelDetails/FieldLabel.es.js";
-import { Watchers as jt } from "../../components/Watchers/Watchers.es.js";
+import { Watchers as Dt } from "../../components/Watchers/Watchers.es.js";
 import "../../components/ProjectTableSettings/ProjectTableSettings.es.js";
 import "../../components/Powerpack/PowerpackButton.es.js";
 import "../../components/Powerpack/PricingLink.es.js";
 import "../../components/Powerpack/PowerpackDialog.styled.es.js";
 import "../../components/Powerpack/CTAButton.es.js";
 import "../../components/Powerpack/RequiredAddonVersion.es.js";
+import "../../components/SizeSlider/SizeSlider.es.js";
 import "../../components/SettingsPanel/SettingsPanel.es.js";
 import "../../components/SettingsPanel/SettingsPanelItemTemplate.es.js";
 import "../../components/AttributeEditor/components/MinMaxField.es.js";
 import "../../components/EnumEditor/EnumEditor.styled.es.js";
 import "../../components/SearchFilter/filterDates.es.js";
+import "../../components/FeaturedVersionOrder/FeaturedVersionOrder.es.js";
 import "../../components/Badge/Badge.es.js";
 import "../../components/VersionUploader/components/UploadVersionDialog.es.js";
 import "../../components/VersionUploader/context/VersionUploadContext.es.js";
@@ -230,212 +236,228 @@ import "../../components/ShareOptionIcon/ShareOptionIcon.es.js";
 import "../../components/AccessUser/AccessUser.es.js";
 import "../../../../node_modules/match-sorter/dist/match-sorter.esm.es.js";
 import "../../components/AccessSearchInput/AccessSearchInput.styled.es.js";
-const Et = ["product", "representation"], Om = ({
-  entityType: r,
-  entitySubTypes: H = [],
+import "../../components/TableGridSwitch/TableGridSwitch.es.js";
+import "../../components/SortingSetting/SortingSetting.styled.es.js";
+import "../../components/EarlyPreview/EarlyPreview.es.js";
+import "../../components/LegacyBadge/LegacyBadge.es.js";
+const vt = ["product", "representation"], ip = ({
+  entityType: j,
+  entitySubTypes: Q = [],
   // entities is data we already have from kanban
-  entitiesData: R = [],
+  entitiesData: _ = [],
   // entityIds are used to get the full details data for the entities
-  entities: E = [],
-  tagsOptions: T = [],
-  disabledStatuses: O,
-  projectUsers: x,
-  disabledProjectUsers: Q,
-  activeProjectUsers: D,
-  projectsInfo: c = {},
-  projectNames: d = [],
-  isSlideOut: h = !1,
-  style: xt = {},
-  scope: m,
-  isCompact: _ = !1,
-  onClose: e,
-  onWatchersUpdate: b,
+  entities: q = [],
+  tagsOptions: B = [],
+  disabledStatuses: K,
+  projectUsers: E,
+  disabledProjectUsers: M,
+  activeProjectUsers: b,
+  projectsInfo: y = {},
+  projectNames: g = [],
+  isSlideOut: l = !1,
+  style: Nt = {},
+  scope: p,
+  isCompact: O = !1,
+  onClose: s,
+  onWatchersUpdate: x,
   onOpenViewer: P,
-  onEntityFocus: q,
+  onEntityFocus: U,
+  onOpen: D,
   // annotations
-  annotations: N,
-  removeAnnotation: F,
-  exportAnnotationComposite: v,
-  entityListId: k,
-  guestCategories: y = {}
+  annotations: v,
+  removeAnnotation: N,
+  exportAnnotationComposite: F,
+  entityListId: w,
+  guestCategories: X = {}
 }) => {
-  const { closeSlideOut: B, openPip: K, user: w, isGuest: M } = et(), { currentTab: p, setTab: f, isFeed: U } = st(m);
-  g(() => {
-    Et.includes(r) && p !== "details" && f("details");
-  }, [r, p, f]);
-  const j = G(
-    () => gt(c, d),
-    [c, d]
-  ), L = G(
+  const {
+    closeSlideOut: z,
+    openPip: J,
+    user: k,
+    isGuest: Y,
+    entities: m
+  } = dt(), { currentTab: e, setTab: h, isFeed: Z } = ft(p), L = pt(!1), r = (m == null ? void 0 : m.entityType) ?? j, W = (m == null ? void 0 : m.entities) ?? q, $ = (m == null ? void 0 : m.entitySubTypes) ?? Q;
+  u(() => {
+    D && !L.current && (L.current = !0, D());
+  }, []), u(() => {
+    vt.includes(r) && e !== "details" && h("details");
+  }, [r, e, h]);
+  const T = H(
+    () => Et(y, g),
+    [y, g]
+  ), C = H(
     () => ({
-      task: j.taskTypes.filter((t) => !!t.icon).reduce((t, o) => ({ ...t, [o.name]: o.icon }), {}),
-      folder: j.folderTypes.filter((t) => !!t.icon).reduce((t, o) => ({ ...t, [o.name]: o.icon }), {}),
-      product: Object.entries(pt).reduce(
-        (t, [o, u]) => ({ ...t, [o]: u.icon }),
+      task: T.taskTypes.filter((t) => !!t.icon).reduce((t, o) => ({ ...t, [o.name]: o.icon }), {}),
+      folder: T.folderTypes.filter((t) => !!t.icon).reduce((t, o) => ({ ...t, [o.name]: o.icon }), {}),
+      product: Object.entries(ct).reduce(
+        (t, [o, f]) => ({ ...t, [o]: f.icon }),
         {}
       )
     }),
-    [j]
+    [T]
   );
-  g(() => {
-    p === "files" && r !== "version" && f("activity");
-  }, [r, p, m]);
-  let s = E.length ? E.map((t) => ({ id: t.id, projectName: t.projectName })) : (
+  u(() => {
+    e === "files" && r !== "version" && h("activity");
+  }, [r, e, p]);
+  let n = W.length ? W.map((t) => ({ id: t.id, projectName: t.projectName })) : (
     // @ts-expect-error = not sure what's going on with entitiesData, we should try and remove it
-    R.map((t) => ({ id: t.id, projectName: t.projectName }))
+    _.map((t) => ({ id: t.id, projectName: t.projectName }))
   );
-  s = s.filter((t) => t.id);
+  n = n.filter((t) => t.id);
   const {
     data: a = [],
-    isFetching: n,
-    isError: X,
-    originalArgs: z
-  } = ot(
-    { entityType: r, entities: s },
+    isFetching: c,
+    isError: V,
+    originalArgs: tt
+  } = at(
+    { entityType: r, entities: n },
     {
-      skip: !s.length || !mt.includes(r)
+      skip: !n.length || !lt.includes(r)
     }
   );
-  g(() => {
-    h || B();
-  }, [z, h]);
-  const W = dt(c), l = d[0], C = c[l] || {}, J = a[0] || {}, [I, Y] = ct({
-    entity: J,
+  u(() => {
+    l || z();
+  }, [tt, l]);
+  const I = Pt(y), d = g[0], S = y[d] || {}, it = a[0] || {}, [R, rt] = ht({
+    entity: it,
     entityType: r,
-    projectName: l,
-    isLoading: n
+    projectName: d,
+    isLoading: c
   });
-  g(() => {
+  u(() => {
     const t = (o) => {
-      const u = o.target, V = ["INPUT", "TEXTAREA", "SELECT"].includes(u.tagName) || u.isContentEditable;
-      o.key === "Escape" && !V && e && e();
+      if (o.key === "Escape" && s) {
+        const f = o.target;
+        if (!(["INPUT", "TEXTAREA", "SELECT"].includes(f.tagName) || f.isContentEditable) || l === !1 && f.closest("#viewer-dialog")) return;
+        s();
+      }
     };
     return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [e]);
-  const { requestPipWindow: Z } = at(), $ = () => {
-    K({
+  }, [s, l]);
+  const { requestPipWindow: ot } = ut(), mt = () => {
+    J({
       entityType: r,
-      entities: s,
-      scope: m
-    }), Z(500, 500);
-  }, S = () => {
+      entities: n,
+      scope: p
+    }), ot(500, 500);
+  }, A = () => {
     var t;
-    return !(d.length > 1 || M && (!k || !Object.prototype.hasOwnProperty.call(
-      y,
-      ((t = w.attrib) == null ? void 0 : t.email) || ""
+    return !(g.length > 1 || Y && (!w || !Object.prototype.hasOwnProperty.call(
+      X,
+      ((t = k.attrib) == null ? void 0 : t.email) || ""
     )));
   };
-  return /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsxs(tt, { className: "details-panel", children: [
-    /* @__PURE__ */ i.jsxs(it, { children: [
+  return /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsxs(et, { className: "details-panel", children: [
+    /* @__PURE__ */ i.jsxs(st, { children: [
       /* @__PURE__ */ i.jsx(
-        ht,
+        bt,
         {
-          segments: I,
-          versions: Y,
-          projectName: l,
-          hideProjectName: h,
-          isLoading: n || !I.length,
+          segments: R,
+          versions: rt,
+          projectName: d,
+          hideProjectName: l,
+          isLoading: c || !R.length,
           entityType: r,
-          scope: m,
-          entityTypeIcons: L
+          scope: p,
+          entityTypeIcons: C
         }
       ),
-      /* @__PURE__ */ i.jsxs(rt, { className: "right-tools", children: [
+      /* @__PURE__ */ i.jsxs(nt, { className: "right-tools", children: [
         /* @__PURE__ */ i.jsx(
-          jt,
+          Dt,
           {
-            entities: s,
-            entityType: r,
-            options: x || [],
-            onWatchersUpdate: b && b,
-            userName: w.name
+            entities: n,
+            entityType: j,
+            options: E || [],
+            onWatchersUpdate: x && x,
+            userName: k.name
           }
         ),
         /* @__PURE__ */ i.jsx(
-          A,
+          G,
           {
             icon: "picture_in_picture",
             variant: "text",
             "data-tooltip": "Picture in Picture",
-            onClick: $
+            onClick: mt
           }
         ),
-        e && /* @__PURE__ */ i.jsx(
-          A,
+        s && /* @__PURE__ */ i.jsx(
+          G,
           {
             icon: "close",
             variant: "text",
-            onClick: () => e && e(),
+            onClick: () => s && s(),
             "data-shortcut": "Escape"
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ i.jsx(
-      nt,
+      yt,
       {
         entityType: r,
-        entitySubTypes: H,
+        entitySubTypes: $,
         entities: a,
-        users: x,
-        disabledAssignees: Q,
-        disabledStatuses: O,
-        tagsOptions: T,
-        isFetching: n,
-        isCompact: _,
-        currentTab: p,
-        onTabChange: f,
-        entityTypeIcons: L,
+        users: E,
+        disabledAssignees: M,
+        disabledStatuses: K,
+        tagsOptions: B,
+        isFetching: c,
+        isCompact: O,
+        currentTab: e,
+        onTabChange: h,
+        entityTypeIcons: C,
         onOpenViewer: (t) => P == null ? void 0 : P(t),
-        onEntityFocus: q
+        onEntityFocus: U
       }
     ),
-    U && !X && /* @__PURE__ */ i.jsx(
-      ft,
+    Z && !V && /* @__PURE__ */ i.jsx(
+      Tt,
       {
         entityType: r,
         entities: a,
-        activeUsers: D || [],
-        projectInfo: C,
-        projectName: l,
-        disabled: !S(),
-        scope: m,
-        statuses: W,
+        activeUsers: b || [],
+        projectInfo: S,
+        projectName: d,
+        disabled: !A(),
+        scope: p,
+        statuses: I,
         readOnly: !1,
-        entityListId: k,
-        annotations: N,
-        removeAnnotation: F,
-        exportAnnotationComposite: v
+        entityListId: w,
+        annotations: v,
+        removeAnnotation: N,
+        exportAnnotationComposite: F
       }
     ),
-    p === "files" && /* @__PURE__ */ i.jsx(
-      lt,
+    e === "files" && /* @__PURE__ */ i.jsx(
+      gt,
       {
         entities: a,
-        scope: m,
-        isLoadingVersion: n
+        scope: p,
+        isLoadingVersion: c
       }
     ),
-    p === "details" && /* @__PURE__ */ i.jsx(
-      ut,
+    e === "details" && /* @__PURE__ */ i.jsx(
+      jt,
       {
         entityType: r,
         entities: a,
-        activeUsers: D || [],
-        projectInfo: C,
-        projectName: l,
-        disabled: !S(),
-        scope: m,
-        statuses: W,
+        activeUsers: b || [],
+        projectInfo: S,
+        projectName: d,
+        disabled: !A(),
+        scope: p,
+        statuses: I,
         readOnly: !1,
-        annotations: N,
-        removeAnnotation: F,
-        exportAnnotationComposite: v,
+        annotations: v,
+        removeAnnotation: N,
+        exportAnnotationComposite: F,
         children: /* @__PURE__ */ i.jsx(
-          Pt,
+          xt,
           {
             entities: a,
-            isLoading: n
+            isLoading: c
           }
         )
       }
@@ -443,7 +465,7 @@ const Et = ["product", "representation"], Om = ({
   ] }) });
 };
 export {
-  Om as DetailsPanel,
-  Et as entitiesWithoutFeed
+  ip as DetailsPanel,
+  vt as entitiesWithoutFeed
 };
 //# sourceMappingURL=DetailsPanel.es.js.map