@ynput/ayon-frontend-shared 0.2.18 → 0.2.19

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

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelHeader.cjs.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetEntitiesChecklistsQuery, useGetAttributeConfigQuery } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport FeedFilters from '../FeedFilters/FeedFilters'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../helpers/getThumbnails'\nimport { buildDetailsPanelTitles } from '../helpers/buildDetailsPanelTitles'\n\nexport type EntityTypeIcons = {\n  folder: Record<string, string>\n  task: Record<string, string>\n  product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n  entityType: 'folder' | 'task' | 'version' | 'representation'\n  entitySubTypes: string[]\n  entities: DetailsPanelEntityData[]\n  disabledAssignees?: any[]\n  users?: any[]\n  disabledStatuses?: string[]\n  tagsOptions?: any[]\n  isFetching?: boolean\n  isCompact?: boolean\n  currentTab: DetailsPanelTab\n  onTabChange: (tab: DetailsPanelTab) => void\n  onOpenViewer: (args: any) => void\n  onEntityFocus: DetailsPanelProps['onEntityFocus']\n  entityTypeIcons: EntityTypeIcons\n}\n\nconst DetailsPanelHeader = ({\n  entityType,\n  entitySubTypes,\n  entities = [],\n  disabledAssignees = [],\n  users = [],\n  disabledStatuses,\n  tagsOptions = [],\n  isFetching,\n  isCompact = false,\n  currentTab,\n  onTabChange,\n  entityTypeIcons,\n  onOpenViewer,\n  onEntityFocus,\n}: DetailsPanelHeaderProps) => {\n  const { useSearchParams, useNavigate } = useDetailsPanelContext()\n  const navigate = useNavigate()\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const statuses = useScopedStatuses(\n    entities.map((entity) => entity.projectName),\n    [entityType],\n  )\n\n  // for selected entities, get flat list of assignees\n  const entityUsers: string[] = useMemo(\n    () =>\n      union(\n        ...entities.flatMap((entity) => [\n          entity.task?.assignees || [],\n          entity.version?.author || [],\n        ]),\n      ),\n    [entities],\n  )\n\n  let firstEntity = entities[0]\n  // If there's no data return null\n  const isLoading = entities.length === 0 || !firstEntity || isFetching\n  // placeholder entity\n  if (!firstEntity) {\n    firstEntity = {\n      id: 'placeholder',\n      name: 'loading...',\n      label: 'loading...',\n      entityType,\n      status: 'loading',\n      projectName: 'loading...',\n      tags: [],\n      hasReviewables: false,\n      attrib: {},\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n    }\n  }\n\n  const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n  const entityIds = entities\n    .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n    .map((entity) => entity.id)\n\n  // get checklists count\n  const { data: checklistCount } = useGetEntitiesChecklistsQuery(\n    {\n      projectName: firstEntity?.projectName,\n      entityIds,\n    },\n    { skip: !firstEntity?.projectName || !entityIds.length },\n  )\n  let checklistsLabel\n  if (checklistCount?.total && checklistCount.total > 0) {\n    checklistsLabel = `${checklistCount.checked}/${checklistCount.total}`\n  }\n\n  // get priorities\n  // get priority attribute so we know the colors and icons for each priority\n  const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n  const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n  const thumbnails = useMemo(\n    () => getThumbnails(entities, entityType, entityTypeIcons),\n    [entities, entityType, entityTypeIcons],\n  )\n\n  // we need to get the intersection of all the statuses of the projects for the selected entities\n  // this means that if we have 2 entities from 2 different projects, we need to get the intersection of the statuses of those 2 projects\n  //  and it prevents us from showing statuses that are not available for the selected entities\n  const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n  const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n  const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n  const tagsOptionsObject = useMemo(\n    () =>\n      tagsOptions.reduce((acc, tag) => {\n        acc[tag.name] = tag\n        return acc\n      }, {}),\n    [tagsOptions],\n  )\n\n  const isMultiple = entities.length > 1\n\n  const { updateEntity } = useEntityUpdate({\n    entities: entities.map((e) => ({\n      id: e.id,\n      projectName: e.projectName,\n      users: e.task?.assignees || [],\n      folderId: e.folder?.id,\n      productId: e.product?.id,\n    })),\n    entityType,\n  })\n\n  const handleUpdate = (field: string, value: any) => {\n    if (value === null || value === undefined) return console.error('value is null or undefined')\n    return updateEntity(field, value)\n  }\n\n  const handleThumbnailClick = () => {\n    let versionIds,\n      id = firstEntity.id,\n      entityTypeKey = entityType + 'Id'\n\n    if (entityType === 'version' && firstEntity.product?.id) {\n      versionIds = [firstEntity.id]\n      id = firstEntity.product?.id\n      entityTypeKey = 'productId'\n    }\n\n    if (id) {\n      onOpenViewer({\n        [entityTypeKey]: id,\n        projectName,\n        versionIds,\n      })\n    }\n  }\n\n  const hasUser =\n    ['task', 'version', 'representation'].includes(entityType) &&\n    (entityUsers.length > 0 || entityType === 'task')\n\n  const usersOptions = users.map((u) => u)\n  if (hasUser) {\n    // check if all users are in options, otherwise add them\n    const allUsers = users.map((u) => u.name)\n    const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n    if (usersToAdd.length) {\n      usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n    }\n  }\n\n  // Get title and subtitle from the imported function\n  const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n\n  return (\n    <Styled.HeaderContainer>\n      <EntityPanelUploader\n        entities={entities}\n        entityType={entityType}\n        projectName={projectName}\n        onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n      >\n        <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n          <Styled.Header\n            className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n          >\n            <div style={{ position: 'relative' }}>\n              <StackedThumbnails\n                isLoading={isLoading}\n                shimmer={isLoading}\n                thumbnails={thumbnails}\n                onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n                hoverIcon={'play_circle'}\n              />\n              {!isMultiple && firstEntity?.hasReviewables && (\n                <Styled.Playable className=\"playable\">\n                  <Icon icon=\"play_circle\" />\n                </Styled.Playable>\n              )}\n            </div>\n            <Styled.Content className={clsx({ loading: isLoading })}>\n              <Styled.Title>\n                <h2>{title}</h2>\n                <Styled.TagsSelect\n                  value={union(...tagsValues)}\n                  tags={tagsOptionsObject}\n                  options={[]}\n                  editable\n                  editor\n                  onChange={(value) => handleUpdate('tags', value)}\n                  align=\"right\"\n                  styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n                  className=\"tags-select\"\n                />\n              </Styled.Title>\n              <div className=\"sub-title\">\n                <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n                <h3>{subTitle}</h3>\n              </div>\n            </Styled.Content>\n          </Styled.Header>\n          <Styled.StatusSelect\n            value={statusesValue}\n            options={statuses || []}\n            disabledValues={disabledStatuses}\n            invert\n            style={{ maxWidth: 'unset' }}\n            onChange={(value) => handleUpdate('status', value)}\n            className={clsx('status-select', { loading: isLoading })}\n            align={isCompact ? 'right' : 'left'}\n          />\n          {!isCompact &&\n            (!hasUser || isLoading ? (\n              <div></div>\n            ) : (\n              <Styled.AssigneeSelect\n                value={entityUsers}\n                options={usersOptions}\n                disabledValues={disabledAssignees.map((u) => u.name)}\n                isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n                readOnly={entityType !== 'task'}\n                emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n                align=\"right\"\n                onChange={(value) => handleUpdate('assignees', value)}\n                className=\"assignee-select\"\n                data-tooltip={\n                  entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n                }\n              />\n            ))}\n          <Actions\n            entities={entities}\n            entityType={entityType}\n            entitySubTypes={entitySubTypes}\n            isLoadingEntity={!!isFetching || !!isLoading}\n            searchParams={searchParams}\n            onSetSearchParams={setSearchParams}\n            onNavigate={navigate}\n          />\n          {priorities ? (\n            <Styled.PriorityEnumDropdown\n              options={priorities}\n              placeholder=\"No priority\"\n              value={priorityValues}\n              onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n              align=\"right\"\n            />\n          ) : (\n            <div style={{ height: 32 }}></div>\n          )}\n          <FeedFilters\n            isLoading={isLoading}\n            entityType={entityType}\n            className=\"filters\"\n            overrides={{\n              checklists: {\n                label: checklistsLabel,\n              },\n            }}\n            currentTab={currentTab}\n            onTabChange={onTabChange}\n          />\n        </Styled.Grid>\n      </EntityPanelUploader>\n    </Styled.HeaderContainer>\n  )\n}\n\nexport default DetailsPanelHeader\n"],"names":["useDetailsPanelContext","useScopedStatuses","useMemo","union","useGetEntitiesChecklistsQuery","useGetAttributeConfigQuery","getPriorityOptions","useEntityUpdate","buildDetailsPanelTitles","jsx","Styled.HeaderContainer","EntityPanelUploader","jsxs","Styled.Grid","Styled.Header","StackedThumbnails","Styled.Playable","Icon","Styled.Content","Styled.Title","Styled.TagsSelect","upperFirst","Styled.StatusSelect","Styled.AssigneeSelect","Actions","Styled.PriorityEnumDropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,oBAAoB,CAAC;AAAA,EACrB,QAAQ,CAAC;AAAA,EACT;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,EAAE,iBAAiB,YAAY,IAAIA,2CAAuB;AAChE,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB;AAExD,QAAM,WAAWC,kBAAA;AAAA,IACf,SAAS,IAAI,CAAC,WAAW,OAAO,WAAW;AAAA,IAC3C,CAAC,UAAU;AAAA,EACb;AAGA,QAAM,cAAwBC,MAAA;AAAA,IAC5B,MACEC,OAAA;AAAA,MACE,GAAG,SAAS,QAAQ,CAAC,WAAW;;AAAA;AAAA,YAC9B,YAAO,SAAP,mBAAa,cAAa,CAAC;AAAA,YAC3B,YAAO,YAAP,mBAAgB,WAAU,CAAA;AAAA,QAC3B;AAAA,OAAA;AAAA,IACH;AAAA,IACF,CAAC,QAAQ;AAAA,EACX;AAEI,MAAA,cAAc,SAAS,CAAC;AAE5B,QAAM,YAAY,SAAS,WAAW,KAAK,CAAC,eAAe;AAE3D,MAAI,CAAC,aAAa;AACF,kBAAA;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,MAAM,CAAC;AAAA,MACP,gBAAgB;AAAA,MAChB,QAAQ,CAAC;AAAA,MACT,YAAW,oBAAI,KAAK,GAAE,YAAY;AAAA,MAClC,YAAW,oBAAI,KAAK,GAAE,YAAY;AAAA,IACpC;AAAA,EAAA;AAGF,QAAM,cAAc,SAAS,SAAS,IAAI,SAAY,2CAAa;AAEnE,QAAM,YAAY,SACf,OAAO,CAAC,MAAM,EAAE,iBAAgB,2CAAa,gBAAe,EAAE,EAAE,EAChE,IAAI,CAAC,WAAW,OAAO,EAAE;AAGtB,QAAA,EAAE,MAAM,eAAA,IAAmBC,cAAA;AAAA,IAC/B;AAAA,MACE,aAAa,2CAAa;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,EAAE,MAAM,EAAC,2CAAa,gBAAe,CAAC,UAAU,OAAO;AAAA,EACzD;AACI,MAAA;AACJ,OAAI,iDAAgB,UAAS,eAAe,QAAQ,GAAG;AACrD,sBAAkB,GAAG,eAAe,OAAO,IAAI,eAAe,KAAK;AAAA,EAAA;AAK/D,QAAA,EAAE,MAAM,eAAe,IAAIC,yCAA2B,EAAE,eAAe,YAAY;AACnF,QAAA,aAAaC,mBAAAA,mBAAmB,gBAAgB,UAAU;AAEhE,QAAM,aAAaJ,MAAA;AAAA,IACjB,MAAM,cAAc,UAAU,YAAY,eAAe;AAAA,IACzD,CAAC,UAAU,YAAY,eAAe;AAAA,EACxC;AAKA,QAAM,gBAAgBA,MAAAA,QAAQ,MAAM,SAAS,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,QAAQ,CAAC;AAC7E,QAAM,iBAAiBA,MAAAA,QAAQ,MAAM,SAAS,IAAI,CAAC,MAAM;;AAAA,mBAAE,WAAF,mBAAU;AAAA,GAAQ,GAAG,CAAC,QAAQ,CAAC;AACxF,QAAM,aAAyBA,MAAAA,QAAQ,MAAM,SAAS,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,CAAC,QAAQ,CAAC;AACpF,QAAM,oBAAoBA,MAAA;AAAA,IACxB,MACE,YAAY,OAAO,CAAC,KAAK,QAAQ;AAC3B,UAAA,IAAI,IAAI,IAAI;AACT,aAAA;AAAA,IACT,GAAG,EAAE;AAAA,IACP,CAAC,WAAW;AAAA,EACd;AAEM,QAAA,aAAa,SAAS,SAAS;AAE/B,QAAA,EAAE,aAAa,IAAIK,gCAAgB;AAAA,IACvC,UAAU,SAAS,IAAI,CAAC,MAAO;;AAAA;AAAA,QAC7B,IAAI,EAAE;AAAA,QACN,aAAa,EAAE;AAAA,QACf,SAAO,OAAE,SAAF,mBAAQ,cAAa,CAAC;AAAA,QAC7B,WAAU,OAAE,WAAF,mBAAU;AAAA,QACpB,YAAW,OAAE,YAAF,mBAAW;AAAA,MAAA;AAAA,KACtB;AAAA,IACF;AAAA,EAAA,CACD;AAEK,QAAA,eAAe,CAAC,OAAe,UAAe;AAClD,QAAI,UAAU,QAAQ,UAAU,OAAkB,QAAA,QAAQ,MAAM,4BAA4B;AACrF,WAAA,aAAa,OAAO,KAAK;AAAA,EAClC;AAEA,QAAM,uBAAuB,MAAM;;AACjC,QAAI,YACF,KAAK,YAAY,IACjB,gBAAgB,aAAa;AAE/B,QAAI,eAAe,eAAa,iBAAY,YAAZ,mBAAqB,KAAI;AAC1C,mBAAA,CAAC,YAAY,EAAE;AAC5B,YAAK,iBAAY,YAAZ,mBAAqB;AACV,sBAAA;AAAA,IAAA;AAGlB,QAAI,IAAI;AACO,mBAAA;AAAA,QACX,CAAC,aAAa,GAAG;AAAA,QACjB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,UACJ,CAAC,QAAQ,WAAW,gBAAgB,EAAE,SAAS,UAAU,MACxD,YAAY,SAAS,KAAK,eAAe;AAE5C,QAAM,eAAe,MAAM,IAAI,CAAC,MAAM,CAAC;AACvC,MAAI,SAAS;AAEX,UAAM,WAAW,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI;AAClC,UAAA,aAAa,YAAY,OAAO,CAAC,MAAM,CAAC,SAAS,SAAS,CAAC,CAAC;AAClE,QAAI,WAAW,QAAQ;AACrB,mBAAa,KAAK,GAAG,WAAW,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,EAAE,EAAE,CAAC;AAAA,IAAA;AAAA,EACxE;AAIF,QAAM,EAAE,OAAO,SAAA,IAAaC,wBAAAA,wBAAwB,UAAU,UAAU;AAGtE,SAAAC,iDAACC,0BAAAA,iBAAA,EACC,UAAAD,2BAAA,kBAAA;AAAA,IAACE,oBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB,CAAC,OAAO,+CAAgB,IAAI;AAAA,MAE9C,UAAAC,2BAAAA,kBAAAA,KAACC,0BAAO,MAAP,EAAY,WAAW,KAAK,wBAAwB,EAAE,WAAW,GAChE,UAAA;AAAA,QAAAD,2BAAA,kBAAA;AAAA,UAACE,0BAAO;AAAA,UAAP;AAAA,YACC,WAAW,KAAK,UAAU,EAAE,WAAW,SAAS,aAAa,YAAY;AAAA,YAEzE,UAAA;AAAA,cAAAF,2BAAA,kBAAA,KAAC,OAAI,EAAA,OAAO,EAAE,UAAU,WACtB,GAAA,UAAA;AAAA,gBAAAH,2BAAA,kBAAA;AAAA,kBAACM,kBAAA;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,SAAS;AAAA,oBACT;AAAA,oBACA,SAAS,WAAW,WAAW,IAAI,uBAAuB;AAAA,oBAC1D,WAAW;AAAA,kBAAA;AAAA,gBACb;AAAA,gBACC,CAAC,eAAc,2CAAa,oEAC1BC,0BAAAA,UAAA,EAAgB,WAAU,YACzB,UAAAP,2BAAA,kBAAA,IAACQ,oBAAK,MAAA,EAAA,MAAK,cAAc,CAAA,EAC3B,CAAA;AAAA,cAAA,GAEJ;AAAA,cACAL,kDAACM,0BAAAA,SAAA,EAAe,WAAW,KAAK,EAAE,SAAS,WAAW,GACpD,UAAA;AAAA,gBAACN,kDAAAO,0BAAAA,OAAA,EACC,UAAA;AAAA,kBAAAV,2BAAAA,kBAAAA,IAAC,QAAI,UAAM,MAAA,CAAA;AAAA,kBACXA,2BAAA,kBAAA;AAAA,oBAACW,0BAAO;AAAA,oBAAP;AAAA,sBACC,OAAOjB,OAAAA,MAAM,GAAG,UAAU;AAAA,sBAC1B,MAAM;AAAA,sBACN,SAAS,CAAC;AAAA,sBACV,UAAQ;AAAA,sBACR,QAAM;AAAA,sBACN,UAAU,CAAC,UAAU,aAAa,QAAQ,KAAK;AAAA,sBAC/C,OAAM;AAAA,sBACN,eAAe,EAAE,SAAS,YAAY,SAAS,QAAQ;AAAA,sBACvD,WAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACZ,GACF;AAAA,gBACAS,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,aACb,UAAA;AAAA,kBAACA,2BAAAA,kBAAAA,KAAA,QAAA,EAAK,WAAU,eAAe,UAAA;AAAA,oBAAAS,OAAAA,WAAW,UAAU;AAAA,oBAAE;AAAA,kBAAA,GAAG;AAAA,kBACzDZ,2BAAAA,kBAAAA,IAAC,QAAI,UAAS,SAAA,CAAA;AAAA,gBAAA,EAChB,CAAA;AAAA,cAAA,EACF,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACAA,2BAAA,kBAAA;AAAA,UAACa,0BAAO;AAAA,UAAP;AAAA,YACC,OAAO;AAAA,YACP,SAAS,YAAY,CAAC;AAAA,YACtB,gBAAgB;AAAA,YAChB,QAAM;AAAA,YACN,OAAO,EAAE,UAAU,QAAQ;AAAA,YAC3B,UAAU,CAAC,UAAU,aAAa,UAAU,KAAK;AAAA,YACjD,WAAW,KAAK,iBAAiB,EAAE,SAAS,WAAW;AAAA,YACvD,OAAO,YAAY,UAAU;AAAA,UAAA;AAAA,QAC/B;AAAA,QACC,CAAC,cACC,CAAC,WAAW,YACXb,2BAAAA,kBAAAA,IAAC,QAAI,CAAA,IAELA,2BAAA,kBAAA;AAAA,UAACc,0BAAO;AAAA,UAAP;AAAA,YACC,OAAO;AAAA,YACP,SAAS;AAAA,YACT,gBAAgB,kBAAkB,IAAI,CAAC,MAAM,EAAE,IAAI;AAAA,YACnD,YAAY,cAAc,YAAY,SAAS,KAAK,eAAe;AAAA,YACnE,UAAU,eAAe;AAAA,YACzB,cAAc,eAAe,SAAS,gBAAgB;AAAA,YACtD,OAAM;AAAA,YACN,UAAU,CAAC,UAAU,aAAa,aAAa,KAAK;AAAA,YACpD,WAAU;AAAA,YACV,gBACE,YAAY,SAAU,eAAe,SAAS,mBAAmB,WAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAIrFd,2BAAA,kBAAA;AAAA,UAACe,QAAA;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;AAAA,YACnC;AAAA,YACA,mBAAmB;AAAA,YACnB,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QACC,aACCf,2BAAA,kBAAA;AAAA,UAACgB,0BAAO;AAAA,UAAP;AAAA,YACC,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,aAAa,UAAU,EAAE,UAAU,MAAM,CAAC,GAAG;AAAA,YAClE,OAAM;AAAA,UAAA;AAAA,QAAA,IAGPhB,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,OAAO,EAAE,QAAQ,MAAM;AAAA,QAE9BA,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,WAAU;AAAA,YACV,WAAW;AAAA,cACT,YAAY;AAAA,gBACV,OAAO;AAAA,cAAA;AAAA,YAEX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EACF,CAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;;"}
+{"version":3,"file":"DetailsPanelHeader.cjs.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetEntitiesChecklistsQuery, useGetAttributeConfigQuery } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport FeedFilters from '../FeedFilters/FeedFilters'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../helpers/getThumbnails'\nimport { buildDetailsPanelTitles } from '../helpers/buildDetailsPanelTitles'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport type EntityTypeIcons = {\n  folder: Record<string, string>\n  task: Record<string, string>\n  product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n  entityType: 'folder' | 'task' | 'version' | 'representation'\n  entitySubTypes: string[]\n  entities: DetailsPanelEntityData[]\n  disabledAssignees?: any[]\n  users?: any[]\n  disabledStatuses?: string[]\n  tagsOptions?: any[]\n  isFetching?: boolean\n  isCompact?: boolean\n  currentTab: DetailsPanelTab\n  onTabChange: (tab: DetailsPanelTab) => void\n  onOpenViewer: (args: any) => void\n  onEntityFocus: DetailsPanelProps['onEntityFocus']\n  entityTypeIcons: EntityTypeIcons\n}\n\nconst DetailsPanelHeader = ({\n  entityType,\n  entitySubTypes,\n  entities = [],\n  disabledAssignees = [],\n  users = [],\n  disabledStatuses,\n  tagsOptions = [],\n  isFetching,\n  isCompact = false,\n  currentTab,\n  onTabChange,\n  entityTypeIcons,\n  onOpenViewer,\n  onEntityFocus,\n}: DetailsPanelHeaderProps) => {\n  const { useSearchParams, useNavigate, isDeveloperMode } = useDetailsPanelContext()\n  const navigate = useNavigate()\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const statuses = useScopedStatuses(\n    entities.map((entity) => entity.projectName),\n    [entityType],\n  )\n\n  // for selected entities, get flat list of assignees\n  const entityUsers: string[] = useMemo(\n    () =>\n      union(\n        ...entities.flatMap((entity) => [\n          entity.task?.assignees || [],\n          entity.version?.author || [],\n        ]),\n      ),\n    [entities],\n  )\n\n  let firstEntity = entities[0]\n  // If there's no data return null\n  const isLoading = entities.length === 0 || !firstEntity || isFetching\n  // placeholder entity\n  if (!firstEntity) {\n    firstEntity = {\n      id: 'placeholder',\n      name: 'loading...',\n      label: 'loading...',\n      entityType,\n      status: 'loading',\n      projectName: 'loading...',\n      tags: [],\n      hasReviewables: false,\n      attrib: {},\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n    }\n  }\n\n  const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n  const entityIds = entities\n    .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n    .map((entity) => entity.id)\n\n  // get checklists count\n  const { data: checklistCount } = useGetEntitiesChecklistsQuery(\n    {\n      projectName: firstEntity?.projectName,\n      entityIds,\n    },\n    { skip: !firstEntity?.projectName || !entityIds.length },\n  )\n  let checklistsLabel\n  if (checklistCount?.total && checklistCount.total > 0) {\n    checklistsLabel = `${checklistCount.checked}/${checklistCount.total}`\n  }\n\n  // get priorities\n  // get priority attribute so we know the colors and icons for each priority\n  const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n  const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n  const thumbnails = useMemo(\n    () => getThumbnails(entities, entityType, entityTypeIcons),\n    [entities, entityType, entityTypeIcons],\n  )\n\n  // we need to get the intersection of all the statuses of the projects for the selected entities\n  // this means that if we have 2 entities from 2 different projects, we need to get the intersection of the statuses of those 2 projects\n  //  and it prevents us from showing statuses that are not available for the selected entities\n  const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n  const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n  const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n  const tagsOptionsObject = useMemo(\n    () =>\n      tagsOptions.reduce((acc, tag) => {\n        acc[tag.name] = tag\n        return acc\n      }, {}),\n    [tagsOptions],\n  )\n\n  const isMultiple = entities.length > 1\n\n  const { updateEntity } = useEntityUpdate({\n    entities: entities.map((e) => ({\n      id: e.id,\n      projectName: e.projectName,\n      users: e.task?.assignees || [],\n      folderId: e.folder?.id,\n      productId: e.product?.id,\n    })),\n    entityType,\n  })\n\n  const handleUpdate = (field: string, value: any) => {\n    if (value === null || value === undefined) return console.error('value is null or undefined')\n    return updateEntity(field, value)\n  }\n\n  const handleThumbnailClick = () => {\n    let versionIds,\n      id = firstEntity.id,\n      entityTypeKey = entityType + 'Id'\n\n    if (entityType === 'version' && firstEntity.product?.id) {\n      versionIds = [firstEntity.id]\n      id = firstEntity.product?.id\n      entityTypeKey = 'productId'\n    }\n\n    if (id) {\n      onOpenViewer({\n        [entityTypeKey]: id,\n        projectName,\n        versionIds,\n      })\n    }\n  }\n\n  const hasUser =\n    ['task', 'version', 'representation'].includes(entityType) &&\n    (entityUsers.length > 0 || entityType === 'task')\n\n  const usersOptions = users.map((u) => u)\n  if (hasUser) {\n    // check if all users are in options, otherwise add them\n    const allUsers = users.map((u) => u.name)\n    const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n    if (usersToAdd.length) {\n      usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n    }\n  }\n\n  // Get title and subtitle from the imported function\n  const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n\n  return (\n    <Styled.HeaderContainer>\n      <EntityPanelUploader\n        entities={entities}\n        entityType={entityType}\n        projectName={projectName}\n        onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n      >\n        <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n          <Styled.Header\n            className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n          >\n            <div style={{ position: 'relative' }}>\n              <StackedThumbnails\n                isLoading={isLoading}\n                shimmer={isLoading}\n                thumbnails={thumbnails}\n                onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n                hoverIcon={'play_circle'}\n              />\n              {!isMultiple && firstEntity?.hasReviewables && <PlayableIcon />}\n            </div>\n            <Styled.Content className={clsx({ loading: isLoading })}>\n              <Styled.Title>\n                <h2>{title}</h2>\n                <Styled.TagsSelect\n                  value={union(...tagsValues)}\n                  tags={tagsOptionsObject}\n                  options={[]}\n                  editable\n                  editor\n                  onChange={(value) => handleUpdate('tags', value)}\n                  align=\"right\"\n                  styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n                  className=\"tags-select\"\n                />\n              </Styled.Title>\n              <div className=\"sub-title\">\n                <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n                <h3>{subTitle}</h3>\n              </div>\n            </Styled.Content>\n          </Styled.Header>\n          <Styled.StatusSelect\n            value={statusesValue}\n            options={statuses || []}\n            disabledValues={disabledStatuses}\n            invert\n            style={{ maxWidth: 'unset' }}\n            onChange={(value) => handleUpdate('status', value)}\n            className={clsx('status-select', { loading: isLoading })}\n            align={isCompact ? 'right' : 'left'}\n          />\n          {!isCompact &&\n            (!hasUser || isLoading ? (\n              <div></div>\n            ) : (\n              <Styled.AssigneeSelect\n                value={entityUsers}\n                options={usersOptions}\n                disabledValues={disabledAssignees.map((u) => u.name)}\n                isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n                readOnly={entityType !== 'task'}\n                emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n                align=\"right\"\n                onChange={(value) => handleUpdate('assignees', value)}\n                className=\"assignee-select\"\n                data-tooltip={\n                  entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n                }\n              />\n            ))}\n          <Actions\n            entities={entities}\n            entityType={entityType}\n            entitySubTypes={entitySubTypes}\n            isLoadingEntity={!!isFetching || !!isLoading}\n            searchParams={searchParams}\n            isDeveloperMode={isDeveloperMode}\n            onSetSearchParams={setSearchParams}\n            onNavigate={navigate}\n          />\n          {priorities ? (\n            <Styled.PriorityEnumDropdown\n              options={priorities}\n              placeholder=\"No priority\"\n              value={priorityValues}\n              onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n              align=\"right\"\n            />\n          ) : (\n            <div style={{ height: 32 }}></div>\n          )}\n          <FeedFilters\n            isLoading={isLoading}\n            entityType={entityType}\n            className=\"filters\"\n            overrides={{\n              checklists: {\n                label: checklistsLabel,\n              },\n            }}\n            currentTab={currentTab}\n            onTabChange={onTabChange}\n          />\n        </Styled.Grid>\n      </EntityPanelUploader>\n    </Styled.HeaderContainer>\n  )\n}\n\nexport default DetailsPanelHeader\n"],"names":["useDetailsPanelContext","useScopedStatuses","useMemo","union","useGetEntitiesChecklistsQuery","useGetAttributeConfigQuery","getPriorityOptions","useEntityUpdate","buildDetailsPanelTitles","jsx","Styled.HeaderContainer","EntityPanelUploader","jsxs","Styled.Grid","Styled.Header","StackedThumbnails","PlayableIcon","Styled.Content","Styled.Title","Styled.TagsSelect","upperFirst","Styled.StatusSelect","Styled.AssigneeSelect","Actions","Styled.PriorityEnumDropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,oBAAoB,CAAC;AAAA,EACrB,QAAQ,CAAC;AAAA,EACT;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,EAAE,iBAAiB,aAAa,gBAAA,IAAoBA,oBAAAA,uBAAuB;AACjF,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB;AAExD,QAAM,WAAWC,kBAAA;AAAA,IACf,SAAS,IAAI,CAAC,WAAW,OAAO,WAAW;AAAA,IAC3C,CAAC,UAAU;AAAA,EACb;AAGA,QAAM,cAAwBC,MAAA;AAAA,IAC5B,MACEC,OAAA;AAAA,MACE,GAAG,SAAS,QAAQ,CAAC,WAAW;;AAAA;AAAA,YAC9B,YAAO,SAAP,mBAAa,cAAa,CAAC;AAAA,YAC3B,YAAO,YAAP,mBAAgB,WAAU,CAAA;AAAA,QAC3B;AAAA,OAAA;AAAA,IACH;AAAA,IACF,CAAC,QAAQ;AAAA,EACX;AAEI,MAAA,cAAc,SAAS,CAAC;AAE5B,QAAM,YAAY,SAAS,WAAW,KAAK,CAAC,eAAe;AAE3D,MAAI,CAAC,aAAa;AACF,kBAAA;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,MAAM,CAAC;AAAA,MACP,gBAAgB;AAAA,MAChB,QAAQ,CAAC;AAAA,MACT,YAAW,oBAAI,KAAK,GAAE,YAAY;AAAA,MAClC,YAAW,oBAAI,KAAK,GAAE,YAAY;AAAA,IACpC;AAAA,EAAA;AAGF,QAAM,cAAc,SAAS,SAAS,IAAI,SAAY,2CAAa;AAEnE,QAAM,YAAY,SACf,OAAO,CAAC,MAAM,EAAE,iBAAgB,2CAAa,gBAAe,EAAE,EAAE,EAChE,IAAI,CAAC,WAAW,OAAO,EAAE;AAGtB,QAAA,EAAE,MAAM,eAAA,IAAmBC,cAAA;AAAA,IAC/B;AAAA,MACE,aAAa,2CAAa;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,EAAE,MAAM,EAAC,2CAAa,gBAAe,CAAC,UAAU,OAAO;AAAA,EACzD;AACI,MAAA;AACJ,OAAI,iDAAgB,UAAS,eAAe,QAAQ,GAAG;AACrD,sBAAkB,GAAG,eAAe,OAAO,IAAI,eAAe,KAAK;AAAA,EAAA;AAK/D,QAAA,EAAE,MAAM,eAAe,IAAIC,yCAA2B,EAAE,eAAe,YAAY;AACnF,QAAA,aAAaC,mBAAAA,mBAAmB,gBAAgB,UAAU;AAEhE,QAAM,aAAaJ,MAAA;AAAA,IACjB,MAAM,cAAc,UAAU,YAAY,eAAe;AAAA,IACzD,CAAC,UAAU,YAAY,eAAe;AAAA,EACxC;AAKA,QAAM,gBAAgBA,MAAAA,QAAQ,MAAM,SAAS,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,QAAQ,CAAC;AAC7E,QAAM,iBAAiBA,MAAAA,QAAQ,MAAM,SAAS,IAAI,CAAC,MAAM;;AAAA,mBAAE,WAAF,mBAAU;AAAA,GAAQ,GAAG,CAAC,QAAQ,CAAC;AACxF,QAAM,aAAyBA,MAAAA,QAAQ,MAAM,SAAS,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,CAAC,QAAQ,CAAC;AACpF,QAAM,oBAAoBA,MAAA;AAAA,IACxB,MACE,YAAY,OAAO,CAAC,KAAK,QAAQ;AAC3B,UAAA,IAAI,IAAI,IAAI;AACT,aAAA;AAAA,IACT,GAAG,EAAE;AAAA,IACP,CAAC,WAAW;AAAA,EACd;AAEM,QAAA,aAAa,SAAS,SAAS;AAE/B,QAAA,EAAE,aAAa,IAAIK,gCAAgB;AAAA,IACvC,UAAU,SAAS,IAAI,CAAC,MAAO;;AAAA;AAAA,QAC7B,IAAI,EAAE;AAAA,QACN,aAAa,EAAE;AAAA,QACf,SAAO,OAAE,SAAF,mBAAQ,cAAa,CAAC;AAAA,QAC7B,WAAU,OAAE,WAAF,mBAAU;AAAA,QACpB,YAAW,OAAE,YAAF,mBAAW;AAAA,MAAA;AAAA,KACtB;AAAA,IACF;AAAA,EAAA,CACD;AAEK,QAAA,eAAe,CAAC,OAAe,UAAe;AAClD,QAAI,UAAU,QAAQ,UAAU,OAAkB,QAAA,QAAQ,MAAM,4BAA4B;AACrF,WAAA,aAAa,OAAO,KAAK;AAAA,EAClC;AAEA,QAAM,uBAAuB,MAAM;;AACjC,QAAI,YACF,KAAK,YAAY,IACjB,gBAAgB,aAAa;AAE/B,QAAI,eAAe,eAAa,iBAAY,YAAZ,mBAAqB,KAAI;AAC1C,mBAAA,CAAC,YAAY,EAAE;AAC5B,YAAK,iBAAY,YAAZ,mBAAqB;AACV,sBAAA;AAAA,IAAA;AAGlB,QAAI,IAAI;AACO,mBAAA;AAAA,QACX,CAAC,aAAa,GAAG;AAAA,QACjB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,UACJ,CAAC,QAAQ,WAAW,gBAAgB,EAAE,SAAS,UAAU,MACxD,YAAY,SAAS,KAAK,eAAe;AAE5C,QAAM,eAAe,MAAM,IAAI,CAAC,MAAM,CAAC;AACvC,MAAI,SAAS;AAEX,UAAM,WAAW,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI;AAClC,UAAA,aAAa,YAAY,OAAO,CAAC,MAAM,CAAC,SAAS,SAAS,CAAC,CAAC;AAClE,QAAI,WAAW,QAAQ;AACrB,mBAAa,KAAK,GAAG,WAAW,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,EAAE,EAAE,CAAC;AAAA,IAAA;AAAA,EACxE;AAIF,QAAM,EAAE,OAAO,SAAA,IAAaC,wBAAAA,wBAAwB,UAAU,UAAU;AAGtE,SAAAC,iDAACC,0BAAAA,iBAAA,EACC,UAAAD,2BAAA,kBAAA;AAAA,IAACE,oBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB,CAAC,OAAO,+CAAgB,IAAI;AAAA,MAE9C,UAAAC,2BAAAA,kBAAAA,KAACC,0BAAO,MAAP,EAAY,WAAW,KAAK,wBAAwB,EAAE,WAAW,GAChE,UAAA;AAAA,QAAAD,2BAAA,kBAAA;AAAA,UAACE,0BAAO;AAAA,UAAP;AAAA,YACC,WAAW,KAAK,UAAU,EAAE,WAAW,SAAS,aAAa,YAAY;AAAA,YAEzE,UAAA;AAAA,cAAAF,2BAAA,kBAAA,KAAC,OAAI,EAAA,OAAO,EAAE,UAAU,WACtB,GAAA,UAAA;AAAA,gBAAAH,2BAAA,kBAAA;AAAA,kBAACM,kBAAA;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,SAAS;AAAA,oBACT;AAAA,oBACA,SAAS,WAAW,WAAW,IAAI,uBAAuB;AAAA,oBAC1D,WAAW;AAAA,kBAAA;AAAA,gBACb;AAAA,gBACC,CAAC,eAAc,2CAAa,oEAAmBC,aAAa,cAAA,CAAA,CAAA;AAAA,cAAA,GAC/D;AAAA,cACAJ,kDAACK,0BAAAA,SAAA,EAAe,WAAW,KAAK,EAAE,SAAS,WAAW,GACpD,UAAA;AAAA,gBAACL,kDAAAM,0BAAAA,OAAA,EACC,UAAA;AAAA,kBAAAT,2BAAAA,kBAAAA,IAAC,QAAI,UAAM,MAAA,CAAA;AAAA,kBACXA,2BAAA,kBAAA;AAAA,oBAACU,0BAAO;AAAA,oBAAP;AAAA,sBACC,OAAOhB,OAAAA,MAAM,GAAG,UAAU;AAAA,sBAC1B,MAAM;AAAA,sBACN,SAAS,CAAC;AAAA,sBACV,UAAQ;AAAA,sBACR,QAAM;AAAA,sBACN,UAAU,CAAC,UAAU,aAAa,QAAQ,KAAK;AAAA,sBAC/C,OAAM;AAAA,sBACN,eAAe,EAAE,SAAS,YAAY,SAAS,QAAQ;AAAA,sBACvD,WAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACZ,GACF;AAAA,gBACAS,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,aACb,UAAA;AAAA,kBAACA,2BAAAA,kBAAAA,KAAA,QAAA,EAAK,WAAU,eAAe,UAAA;AAAA,oBAAAQ,OAAAA,WAAW,UAAU;AAAA,oBAAE;AAAA,kBAAA,GAAG;AAAA,kBACzDX,2BAAAA,kBAAAA,IAAC,QAAI,UAAS,SAAA,CAAA;AAAA,gBAAA,EAChB,CAAA;AAAA,cAAA,EACF,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACAA,2BAAA,kBAAA;AAAA,UAACY,0BAAO;AAAA,UAAP;AAAA,YACC,OAAO;AAAA,YACP,SAAS,YAAY,CAAC;AAAA,YACtB,gBAAgB;AAAA,YAChB,QAAM;AAAA,YACN,OAAO,EAAE,UAAU,QAAQ;AAAA,YAC3B,UAAU,CAAC,UAAU,aAAa,UAAU,KAAK;AAAA,YACjD,WAAW,KAAK,iBAAiB,EAAE,SAAS,WAAW;AAAA,YACvD,OAAO,YAAY,UAAU;AAAA,UAAA;AAAA,QAC/B;AAAA,QACC,CAAC,cACC,CAAC,WAAW,YACXZ,2BAAAA,kBAAAA,IAAC,QAAI,CAAA,IAELA,2BAAA,kBAAA;AAAA,UAACa,0BAAO;AAAA,UAAP;AAAA,YACC,OAAO;AAAA,YACP,SAAS;AAAA,YACT,gBAAgB,kBAAkB,IAAI,CAAC,MAAM,EAAE,IAAI;AAAA,YACnD,YAAY,cAAc,YAAY,SAAS,KAAK,eAAe;AAAA,YACnE,UAAU,eAAe;AAAA,YACzB,cAAc,eAAe,SAAS,gBAAgB;AAAA,YACtD,OAAM;AAAA,YACN,UAAU,CAAC,UAAU,aAAa,aAAa,KAAK;AAAA,YACpD,WAAU;AAAA,YACV,gBACE,YAAY,SAAU,eAAe,SAAS,mBAAmB,WAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAIrFb,2BAAA,kBAAA;AAAA,UAACc,QAAA;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;AAAA,YACnC;AAAA,YACA;AAAA,YACA,mBAAmB;AAAA,YACnB,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QACC,aACCd,2BAAA,kBAAA;AAAA,UAACe,0BAAO;AAAA,UAAP;AAAA,YACC,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,aAAa,UAAU,EAAE,UAAU,MAAM,CAAC,GAAG;AAAA,YAClE,OAAM;AAAA,UAAA;AAAA,QAAA,IAGPf,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,OAAO,EAAE,QAAQ,MAAM;AAAA,QAE9BA,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,WAAU;AAAA,YACV,WAAW;AAAA,cACT,YAAY;AAAA,gBACV,OAAO;AAAA,cAAA;AAAA,YAEX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EACF,CAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;;"}

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

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.j
 import { useMemo } from "react";
 import { union, upperFirst } from "lodash";
 import clsx from "clsx";
-import { Icon } from "@ynput/ayon-react-components";
+import "@ynput/ayon-react-components";
 import "../../../components/ThumbnailSimple/ThumbnailSimple.es.js";
 import "../../../components/EmptyPlaceholder/EmptyPlaceholder.es.js";
 import "../../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
@@ -161,6 +161,7 @@ import "../../ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../ProjectTreeTable/context/ProjectTableContext.es.js";
 import "../../ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
 import "../../ProjectTreeTable/context/SelectedRowsContext.es.js";
+import "../../ProjectTreeTable/components/GroupSettingsFallback.es.js";
 import "../../ProjectTreeTable/context/ProjectDataContext.es.js";
 import "../../ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../../ProjectTreeTable/widgets/DateWidget.es.js";
@@ -175,12 +176,12 @@ import "../../ProjectTreeTable/ProjectTreeTable.styled.es.js";
 import "../../ProjectTreeTable/components/SelectionCell.es.js";
 import "../../ProjectTreeTable/components/RowSelectionHeader.es.js";
 import "../../ProjectTreeTable/widgets/LoadMoreWidget.es.js";
-import "../../ProjectTreeTable/components/GroupSettingsFallback.es.js";
 import "../DetailsPanel.styled.es.js";
 import FeedFilters from "../FeedFilters/FeedFilters.es.js";
-import { HeaderContainer, Grid, Header, Playable, Content, Title, TagsSelect, StatusSelect, AssigneeSelect, PriorityEnumDropdown } from "./DetailsPanelHeader.styled.es.js";
+import { HeaderContainer, Grid, Header, Content, Title, TagsSelect, StatusSelect, AssigneeSelect, PriorityEnumDropdown } from "./DetailsPanelHeader.styled.es.js";
 import getThumbnails from "../helpers/getThumbnails.es.js";
 import { buildDetailsPanelTitles } from "../helpers/buildDetailsPanelTitles.es.js";
+import { PlayableIcon } from "../../../components/PlayableIcon/PlayableIcon.es.js";
 import "../DetailsPanelFiles/DetailsPanelFiles.es.js";
 import "../DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
 import "../DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
@@ -201,7 +202,7 @@ const DetailsPanelHeader = ({
   onOpenViewer,
   onEntityFocus
 }) => {
-  const { useSearchParams, useNavigate } = useDetailsPanelContext();
+  const { useSearchParams, useNavigate, isDeveloperMode } = useDetailsPanelContext();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const statuses = useScopedStatuses(
@@ -337,7 +338,7 @@ const DetailsPanelHeader = ({
                     hoverIcon: "play_circle"
                   }
                 ),
-                !isMultiple && (firstEntity == null ? void 0 : firstEntity.hasReviewables) && /* @__PURE__ */ jsxRuntimeExports.jsx(Playable, { className: "playable", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "play_circle" }) })
+                !isMultiple && (firstEntity == null ? void 0 : firstEntity.hasReviewables) && /* @__PURE__ */ jsxRuntimeExports.jsx(PlayableIcon, {})
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs(Content, { className: clsx({ loading: isLoading }), children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(Title, { children: [
@@ -404,6 +405,7 @@ const DetailsPanelHeader = ({
             entitySubTypes,
             isLoadingEntity: !!isFetching || !!isLoading,
             searchParams,
+            isDeveloperMode,
             onSetSearchParams: setSearchParams,
             onNavigate: navigate
           }

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

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelHeader.es.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetEntitiesChecklistsQuery, useGetAttributeConfigQuery } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport FeedFilters from '../FeedFilters/FeedFilters'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../helpers/getThumbnails'\nimport { buildDetailsPanelTitles } from '../helpers/buildDetailsPanelTitles'\n\nexport type EntityTypeIcons = {\n  folder: Record<string, string>\n  task: Record<string, string>\n  product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n  entityType: 'folder' | 'task' | 'version' | 'representation'\n  entitySubTypes: string[]\n  entities: DetailsPanelEntityData[]\n  disabledAssignees?: any[]\n  users?: any[]\n  disabledStatuses?: string[]\n  tagsOptions?: any[]\n  isFetching?: boolean\n  isCompact?: boolean\n  currentTab: DetailsPanelTab\n  onTabChange: (tab: DetailsPanelTab) => void\n  onOpenViewer: (args: any) => void\n  onEntityFocus: DetailsPanelProps['onEntityFocus']\n  entityTypeIcons: EntityTypeIcons\n}\n\nconst DetailsPanelHeader = ({\n  entityType,\n  entitySubTypes,\n  entities = [],\n  disabledAssignees = [],\n  users = [],\n  disabledStatuses,\n  tagsOptions = [],\n  isFetching,\n  isCompact = false,\n  currentTab,\n  onTabChange,\n  entityTypeIcons,\n  onOpenViewer,\n  onEntityFocus,\n}: DetailsPanelHeaderProps) => {\n  const { useSearchParams, useNavigate } = useDetailsPanelContext()\n  const navigate = useNavigate()\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const statuses = useScopedStatuses(\n    entities.map((entity) => entity.projectName),\n    [entityType],\n  )\n\n  // for selected entities, get flat list of assignees\n  const entityUsers: string[] = useMemo(\n    () =>\n      union(\n        ...entities.flatMap((entity) => [\n          entity.task?.assignees || [],\n          entity.version?.author || [],\n        ]),\n      ),\n    [entities],\n  )\n\n  let firstEntity = entities[0]\n  // If there's no data return null\n  const isLoading = entities.length === 0 || !firstEntity || isFetching\n  // placeholder entity\n  if (!firstEntity) {\n    firstEntity = {\n      id: 'placeholder',\n      name: 'loading...',\n      label: 'loading...',\n      entityType,\n      status: 'loading',\n      projectName: 'loading...',\n      tags: [],\n      hasReviewables: false,\n      attrib: {},\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n    }\n  }\n\n  const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n  const entityIds = entities\n    .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n    .map((entity) => entity.id)\n\n  // get checklists count\n  const { data: checklistCount } = useGetEntitiesChecklistsQuery(\n    {\n      projectName: firstEntity?.projectName,\n      entityIds,\n    },\n    { skip: !firstEntity?.projectName || !entityIds.length },\n  )\n  let checklistsLabel\n  if (checklistCount?.total && checklistCount.total > 0) {\n    checklistsLabel = `${checklistCount.checked}/${checklistCount.total}`\n  }\n\n  // get priorities\n  // get priority attribute so we know the colors and icons for each priority\n  const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n  const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n  const thumbnails = useMemo(\n    () => getThumbnails(entities, entityType, entityTypeIcons),\n    [entities, entityType, entityTypeIcons],\n  )\n\n  // we need to get the intersection of all the statuses of the projects for the selected entities\n  // this means that if we have 2 entities from 2 different projects, we need to get the intersection of the statuses of those 2 projects\n  //  and it prevents us from showing statuses that are not available for the selected entities\n  const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n  const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n  const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n  const tagsOptionsObject = useMemo(\n    () =>\n      tagsOptions.reduce((acc, tag) => {\n        acc[tag.name] = tag\n        return acc\n      }, {}),\n    [tagsOptions],\n  )\n\n  const isMultiple = entities.length > 1\n\n  const { updateEntity } = useEntityUpdate({\n    entities: entities.map((e) => ({\n      id: e.id,\n      projectName: e.projectName,\n      users: e.task?.assignees || [],\n      folderId: e.folder?.id,\n      productId: e.product?.id,\n    })),\n    entityType,\n  })\n\n  const handleUpdate = (field: string, value: any) => {\n    if (value === null || value === undefined) return console.error('value is null or undefined')\n    return updateEntity(field, value)\n  }\n\n  const handleThumbnailClick = () => {\n    let versionIds,\n      id = firstEntity.id,\n      entityTypeKey = entityType + 'Id'\n\n    if (entityType === 'version' && firstEntity.product?.id) {\n      versionIds = [firstEntity.id]\n      id = firstEntity.product?.id\n      entityTypeKey = 'productId'\n    }\n\n    if (id) {\n      onOpenViewer({\n        [entityTypeKey]: id,\n        projectName,\n        versionIds,\n      })\n    }\n  }\n\n  const hasUser =\n    ['task', 'version', 'representation'].includes(entityType) &&\n    (entityUsers.length > 0 || entityType === 'task')\n\n  const usersOptions = users.map((u) => u)\n  if (hasUser) {\n    // check if all users are in options, otherwise add them\n    const allUsers = users.map((u) => u.name)\n    const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n    if (usersToAdd.length) {\n      usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n    }\n  }\n\n  // Get title and subtitle from the imported function\n  const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n\n  return (\n    <Styled.HeaderContainer>\n      <EntityPanelUploader\n        entities={entities}\n        entityType={entityType}\n        projectName={projectName}\n        onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n      >\n        <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n          <Styled.Header\n            className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n          >\n            <div style={{ position: 'relative' }}>\n              <StackedThumbnails\n                isLoading={isLoading}\n                shimmer={isLoading}\n                thumbnails={thumbnails}\n                onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n                hoverIcon={'play_circle'}\n              />\n              {!isMultiple && firstEntity?.hasReviewables && (\n                <Styled.Playable className=\"playable\">\n                  <Icon icon=\"play_circle\" />\n                </Styled.Playable>\n              )}\n            </div>\n            <Styled.Content className={clsx({ loading: isLoading })}>\n              <Styled.Title>\n                <h2>{title}</h2>\n                <Styled.TagsSelect\n                  value={union(...tagsValues)}\n                  tags={tagsOptionsObject}\n                  options={[]}\n                  editable\n                  editor\n                  onChange={(value) => handleUpdate('tags', value)}\n                  align=\"right\"\n                  styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n                  className=\"tags-select\"\n                />\n              </Styled.Title>\n              <div className=\"sub-title\">\n                <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n                <h3>{subTitle}</h3>\n              </div>\n            </Styled.Content>\n          </Styled.Header>\n          <Styled.StatusSelect\n            value={statusesValue}\n            options={statuses || []}\n            disabledValues={disabledStatuses}\n            invert\n            style={{ maxWidth: 'unset' }}\n            onChange={(value) => handleUpdate('status', value)}\n            className={clsx('status-select', { loading: isLoading })}\n            align={isCompact ? 'right' : 'left'}\n          />\n          {!isCompact &&\n            (!hasUser || isLoading ? (\n              <div></div>\n            ) : (\n              <Styled.AssigneeSelect\n                value={entityUsers}\n                options={usersOptions}\n                disabledValues={disabledAssignees.map((u) => u.name)}\n                isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n                readOnly={entityType !== 'task'}\n                emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n                align=\"right\"\n                onChange={(value) => handleUpdate('assignees', value)}\n                className=\"assignee-select\"\n                data-tooltip={\n                  entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n                }\n              />\n            ))}\n          <Actions\n            entities={entities}\n            entityType={entityType}\n            entitySubTypes={entitySubTypes}\n            isLoadingEntity={!!isFetching || !!isLoading}\n            searchParams={searchParams}\n            onSetSearchParams={setSearchParams}\n            onNavigate={navigate}\n          />\n          {priorities ? (\n            <Styled.PriorityEnumDropdown\n              options={priorities}\n              placeholder=\"No priority\"\n              value={priorityValues}\n              onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n              align=\"right\"\n            />\n          ) : (\n            <div style={{ height: 32 }}></div>\n          )}\n          <FeedFilters\n            isLoading={isLoading}\n            entityType={entityType}\n            className=\"filters\"\n            overrides={{\n              checklists: {\n                label: checklistsLabel,\n              },\n            }}\n            currentTab={currentTab}\n            onTabChange={onTabChange}\n          />\n        </Styled.Grid>\n      </EntityPanelUploader>\n    </Styled.HeaderContainer>\n  )\n}\n\nexport default DetailsPanelHeader\n"],"names":["jsx","Styled.HeaderContainer","jsxs","Styled.Grid","Styled.Header","Styled.Playable","Styled.Content","Styled.Title","Styled.TagsSelect","Styled.StatusSelect","Styled.AssigneeSelect","Styled.PriorityEnumDropdown"],"mappings":"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"}
+{"version":3,"file":"DetailsPanelHeader.es.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetEntitiesChecklistsQuery, useGetAttributeConfigQuery } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport FeedFilters from '../FeedFilters/FeedFilters'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../helpers/getThumbnails'\nimport { buildDetailsPanelTitles } from '../helpers/buildDetailsPanelTitles'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport type EntityTypeIcons = {\n  folder: Record<string, string>\n  task: Record<string, string>\n  product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n  entityType: 'folder' | 'task' | 'version' | 'representation'\n  entitySubTypes: string[]\n  entities: DetailsPanelEntityData[]\n  disabledAssignees?: any[]\n  users?: any[]\n  disabledStatuses?: string[]\n  tagsOptions?: any[]\n  isFetching?: boolean\n  isCompact?: boolean\n  currentTab: DetailsPanelTab\n  onTabChange: (tab: DetailsPanelTab) => void\n  onOpenViewer: (args: any) => void\n  onEntityFocus: DetailsPanelProps['onEntityFocus']\n  entityTypeIcons: EntityTypeIcons\n}\n\nconst DetailsPanelHeader = ({\n  entityType,\n  entitySubTypes,\n  entities = [],\n  disabledAssignees = [],\n  users = [],\n  disabledStatuses,\n  tagsOptions = [],\n  isFetching,\n  isCompact = false,\n  currentTab,\n  onTabChange,\n  entityTypeIcons,\n  onOpenViewer,\n  onEntityFocus,\n}: DetailsPanelHeaderProps) => {\n  const { useSearchParams, useNavigate, isDeveloperMode } = useDetailsPanelContext()\n  const navigate = useNavigate()\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const statuses = useScopedStatuses(\n    entities.map((entity) => entity.projectName),\n    [entityType],\n  )\n\n  // for selected entities, get flat list of assignees\n  const entityUsers: string[] = useMemo(\n    () =>\n      union(\n        ...entities.flatMap((entity) => [\n          entity.task?.assignees || [],\n          entity.version?.author || [],\n        ]),\n      ),\n    [entities],\n  )\n\n  let firstEntity = entities[0]\n  // If there's no data return null\n  const isLoading = entities.length === 0 || !firstEntity || isFetching\n  // placeholder entity\n  if (!firstEntity) {\n    firstEntity = {\n      id: 'placeholder',\n      name: 'loading...',\n      label: 'loading...',\n      entityType,\n      status: 'loading',\n      projectName: 'loading...',\n      tags: [],\n      hasReviewables: false,\n      attrib: {},\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n    }\n  }\n\n  const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n  const entityIds = entities\n    .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n    .map((entity) => entity.id)\n\n  // get checklists count\n  const { data: checklistCount } = useGetEntitiesChecklistsQuery(\n    {\n      projectName: firstEntity?.projectName,\n      entityIds,\n    },\n    { skip: !firstEntity?.projectName || !entityIds.length },\n  )\n  let checklistsLabel\n  if (checklistCount?.total && checklistCount.total > 0) {\n    checklistsLabel = `${checklistCount.checked}/${checklistCount.total}`\n  }\n\n  // get priorities\n  // get priority attribute so we know the colors and icons for each priority\n  const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n  const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n  const thumbnails = useMemo(\n    () => getThumbnails(entities, entityType, entityTypeIcons),\n    [entities, entityType, entityTypeIcons],\n  )\n\n  // we need to get the intersection of all the statuses of the projects for the selected entities\n  // this means that if we have 2 entities from 2 different projects, we need to get the intersection of the statuses of those 2 projects\n  //  and it prevents us from showing statuses that are not available for the selected entities\n  const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n  const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n  const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n  const tagsOptionsObject = useMemo(\n    () =>\n      tagsOptions.reduce((acc, tag) => {\n        acc[tag.name] = tag\n        return acc\n      }, {}),\n    [tagsOptions],\n  )\n\n  const isMultiple = entities.length > 1\n\n  const { updateEntity } = useEntityUpdate({\n    entities: entities.map((e) => ({\n      id: e.id,\n      projectName: e.projectName,\n      users: e.task?.assignees || [],\n      folderId: e.folder?.id,\n      productId: e.product?.id,\n    })),\n    entityType,\n  })\n\n  const handleUpdate = (field: string, value: any) => {\n    if (value === null || value === undefined) return console.error('value is null or undefined')\n    return updateEntity(field, value)\n  }\n\n  const handleThumbnailClick = () => {\n    let versionIds,\n      id = firstEntity.id,\n      entityTypeKey = entityType + 'Id'\n\n    if (entityType === 'version' && firstEntity.product?.id) {\n      versionIds = [firstEntity.id]\n      id = firstEntity.product?.id\n      entityTypeKey = 'productId'\n    }\n\n    if (id) {\n      onOpenViewer({\n        [entityTypeKey]: id,\n        projectName,\n        versionIds,\n      })\n    }\n  }\n\n  const hasUser =\n    ['task', 'version', 'representation'].includes(entityType) &&\n    (entityUsers.length > 0 || entityType === 'task')\n\n  const usersOptions = users.map((u) => u)\n  if (hasUser) {\n    // check if all users are in options, otherwise add them\n    const allUsers = users.map((u) => u.name)\n    const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n    if (usersToAdd.length) {\n      usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n    }\n  }\n\n  // Get title and subtitle from the imported function\n  const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n\n  return (\n    <Styled.HeaderContainer>\n      <EntityPanelUploader\n        entities={entities}\n        entityType={entityType}\n        projectName={projectName}\n        onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n      >\n        <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n          <Styled.Header\n            className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n          >\n            <div style={{ position: 'relative' }}>\n              <StackedThumbnails\n                isLoading={isLoading}\n                shimmer={isLoading}\n                thumbnails={thumbnails}\n                onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n                hoverIcon={'play_circle'}\n              />\n              {!isMultiple && firstEntity?.hasReviewables && <PlayableIcon />}\n            </div>\n            <Styled.Content className={clsx({ loading: isLoading })}>\n              <Styled.Title>\n                <h2>{title}</h2>\n                <Styled.TagsSelect\n                  value={union(...tagsValues)}\n                  tags={tagsOptionsObject}\n                  options={[]}\n                  editable\n                  editor\n                  onChange={(value) => handleUpdate('tags', value)}\n                  align=\"right\"\n                  styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n                  className=\"tags-select\"\n                />\n              </Styled.Title>\n              <div className=\"sub-title\">\n                <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n                <h3>{subTitle}</h3>\n              </div>\n            </Styled.Content>\n          </Styled.Header>\n          <Styled.StatusSelect\n            value={statusesValue}\n            options={statuses || []}\n            disabledValues={disabledStatuses}\n            invert\n            style={{ maxWidth: 'unset' }}\n            onChange={(value) => handleUpdate('status', value)}\n            className={clsx('status-select', { loading: isLoading })}\n            align={isCompact ? 'right' : 'left'}\n          />\n          {!isCompact &&\n            (!hasUser || isLoading ? (\n              <div></div>\n            ) : (\n              <Styled.AssigneeSelect\n                value={entityUsers}\n                options={usersOptions}\n                disabledValues={disabledAssignees.map((u) => u.name)}\n                isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n                readOnly={entityType !== 'task'}\n                emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n                align=\"right\"\n                onChange={(value) => handleUpdate('assignees', value)}\n                className=\"assignee-select\"\n                data-tooltip={\n                  entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n                }\n              />\n            ))}\n          <Actions\n            entities={entities}\n            entityType={entityType}\n            entitySubTypes={entitySubTypes}\n            isLoadingEntity={!!isFetching || !!isLoading}\n            searchParams={searchParams}\n            isDeveloperMode={isDeveloperMode}\n            onSetSearchParams={setSearchParams}\n            onNavigate={navigate}\n          />\n          {priorities ? (\n            <Styled.PriorityEnumDropdown\n              options={priorities}\n              placeholder=\"No priority\"\n              value={priorityValues}\n              onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n              align=\"right\"\n            />\n          ) : (\n            <div style={{ height: 32 }}></div>\n          )}\n          <FeedFilters\n            isLoading={isLoading}\n            entityType={entityType}\n            className=\"filters\"\n            overrides={{\n              checklists: {\n                label: checklistsLabel,\n              },\n            }}\n            currentTab={currentTab}\n            onTabChange={onTabChange}\n          />\n        </Styled.Grid>\n      </EntityPanelUploader>\n    </Styled.HeaderContainer>\n  )\n}\n\nexport default DetailsPanelHeader\n"],"names":["jsx","Styled.HeaderContainer","jsxs","Styled.Grid","Styled.Header","Styled.Content","Styled.Title","Styled.TagsSelect","Styled.StatusSelect","Styled.AssigneeSelect","Styled.PriorityEnumDropdown"],"mappings":"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"}

package/dist/shared/src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js

@@ -86,35 +86,6 @@ const ThumbnailWrapper = styled.div`
     gap: var(--base-gap-small);
   }
 `;
-const Playable = styled.span`
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  z-index: 10;
-  --icon-size: 14px;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  pointer-events: none;
-
-  transition: opacity 200ms;
-
-  .icon {
-    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;
-    font-size: var(--icon-size);
-    z-index: 10;
-    position: relative;
-    color: var(--md-sys-color-outline-variant);
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    background: var(--md-sys-color-on-surface);
-    z-index: 0;
-    border-radius: 100%;
-  }
-`;
 const Content = styled.div`
   display: flex;
   flex-direction: column;
@@ -217,7 +188,7 @@ const PriorityEnumDropdown = styled(ayonReactComponents.EnumDropdown)`
 
   button {
     padding: 0 8px;
-    background-color: unset !important;
+    background-color: unset;
 
     &:hover {
       background-color: var(--md-sys-color-surface-container-low-hover);
@@ -239,7 +210,6 @@ exports.Grid = Grid;
 exports.Header = Header;
 exports.HeaderContainer = HeaderContainer;
 exports.LabelWrapper = LabelWrapper;
-exports.Playable = Playable;
 exports.PriorityEnumDropdown = PriorityEnumDropdown;
 exports.StatusSelect = StatusSelect;
 exports.TagsSelect = TagsSelect;

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

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelHeader.styled.cjs.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Playable = styled.span`\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  z-index: 10;\n  --icon-size: 14px;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  pointer-events: none;\n\n  transition: opacity 200ms;\n\n  .icon {\n    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;\n    font-size: var(--icon-size);\n    z-index: 10;\n    position: relative;\n    color: var(--md-sys-color-outline-variant);\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 2px;\n    background: var(--md-sys-color-on-surface);\n    z-index: 0;\n    border-radius: 100%;\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\n\nexport const StatusSelect = styled(StatusSelectComponent)`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset !important;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["Button","StatusSelectComponent","AssigneeSelectComponent","TagsSelectComponent","EnumDropdown"],"mappings":";;;;AASO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAI/B,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCd,MAAA,cAAc,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBtB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUrB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBhC,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BxB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCvB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAKtB,MAAA,eAAe,OAAOC,gCAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3C,MAAA,iBAAiB,OAAOC,kCAAuB;AAAA;AAAA;AAAA;AAAA;AAK/C,MAAA,aAAa,OAAOC,8BAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBvC,MAAA,uBAAuB,OAAOC,gCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BhD,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DetailsPanelHeader.styled.cjs.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\n\nexport const StatusSelect = styled(StatusSelectComponent)`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["Button","StatusSelectComponent","AssigneeSelectComponent","TagsSelectComponent","EnumDropdown"],"mappings":";;;;AASO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAI/B,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCd,MAAA,cAAc,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBtB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUrB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBhC,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCvB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAKtB,MAAA,eAAe,OAAOC,gCAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3C,MAAA,iBAAiB,OAAOC,kCAAuB;AAAA;AAAA;AAAA;AAAA;AAK/C,MAAA,aAAa,OAAOC,8BAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBvC,MAAA,uBAAuB,OAAOC,gCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BhD,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;"}

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

@@ -84,35 +84,6 @@ const ThumbnailWrapper = styled.div`
     gap: var(--base-gap-small);
   }
 `;
-const Playable = styled.span`
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  z-index: 10;
-  --icon-size: 14px;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  pointer-events: none;
-
-  transition: opacity 200ms;
-
-  .icon {
-    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;
-    font-size: var(--icon-size);
-    z-index: 10;
-    position: relative;
-    color: var(--md-sys-color-outline-variant);
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    background: var(--md-sys-color-on-surface);
-    z-index: 0;
-    border-radius: 100%;
-  }
-`;
 const Content = styled.div`
   display: flex;
   flex-direction: column;
@@ -215,7 +186,7 @@ const PriorityEnumDropdown = styled(EnumDropdown)`
 
   button {
     padding: 0 8px;
-    background-color: unset !important;
+    background-color: unset;
 
     &:hover {
       background-color: var(--md-sys-color-surface-container-low-hover);
@@ -238,7 +209,6 @@ export {
   Header,
   HeaderContainer,
   LabelWrapper,
-  Playable,
   PriorityEnumDropdown,
   StatusSelect,
   TagsSelect,

package/dist/shared/src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelHeader.styled.es.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Playable = styled.span`\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  z-index: 10;\n  --icon-size: 14px;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  pointer-events: none;\n\n  transition: opacity 200ms;\n\n  .icon {\n    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;\n    font-size: var(--icon-size);\n    z-index: 10;\n    position: relative;\n    color: var(--md-sys-color-outline-variant);\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 2px;\n    background: var(--md-sys-color-on-surface);\n    z-index: 0;\n    border-radius: 100%;\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\n\nexport const StatusSelect = styled(StatusSelectComponent)`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset !important;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["StatusSelectComponent","AssigneeSelectComponent","TagsSelectComponent"],"mappings":";;AASO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAI/B,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCd,MAAA,cAAc,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBtB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUrB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBhC,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BxB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCvB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAKtB,MAAA,eAAe,OAAOA,cAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3C,MAAA,iBAAiB,OAAOC,gBAAuB;AAAA;AAAA;AAAA;AAAA;AAK/C,MAAA,aAAa,OAAOC,YAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBvC,MAAA,uBAAuB,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BhD,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"DetailsPanelHeader.styled.es.js","sources":["../../../../../../src/containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\n\nexport const StatusSelect = styled(StatusSelectComponent)`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["StatusSelectComponent","AssigneeSelectComponent","TagsSelectComponent"],"mappings":";;AASO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAI/B,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCd,MAAA,cAAc,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBtB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUrB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBhC,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCvB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAKtB,MAAA,eAAe,OAAOA,cAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3C,MAAA,iBAAiB,OAAOC,gBAAuB;AAAA;AAAA;AAAA;AAAA;AAK/C,MAAA,aAAa,OAAOC,YAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBvC,MAAA,uBAAuB,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BhD,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -34,7 +34,7 @@ const Reference = styled.span`
   }
 
   ${({ $variant }) => $variant === "text" && styled.css`
-      background-color: unset !important;
+      background-color: unset;
     `}
 
   ${({ $variant }) => $variant === "filled" && styled.css`
@@ -56,7 +56,7 @@ const Reference = styled.span`
 
     /* remove background colour and hover on disabled */
     &.disabled {
-    background-color: unset !important;
+    background-color: unset;
   }
 `;
 exports.Reference = Reference;

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

@@ -1 +1 @@
-{"version":3,"file":"ActivityReference.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityReference/ActivityReference.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Reference = styled.span<{ $variant: 'surface' | 'filled' | 'text' }>`\n  gap: 2px;\n  display: inline-flex;\n  border-radius: var(--border-radius-m);\n  width: min-content;\n  position: relative;\n  user-select: none;\n  padding: 0;\n  padding-right: 4px;\n  white-space: nowrap;\n  cursor: pointer;\n\n  align-items: center;\n\n  &,\n  .icon {\n    color: var(--md-sys-color-primary);\n  }\n\n  .icon {\n    font-size: 20px;\n  }\n\n  background-color: var(--md-sys-color-surface-container-high);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n  &:active {\n    background-color: var(--md-sys-color-surface-container-high-active);\n  }\n\n  ${({ $variant }) =>\n    $variant === 'text' &&\n    css`\n      background-color: unset !important;\n    `}\n\n  ${({ $variant }) =>\n    $variant === 'filled' &&\n    css`\n      background-color: var(--md-sys-color-primary);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-primary);\n      }\n\n      &:hover {\n        background-color: var(--md-sys-color-primary-hover);\n      }\n\n      &:active {\n        background-color: var(--md-sys-color-primary-active);\n      }\n    `}\n\n    /* remove background colour and hover on disabled */\n    &.disabled {\n    background-color: unset !important;\n  }\n`\n"],"names":["css"],"mappings":";;;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgC5B,CAAC,EAAE,SAAS,MACZ,aAAa,UACbA,OAAA;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,EAAE,SAAS,MACZ,aAAa,YACbA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;"}
+{"version":3,"file":"ActivityReference.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityReference/ActivityReference.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Reference = styled.span<{ $variant: 'surface' | 'filled' | 'text' }>`\n  gap: 2px;\n  display: inline-flex;\n  border-radius: var(--border-radius-m);\n  width: min-content;\n  position: relative;\n  user-select: none;\n  padding: 0;\n  padding-right: 4px;\n  white-space: nowrap;\n  cursor: pointer;\n\n  align-items: center;\n\n  &,\n  .icon {\n    color: var(--md-sys-color-primary);\n  }\n\n  .icon {\n    font-size: 20px;\n  }\n\n  background-color: var(--md-sys-color-surface-container-high);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n  &:active {\n    background-color: var(--md-sys-color-surface-container-high-active);\n  }\n\n  ${({ $variant }) =>\n    $variant === 'text' &&\n    css`\n      background-color: unset;\n    `}\n\n  ${({ $variant }) =>\n    $variant === 'filled' &&\n    css`\n      background-color: var(--md-sys-color-primary);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-primary);\n      }\n\n      &:hover {\n        background-color: var(--md-sys-color-primary-hover);\n      }\n\n      &:active {\n        background-color: var(--md-sys-color-primary-active);\n      }\n    `}\n\n    /* remove background colour and hover on disabled */\n    &.disabled {\n    background-color: unset;\n  }\n`\n"],"names":["css"],"mappings":";;;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgC5B,CAAC,EAAE,SAAS,MACZ,aAAa,UACbA,OAAA;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,EAAE,SAAS,MACZ,aAAa,YACbA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;"}

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

@@ -32,7 +32,7 @@ const Reference = styled.span`
   }
 
   ${({ $variant }) => $variant === "text" && css`
-      background-color: unset !important;
+      background-color: unset;
     `}
 
   ${({ $variant }) => $variant === "filled" && css`
@@ -54,7 +54,7 @@ const Reference = styled.span`
 
     /* remove background colour and hover on disabled */
     &.disabled {
-    background-color: unset !important;
+    background-color: unset;
   }
 `;
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"ActivityReference.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityReference/ActivityReference.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Reference = styled.span<{ $variant: 'surface' | 'filled' | 'text' }>`\n  gap: 2px;\n  display: inline-flex;\n  border-radius: var(--border-radius-m);\n  width: min-content;\n  position: relative;\n  user-select: none;\n  padding: 0;\n  padding-right: 4px;\n  white-space: nowrap;\n  cursor: pointer;\n\n  align-items: center;\n\n  &,\n  .icon {\n    color: var(--md-sys-color-primary);\n  }\n\n  .icon {\n    font-size: 20px;\n  }\n\n  background-color: var(--md-sys-color-surface-container-high);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n  &:active {\n    background-color: var(--md-sys-color-surface-container-high-active);\n  }\n\n  ${({ $variant }) =>\n    $variant === 'text' &&\n    css`\n      background-color: unset !important;\n    `}\n\n  ${({ $variant }) =>\n    $variant === 'filled' &&\n    css`\n      background-color: var(--md-sys-color-primary);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-primary);\n      }\n\n      &:hover {\n        background-color: var(--md-sys-color-primary-hover);\n      }\n\n      &:active {\n        background-color: var(--md-sys-color-primary-active);\n      }\n    `}\n\n    /* remove background colour and hover on disabled */\n    &.disabled {\n    background-color: unset !important;\n  }\n`\n"],"names":[],"mappings":";AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgC5B,CAAC,EAAE,SAAS,MACZ,aAAa,UACb;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,EAAE,SAAS,MACZ,aAAa,YACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"ActivityReference.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityReference/ActivityReference.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Reference = styled.span<{ $variant: 'surface' | 'filled' | 'text' }>`\n  gap: 2px;\n  display: inline-flex;\n  border-radius: var(--border-radius-m);\n  width: min-content;\n  position: relative;\n  user-select: none;\n  padding: 0;\n  padding-right: 4px;\n  white-space: nowrap;\n  cursor: pointer;\n\n  align-items: center;\n\n  &,\n  .icon {\n    color: var(--md-sys-color-primary);\n  }\n\n  .icon {\n    font-size: 20px;\n  }\n\n  background-color: var(--md-sys-color-surface-container-high);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n  &:active {\n    background-color: var(--md-sys-color-surface-container-high-active);\n  }\n\n  ${({ $variant }) =>\n    $variant === 'text' &&\n    css`\n      background-color: unset;\n    `}\n\n  ${({ $variant }) =>\n    $variant === 'filled' &&\n    css`\n      background-color: var(--md-sys-color-primary);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-primary);\n      }\n\n      &:hover {\n        background-color: var(--md-sys-color-primary-hover);\n      }\n\n      &:active {\n        background-color: var(--md-sys-color-primary-active);\n      }\n    `}\n\n    /* remove background colour and hover on disabled */\n    &.disabled {\n    background-color: unset;\n  }\n`\n"],"names":[],"mappings":";AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgC5B,CAAC,EAAE,SAAS,MACZ,aAAa,UACb;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,EAAE,SAAS,MACZ,aAAa,YACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -47,7 +47,7 @@ const DialogWrapper = styled(ayonReactComponents.Dialog)`
   &.isImage {
     /* remove min/max height */
 
-    background-color: unset !important;
+    background-color: unset;
     border-radius: 0;
 
     width: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset !important;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n`\n"],"names":["Dialog"],"mappings":";;;;AAGa,MAAA,gBAAgB,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFnC,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"FileUploadPreview.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n`\n"],"names":["Dialog"],"mappings":";;;;AAGa,MAAA,gBAAgB,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFnC,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -45,7 +45,7 @@ const DialogWrapper = styled(Dialog)`
   &.isImage {
     /* remove min/max height */
 
-    background-color: unset !important;
+    background-color: unset;
     border-radius: 0;
 
     width: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset !important;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n`\n"],"names":[],"mappings":";;AAGa,MAAA,gBAAgB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFnC,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"FileUploadPreview.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n`\n"],"names":[],"mappings":";;AAGa,MAAA,gBAAgB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFnC,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}