@ynput/ayon-frontend-shared 0.2.34 → 0.2.36

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../_virtual/jsx-runtime.cjs.js"),i=require("@ynput/ayon-react-components"),t=require("styled-components"),v=require("clsx"),f=t(i.Button)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../_virtual/jsx-runtime.cjs.js"),o=require("@ynput/ayon-react-components"),t=require("styled-components"),b=require("clsx"),E=require("../utils/restrictedEntity.cjs.js"),a=require("../types/columnConfig.cjs.js"),R=t(o.Button)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -8,7 +8,7 @@
     }
   }
   cursor: pointer;
-`,y=t.div`
+`,C=t.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -16,15 +16,15 @@
   height: 100%;
   width: 100%;
   padding-right: 8px;
-`,j=t.div`
+`,S=t.div`
   width: 100%;
-  height: 24px;
+  height: 32px;
   overflow: hidden;
   position: relative;
-`,b=t.div`
+`,N=t.div`
   position: absolute;
   inset: 0;
-`,w=t.div`
+`,q=t.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -43,7 +43,7 @@
       color: var(--md-sys-color-primary);
     }
   } */
-`,E=t.div`
+`,k=t.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -57,7 +57,7 @@
   }
 
   .path {
-    ${i.theme.bodyMedium}
+    ${o.theme.bodyMedium}
     font-size: 14px;
     margin-bottom: -4px;
     color: var(--md-sys-color-outline);
@@ -73,7 +73,7 @@
   }
 
   .label {
-    ${i.theme.bodyMedium}
+    ${o.theme.bodyMedium}
     font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
@@ -83,10 +83,10 @@
   }
 
   .divider {
-    ${i.theme.bodyMedium}
+    ${o.theme.bodyMedium}
     font-size: 14px;
     color: var(--md-sys-color-outline);
     flex-shrink: 0;
   }
-`,R=({id:a,label:d,name:c,path:o,showHierarchy:n,icon:r,type:x,isExpanded:p,toggleExpandAll:m,toggleExpanded:h,rowHeight:u=40})=>{const s=u<50,g=s||n?24:o?32:24;return e.jsxRuntimeExports.jsxs(y,{children:[n?x==="folder"?e.jsxRuntimeExports.jsx(f,{onClick:l=>{l.stopPropagation(),l.altKey?m(a):h()},className:"expander",icon:p?"expand_more":"chevron_right"}):e.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}):null,e.jsxRuntimeExports.jsx(j,{style:{height:g},children:e.jsxRuntimeExports.jsx(b,{children:e.jsxRuntimeExports.jsxs(w,{children:[r&&e.jsxRuntimeExports.jsx(i.Icon,{icon:r}),e.jsxRuntimeExports.jsxs(E,{className:v({compact:s}),children:[o&&e.jsxRuntimeExports.jsx("span",{className:"path",children:o}),s&&o&&e.jsxRuntimeExports.jsx("span",{className:"divider",children:"/"}),e.jsxRuntimeExports.jsx("span",{className:"label",children:d||c})]})]})})})]})};exports.EntityNameWidget=R;
+`,M=({id:l,label:d,name:c,path:s,isExpandable:p,icon:n,type:x,isExpanded:h,toggleExpandAll:m,toggleExpanded:u,rowHeight:g=40,columnDisplayConfig:r})=>{const v=E.isEntityRestricted(x),i=g<50,y=a.getDisplayValue(r,"path","compact")??!0,f=a.getDisplayValue(r,"path","full")??!0,w=i?y:f;return e.jsxRuntimeExports.jsxs(C,{children:[p?e.jsxRuntimeExports.jsx(R,{onClick:j=>{j.altKey?m(l):u()},className:"expander",icon:h?"expand_more":"chevron_right"}):null,e.jsxRuntimeExports.jsx(S,{children:e.jsxRuntimeExports.jsx(N,{children:e.jsxRuntimeExports.jsxs(q,{children:[n&&e.jsxRuntimeExports.jsx(o.Icon,{icon:n}),e.jsxRuntimeExports.jsxs(k,{className:b({compact:i}),children:[w&&!v&&e.jsxRuntimeExports.jsxs("span",{className:"path",children:[s,i&&s?"/":""]}),e.jsxRuntimeExports.jsx("span",{className:"label",children:d||c})]})]})})})]})};exports.EntityNameWidget=M;
 //# sourceMappingURL=EntityNameWidget.cjs.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport clsx from 'clsx'\n\nconst Expander = styled(Button)`\n  &.expander {\n    background-color: unset;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n  cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n  width: 100%;\n  height: 24px;\n  overflow: hidden;\n  position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n  position: absolute;\n  inset: 0;\n`\n\nconst StyledContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-large);\n  padding: 2px 4px;\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  width: fit-content;\n  max-width: 100%;\n  height: 100%;\n\n  /* &:hover {\n    &,\n    .icon,\n    .path {\n      color: var(--md-sys-color-primary);\n    }\n  } */\n`\n\nconst StyledTextContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n\n  &.compact {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .path {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    margin-bottom: -4px;\n    color: var(--md-sys-color-outline);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.compact .path {\n    margin-bottom: 0;\n    text-overflow: unset;\n    flex-shrink: 0 1 auto;\n  }\n\n  .label {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .divider {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    color: var(--md-sys-color-outline);\n    flex-shrink: 0;\n  }\n`\n\ntype EntityNameWidgetProps = {\n  id: string\n  label: string\n  name: string\n  path?: string | null\n  showHierarchy?: boolean\n  icon?: string | null\n  type: string\n  isExpanded: boolean\n  toggleExpandAll: (id: string) => void\n  toggleExpanded: () => void\n  rowHeight?: number\n}\n\nexport const EntityNameWidget = ({\n  id,\n  label,\n  name,\n  path,\n  showHierarchy,\n  icon,\n  type,\n  isExpanded,\n  toggleExpandAll,\n  toggleExpanded,\n  rowHeight = 40,\n}: EntityNameWidgetProps) => {\n  // Determine layout based on row height\n  // < 50px = single line (compact), >= 50px = stacked\n  const isCompact = rowHeight < 50\n\n  // Always keep content height at 24px in compact mode or hierarchy mode to prevent jumping\n  // Only allow expansion to 32px in non-hierarchy mode when not compact and path exists\n  const contentHeight = (isCompact || showHierarchy) ? 24 : (path ? 32 : 24)\n\n  return (\n    <StyledEntityNameWidget>\n      {showHierarchy ? (\n        type === 'folder' ? (\n          <Expander\n            onClick={(e) => {\n              e.stopPropagation()\n              if (e.altKey) {\n                // expand/collapse all children\n                toggleExpandAll(id)\n              } else {\n                // use built-in toggleExpanded function\n                toggleExpanded()\n              }\n            }}\n            className=\"expander\"\n            icon={isExpanded ? 'expand_more' : 'chevron_right'}\n          />\n        ) : (\n          <div style={{ display: 'inline-block', minWidth: 24 }} />\n        )\n      ) : null}\n      <StyledContentWrapper style={{ height: contentHeight }}>\n        <StyledContentAbsolute>\n          <StyledContent>\n            {icon && <Icon icon={icon} />}\n            <StyledTextContent className={clsx({ compact: isCompact })}>\n              {path && <span className=\"path\">{path}</span>}\n              {isCompact && path && <span className=\"divider\">/</span>}\n              <span className=\"label\">{label || name}</span>\n            </StyledTextContent>\n          </StyledContent>\n        </StyledContentAbsolute>\n      </StyledContentWrapper>\n    </StyledEntityNameWidget>\n  )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","showHierarchy","icon","type","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","isCompact","contentHeight","jsx","e","jsxs","Icon","clsx"],"mappings":"yOAIMA,EAAWC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUhCG,EAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9BI,EAAwBJ,EAAO;AAAA;AAAA;AAAA,EAK/BK,EAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBvBM,EAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3BO,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUhBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBTC,EAAmB,CAAC,CAC/B,GAAAC,EACA,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,cAAAC,EACA,KAAAC,EACA,KAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EAAY,EACd,IAA6B,CAG3B,MAAMC,EAAYD,EAAY,GAIxBE,EAAiBD,GAAaP,EAAiB,GAAMD,EAAO,GAAK,GAEvE,gCACGV,EACE,CAAA,SAAA,CAAAW,EACCE,IAAS,SACPO,EAAA,kBAAA,IAACvB,EAAA,CACC,QAAUwB,GAAM,CACdA,EAAE,gBAAgB,EACdA,EAAE,OAEJN,EAAgBR,CAAE,EAGHS,EAAA,CAEnB,EACA,UAAU,WACV,KAAMF,EAAa,cAAgB,eAAA,CACrC,EAECM,wBAAA,MAAA,CAAI,MAAO,CAAE,QAAS,eAAgB,SAAU,GAAM,CAAA,EAEvD,KACJA,EAAA,kBAAA,IAACnB,EAAqB,CAAA,MAAO,CAAE,OAAQkB,GACrC,SAAAC,EAAAA,kBAAAA,IAAClB,EACC,CAAA,SAAAoB,EAAA,kBAAA,KAACnB,EACE,CAAA,SAAA,CAAQS,GAAAQ,EAAA,kBAAA,IAACG,QAAK,KAAAX,CAAY,CAAA,EAC3BU,yBAAClB,GAAkB,UAAWoB,EAAK,CAAE,QAASN,EAAW,EACtD,SAAA,CAAAR,GAASU,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,OAAQ,SAAKV,EAAA,EACrCQ,GAAaR,GAAQU,EAAAA,kBAAAA,IAAC,OAAK,CAAA,UAAU,UAAU,SAAC,IAAA,EAChDA,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,QAAS,YAASX,CAAK,CAAA,CAAA,CACzC,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CAAA,EACF,CAEJ"}
+{"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport clsx from 'clsx'\nimport { isEntityRestricted } from '../utils/restrictedEntity'\nimport { getDisplayValue, type DisplayConfig, getColumnDisplayConfig } from '../types/columnConfig'\n\nconst Expander = styled(Button)`\n  &.expander {\n    background-color: unset;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n  cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n  width: 100%;\n  height: 32px;\n  overflow: hidden;\n  position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n  position: absolute;\n  inset: 0;\n`\n\nconst StyledContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-large);\n  padding: 2px 4px;\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  width: fit-content;\n  max-width: 100%;\n  height: 100%;\n\n  /* &:hover {\n    &,\n    .icon,\n    .path {\n      color: var(--md-sys-color-primary);\n    }\n  } */\n`\n\nconst StyledTextContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n\n  &.compact {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .path {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    margin-bottom: -4px;\n    color: var(--md-sys-color-outline);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.compact .path {\n    margin-bottom: 0;\n    text-overflow: unset;\n    flex-shrink: 0 1 auto;\n  }\n\n  .label {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .divider {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    color: var(--md-sys-color-outline);\n    flex-shrink: 0;\n  }\n`\n\ntype EntityNameWidgetProps = {\n  id: string\n  label: string\n  name: string\n  path?: string | null\n  isExpandable?: boolean\n  icon?: string | null\n  type: string\n  isExpanded: boolean\n  toggleExpandAll: (id: string) => void\n  toggleExpanded: () => void\n  rowHeight?: number\n  columnDisplayConfig?: DisplayConfig\n}\n\nexport const EntityNameWidget = ({\n  id,\n  label,\n  name,\n  path,\n  isExpandable,\n  icon,\n  type,\n  isExpanded,\n  toggleExpandAll,\n  toggleExpanded,\n  rowHeight = 40,\n  columnDisplayConfig,\n}: EntityNameWidgetProps) => {\n  // Check if this is a restricted access entity\n  const isRestricted = isEntityRestricted(type)\n\n  // Determine layout based on row height\n  // < 50px = single line (compact), >= 50px = stacked\n  const isCompact = rowHeight < 50\n\n  // Determine if path should be shown based on display configuration\n  // Check layout-specific setting first, then general setting\n  const showPathCompact = getDisplayValue(columnDisplayConfig, 'path', 'compact') ?? true\n  const showPathFull = getDisplayValue(columnDisplayConfig, 'path', 'full') ?? true\n  const shouldShowPath = isCompact ? showPathCompact : showPathFull\n\n  return (\n    <StyledEntityNameWidget>\n      {isExpandable ? (\n        <Expander\n          onClick={(e) => {\n            if (e.altKey) {\n              // expand/collapse all children\n              toggleExpandAll(id)\n            } else {\n              // use built-in toggleExpanded function\n              toggleExpanded()\n            }\n          }}\n          className=\"expander\"\n          icon={isExpanded ? 'expand_more' : 'chevron_right'}\n        />\n      ) : null}\n      <StyledContentWrapper>\n        <StyledContentAbsolute>\n          <StyledContent>\n            {icon && <Icon icon={icon} />}\n            <StyledTextContent className={clsx({ compact: isCompact })}>\n              {shouldShowPath && !isRestricted && (\n                <span className=\"path\">\n                  {path}\n                  {isCompact && path ? '/' : ''}\n                </span>\n              )}\n              <span className=\"label\">{label || name}</span>\n            </StyledTextContent>\n          </StyledContent>\n        </StyledContentAbsolute>\n      </StyledContentWrapper>\n    </StyledEntityNameWidget>\n  )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","isExpandable","icon","type","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","columnDisplayConfig","isRestricted","isEntityRestricted","isCompact","showPathCompact","getDisplayValue","showPathFull","shouldShowPath","jsx","e","Icon","jsxs","clsx"],"mappings":"iUAMMA,EAAWC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUhCG,EAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9BI,EAAwBJ,EAAO;AAAA;AAAA;AAAA,EAK/BK,EAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBvBM,EAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3BO,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUhBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBTC,EAAmB,CAAC,CAC/B,GAAAC,EACA,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,aAAAC,EACA,KAAAC,EACA,KAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EAAY,GACZ,oBAAAC,CACF,IAA6B,CAErB,MAAAC,EAAeC,qBAAmBP,CAAI,EAItCQ,EAAYJ,EAAY,GAIxBK,EAAkBC,EAAAA,gBAAgBL,EAAqB,OAAQ,SAAS,GAAK,GAC7EM,EAAeD,EAAAA,gBAAgBL,EAAqB,OAAQ,MAAM,GAAK,GACvEO,EAAiBJ,EAAYC,EAAkBE,EAErD,gCACGxB,EACE,CAAA,SAAA,CACCW,EAAAe,EAAA,kBAAA,IAAC7B,EAAA,CACC,QAAU8B,GAAM,CACVA,EAAE,OAEJZ,EAAgBR,CAAE,EAGHS,EAAA,CAEnB,EACA,UAAU,WACV,KAAMF,EAAa,cAAgB,eAAA,CAAA,EAEnC,KACHY,EAAAA,kBAAAA,IAAAzB,EAAA,CACC,SAACyB,wBAAAxB,EAAA,CACC,kCAACC,EACE,CAAA,SAAA,CAAQS,GAAAc,EAAA,kBAAA,IAACE,QAAK,KAAAhB,CAAY,CAAA,EAC3BiB,yBAACzB,GAAkB,UAAW0B,EAAK,CAAE,QAAST,EAAW,EACtD,SAAA,CAAAI,GAAkB,CAACN,GACjBU,EAAA,kBAAA,KAAA,OAAA,CAAK,UAAU,OACb,SAAA,CAAAnB,EACAW,GAAaX,EAAO,IAAM,EAAA,EAC7B,EAEDgB,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,QAAS,YAASjB,CAAK,CAAA,CAAA,CACzC,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CAAA,EACF,CAEJ"}

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.es.js

@@ -1,8 +1,10 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.es.js";
-import { Button as g, theme as n, Icon as u } from "@ynput/ayon-react-components";
-import o from "styled-components";
-import y from "clsx";
-const w = o(g)`
+import { Button as j, theme as i, Icon as C } from "@ynput/ayon-react-components";
+import t from "styled-components";
+import N from "clsx";
+import { isEntityRestricted as S } from "../utils/restrictedEntity.es.js";
+import { getDisplayValue as a } from "../types/columnConfig.es.js";
+const k = t(j)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -12,7 +14,7 @@ const w = o(g)`
     }
   }
   cursor: pointer;
-`, b = o.div`
+`, E = t.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -20,15 +22,15 @@ const w = o(g)`
   height: 100%;
   width: 100%;
   padding-right: 8px;
-`, j = o.div`
+`, z = t.div`
   width: 100%;
-  height: 24px;
+  height: 32px;
   overflow: hidden;
   position: relative;
-`, N = o.div`
+`, M = t.div`
   position: absolute;
   inset: 0;
-`, k = o.div`
+`, P = t.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -47,7 +49,7 @@ const w = o(g)`
       color: var(--md-sys-color-primary);
     }
   } */
-`, C = o.div`
+`, R = t.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -61,7 +63,7 @@ const w = o(g)`
   }
 
   .path {
-    ${n.bodyMedium}
+    ${i.bodyMedium}
     font-size: 14px;
     margin-bottom: -4px;
     color: var(--md-sys-color-outline);
@@ -77,7 +79,7 @@ const w = o(g)`
   }
 
   .label {
-    ${n.bodyMedium}
+    ${i.bodyMedium}
     font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
@@ -87,47 +89,50 @@ const w = o(g)`
   }
 
   .divider {
-    ${n.bodyMedium}
+    ${i.bodyMedium}
     font-size: 14px;
     color: var(--md-sys-color-outline);
     flex-shrink: 0;
   }
-`, M = ({
-  id: a,
+`, I = ({
+  id: l,
   label: d,
   name: c,
-  path: t,
-  showHierarchy: r,
+  path: r,
+  isExpandable: p,
   icon: s,
-  type: p,
+  type: h,
   isExpanded: m,
   toggleExpandAll: x,
-  toggleExpanded: h,
-  rowHeight: f = 40
+  toggleExpanded: f,
+  rowHeight: u = 40,
+  columnDisplayConfig: n
 }) => {
-  const i = f < 50, v = i || r ? 24 : t ? 32 : 24;
-  return /* @__PURE__ */ e.jsxs(b, { children: [
-    r ? p === "folder" ? /* @__PURE__ */ e.jsx(
-      w,
+  const v = S(h), o = u < 50, g = a(n, "path", "compact") ?? !0, w = a(n, "path", "full") ?? !0, y = o ? g : w;
+  return /* @__PURE__ */ e.jsxs(E, { children: [
+    p ? /* @__PURE__ */ e.jsx(
+      k,
       {
-        onClick: (l) => {
-          l.stopPropagation(), l.altKey ? x(a) : h();
+        onClick: (b) => {
+          b.altKey ? x(l) : f();
         },
         className: "expander",
         icon: m ? "expand_more" : "chevron_right"
       }
-    ) : /* @__PURE__ */ e.jsx("div", { style: { display: "inline-block", minWidth: 24 } }) : null,
-    /* @__PURE__ */ e.jsx(j, { style: { height: v }, children: /* @__PURE__ */ e.jsx(N, { children: /* @__PURE__ */ e.jsxs(k, { children: [
-      s && /* @__PURE__ */ e.jsx(u, { icon: s }),
-      /* @__PURE__ */ e.jsxs(C, { className: y({ compact: i }), children: [
-        t && /* @__PURE__ */ e.jsx("span", { className: "path", children: t }),
-        i && t && /* @__PURE__ */ e.jsx("span", { className: "divider", children: "/" }),
+    ) : null,
+    /* @__PURE__ */ e.jsx(z, { children: /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsxs(P, { children: [
+      s && /* @__PURE__ */ e.jsx(C, { icon: s }),
+      /* @__PURE__ */ e.jsxs(R, { className: N({ compact: o }), children: [
+        y && !v && /* @__PURE__ */ e.jsxs("span", { className: "path", children: [
+          r,
+          o && r ? "/" : ""
+        ] }),
         /* @__PURE__ */ e.jsx("span", { className: "label", children: d || c })
       ] })
     ] }) }) })
   ] });
 };
 export {
-  M as EntityNameWidget
+  I as EntityNameWidget
 };
 //# sourceMappingURL=EntityNameWidget.es.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport clsx from 'clsx'\n\nconst Expander = styled(Button)`\n  &.expander {\n    background-color: unset;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n  cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n  width: 100%;\n  height: 24px;\n  overflow: hidden;\n  position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n  position: absolute;\n  inset: 0;\n`\n\nconst StyledContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-large);\n  padding: 2px 4px;\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  width: fit-content;\n  max-width: 100%;\n  height: 100%;\n\n  /* &:hover {\n    &,\n    .icon,\n    .path {\n      color: var(--md-sys-color-primary);\n    }\n  } */\n`\n\nconst StyledTextContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n\n  &.compact {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .path {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    margin-bottom: -4px;\n    color: var(--md-sys-color-outline);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.compact .path {\n    margin-bottom: 0;\n    text-overflow: unset;\n    flex-shrink: 0 1 auto;\n  }\n\n  .label {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .divider {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    color: var(--md-sys-color-outline);\n    flex-shrink: 0;\n  }\n`\n\ntype EntityNameWidgetProps = {\n  id: string\n  label: string\n  name: string\n  path?: string | null\n  showHierarchy?: boolean\n  icon?: string | null\n  type: string\n  isExpanded: boolean\n  toggleExpandAll: (id: string) => void\n  toggleExpanded: () => void\n  rowHeight?: number\n}\n\nexport const EntityNameWidget = ({\n  id,\n  label,\n  name,\n  path,\n  showHierarchy,\n  icon,\n  type,\n  isExpanded,\n  toggleExpandAll,\n  toggleExpanded,\n  rowHeight = 40,\n}: EntityNameWidgetProps) => {\n  // Determine layout based on row height\n  // < 50px = single line (compact), >= 50px = stacked\n  const isCompact = rowHeight < 50\n\n  // Always keep content height at 24px in compact mode or hierarchy mode to prevent jumping\n  // Only allow expansion to 32px in non-hierarchy mode when not compact and path exists\n  const contentHeight = (isCompact || showHierarchy) ? 24 : (path ? 32 : 24)\n\n  return (\n    <StyledEntityNameWidget>\n      {showHierarchy ? (\n        type === 'folder' ? (\n          <Expander\n            onClick={(e) => {\n              e.stopPropagation()\n              if (e.altKey) {\n                // expand/collapse all children\n                toggleExpandAll(id)\n              } else {\n                // use built-in toggleExpanded function\n                toggleExpanded()\n              }\n            }}\n            className=\"expander\"\n            icon={isExpanded ? 'expand_more' : 'chevron_right'}\n          />\n        ) : (\n          <div style={{ display: 'inline-block', minWidth: 24 }} />\n        )\n      ) : null}\n      <StyledContentWrapper style={{ height: contentHeight }}>\n        <StyledContentAbsolute>\n          <StyledContent>\n            {icon && <Icon icon={icon} />}\n            <StyledTextContent className={clsx({ compact: isCompact })}>\n              {path && <span className=\"path\">{path}</span>}\n              {isCompact && path && <span className=\"divider\">/</span>}\n              <span className=\"label\">{label || name}</span>\n            </StyledTextContent>\n          </StyledContent>\n        </StyledContentAbsolute>\n      </StyledContentWrapper>\n    </StyledEntityNameWidget>\n  )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","showHierarchy","icon","type","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","isCompact","contentHeight","jsx","e","jsxs","Icon","clsx"],"mappings":";;;;AAIA,MAAMA,IAAWC,EAAOC,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYxBC,IAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhCG,IAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BI,IAAwBJ,EAAO;AAAA;AAAA;AAAA,GAK/BK,IAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBvBM,IAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3BO,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUhBA,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBTC,IAAmB,CAAC;AAAA,EAC/B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAA6B;AAG3B,QAAMC,IAAYD,IAAY,IAIxBE,IAAiBD,KAAaP,IAAiB,KAAMD,IAAO,KAAK;AAEvE,gCACGV,GACE,EAAA,UAAA;AAAA,IAAAW,IACCE,MAAS,WACPO,gBAAAA,EAAA;AAAA,MAACvB;AAAA,MAAA;AAAA,QACC,SAAS,CAACwB,MAAM;AACd,UAAAA,EAAE,gBAAgB,GACdA,EAAE,SAEJN,EAAgBR,CAAE,IAGHS,EAAA;AAAA,QAEnB;AAAA,QACA,WAAU;AAAA,QACV,MAAMF,IAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC,IAECM,gBAAAA,MAAA,OAAA,EAAI,OAAO,EAAE,SAAS,gBAAgB,UAAU,KAAM,CAAA,IAEvD;AAAA,IACJA,gBAAAA,EAAA,IAACnB,GAAqB,EAAA,OAAO,EAAE,QAAQkB,KACrC,UAAAC,gBAAAA,EAAAA,IAAClB,GACC,EAAA,UAAAoB,gBAAAA,EAAA,KAACnB,GACE,EAAA,UAAA;AAAA,MAAQS,KAAAQ,gBAAAA,EAAA,IAACG,KAAK,MAAAX,EAAY,CAAA;AAAA,MAC3BU,gBAAAA,OAAClB,KAAkB,WAAWoB,EAAK,EAAE,SAASN,GAAW,GACtD,UAAA;AAAA,QAAAR,KAASU,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,QAAQ,UAAKV,GAAA;AAAA,QACrCQ,KAAaR,KAAQU,gBAAAA,EAAAA,IAAC,QAAK,EAAA,WAAU,WAAU,UAAC,KAAA;AAAA,QAChDA,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,SAAS,eAASX,EAAK,CAAA;AAAA,MAAA,EACzC,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport clsx from 'clsx'\nimport { isEntityRestricted } from '../utils/restrictedEntity'\nimport { getDisplayValue, type DisplayConfig, getColumnDisplayConfig } from '../types/columnConfig'\n\nconst Expander = styled(Button)`\n  &.expander {\n    background-color: unset;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n  cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n  width: 100%;\n  height: 32px;\n  overflow: hidden;\n  position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n  position: absolute;\n  inset: 0;\n`\n\nconst StyledContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-large);\n  padding: 2px 4px;\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  width: fit-content;\n  max-width: 100%;\n  height: 100%;\n\n  /* &:hover {\n    &,\n    .icon,\n    .path {\n      color: var(--md-sys-color-primary);\n    }\n  } */\n`\n\nconst StyledTextContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n\n  &.compact {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .path {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    margin-bottom: -4px;\n    color: var(--md-sys-color-outline);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.compact .path {\n    margin-bottom: 0;\n    text-overflow: unset;\n    flex-shrink: 0 1 auto;\n  }\n\n  .label {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .divider {\n    ${theme.bodyMedium}\n    font-size: 14px;\n    color: var(--md-sys-color-outline);\n    flex-shrink: 0;\n  }\n`\n\ntype EntityNameWidgetProps = {\n  id: string\n  label: string\n  name: string\n  path?: string | null\n  isExpandable?: boolean\n  icon?: string | null\n  type: string\n  isExpanded: boolean\n  toggleExpandAll: (id: string) => void\n  toggleExpanded: () => void\n  rowHeight?: number\n  columnDisplayConfig?: DisplayConfig\n}\n\nexport const EntityNameWidget = ({\n  id,\n  label,\n  name,\n  path,\n  isExpandable,\n  icon,\n  type,\n  isExpanded,\n  toggleExpandAll,\n  toggleExpanded,\n  rowHeight = 40,\n  columnDisplayConfig,\n}: EntityNameWidgetProps) => {\n  // Check if this is a restricted access entity\n  const isRestricted = isEntityRestricted(type)\n\n  // Determine layout based on row height\n  // < 50px = single line (compact), >= 50px = stacked\n  const isCompact = rowHeight < 50\n\n  // Determine if path should be shown based on display configuration\n  // Check layout-specific setting first, then general setting\n  const showPathCompact = getDisplayValue(columnDisplayConfig, 'path', 'compact') ?? true\n  const showPathFull = getDisplayValue(columnDisplayConfig, 'path', 'full') ?? true\n  const shouldShowPath = isCompact ? showPathCompact : showPathFull\n\n  return (\n    <StyledEntityNameWidget>\n      {isExpandable ? (\n        <Expander\n          onClick={(e) => {\n            if (e.altKey) {\n              // expand/collapse all children\n              toggleExpandAll(id)\n            } else {\n              // use built-in toggleExpanded function\n              toggleExpanded()\n            }\n          }}\n          className=\"expander\"\n          icon={isExpanded ? 'expand_more' : 'chevron_right'}\n        />\n      ) : null}\n      <StyledContentWrapper>\n        <StyledContentAbsolute>\n          <StyledContent>\n            {icon && <Icon icon={icon} />}\n            <StyledTextContent className={clsx({ compact: isCompact })}>\n              {shouldShowPath && !isRestricted && (\n                <span className=\"path\">\n                  {path}\n                  {isCompact && path ? '/' : ''}\n                </span>\n              )}\n              <span className=\"label\">{label || name}</span>\n            </StyledTextContent>\n          </StyledContent>\n        </StyledContentAbsolute>\n      </StyledContentWrapper>\n    </StyledEntityNameWidget>\n  )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","isExpandable","icon","type","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","columnDisplayConfig","isRestricted","isEntityRestricted","isCompact","showPathCompact","getDisplayValue","showPathFull","shouldShowPath","jsx","e","Icon","jsxs","clsx"],"mappings":";;;;;;AAMA,MAAMA,IAAWC,EAAOC,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYxBC,IAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhCG,IAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BI,IAAwBJ,EAAO;AAAA;AAAA;AAAA,GAK/BK,IAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBvBM,IAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3BO,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUhBA,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,GAsBTC,IAAmB,CAAC;AAAA,EAC/B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,qBAAAC;AACF,MAA6B;AAErB,QAAAC,IAAeC,EAAmBP,CAAI,GAItCQ,IAAYJ,IAAY,IAIxBK,IAAkBC,EAAgBL,GAAqB,QAAQ,SAAS,KAAK,IAC7EM,IAAeD,EAAgBL,GAAqB,QAAQ,MAAM,KAAK,IACvEO,IAAiBJ,IAAYC,IAAkBE;AAErD,gCACGxB,GACE,EAAA,UAAA;AAAA,IACCW,IAAAe,gBAAAA,EAAA;AAAA,MAAC7B;AAAA,MAAA;AAAA,QACC,SAAS,CAAC8B,MAAM;AACd,UAAIA,EAAE,SAEJZ,EAAgBR,CAAE,IAGHS,EAAA;AAAA,QAEnB;AAAA,QACA,WAAU;AAAA,QACV,MAAMF,IAAa,gBAAgB;AAAA,MAAA;AAAA,IAAA,IAEnC;AAAA,IACHY,gBAAAA,EAAAA,IAAAzB,GAAA,EACC,UAACyB,gBAAAA,MAAAxB,GAAA,EACC,iCAACC,GACE,EAAA,UAAA;AAAA,MAAQS,KAAAc,gBAAAA,EAAA,IAACE,KAAK,MAAAhB,EAAY,CAAA;AAAA,MAC3BiB,gBAAAA,OAACzB,KAAkB,WAAW0B,EAAK,EAAE,SAAST,GAAW,GACtD,UAAA;AAAA,QAAAI,KAAkB,CAACN,KACjBU,gBAAAA,EAAA,KAAA,QAAA,EAAK,WAAU,QACb,UAAA;AAAA,UAAAnB;AAAA,UACAW,KAAaX,IAAO,MAAM;AAAA,QAAA,GAC7B;AAAA,QAEDgB,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,SAAS,eAASjB,EAAK,CAAA;AAAA,MAAA,EACzC,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/shared/src/containers/ProjectTreeTable/widgets/EnumCellValue.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../_virtual/jsx-runtime.cjs.js"),o=require("@ynput/ayon-react-components"),t=require("clsx"),r=require("styled-components"),H="edit-trigger",J=r.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../_virtual/jsx-runtime.cjs.js"),o=require("@ynput/ayon-react-components"),t=require("clsx"),r=require("styled-components"),B="edit-trigger",F=r.div`
   display: flex;
-  gap: var(--base-gap-small);
+  gap: 1px;
   align-items: center;
   width: 100%;
   height: 100%;
@@ -25,39 +25,48 @@
       background-color: var(--md-sys-color-primary-container-hover);
     }
   }
-`,K=r.div`
+
+  /* when value container is higher than 55px, wrap the contents */
+  &:not(.item) {
+    container-type: size;
+
+    @container (min-height: 55px) {
+      .values {
+        flex-wrap: wrap;
+        align-items: flex-start;
+        max-height: 100%;
+      }
+    }
+  }
+`,H=r.div`
   flex: 1;
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
+  align-content: flex-start;
   overflow: hidden;
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
   flex-wrap: nowrap;
-
-  &.wrap {
-    flex-wrap: wrap;
-  }
-`,M=r.div`
+`,J=r.div`
   display: flex;
-  gap: var(--base-gap-small);
+  gap: 2px;
   align-items: center;
 
   max-width: 100%;
   min-width: 20px;
-`,Q=r.span`
+`,K=r.span`
   text-align: left;
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
   max-width: 100%;
 
   &.placeholder {
     color: var(--md-sys-color-outline);
   }
-`,U=r.img`
+`,M=r.img`
   width: 20px;
   height: 20px;
   object-fit: cover;
@@ -65,11 +74,7 @@
   &.avatar {
     border-radius: 50%;
   }
-`,X=r.div`
-  width: 32px;
-  height: fit-content;
-  min-height: 32px;
-  aspect-ratio: 1;
+`,Q=r.div`
   border-radius: var(--border-radius-m);
   display: flex;
   justify-content: center;
@@ -84,7 +89,8 @@
   &.open {
     background-color: transparent;
   }
-`,Y=r(o.Icon)`
+`,U=r(o.Icon)`
   transition: rotate 0.2s;
-`,Z=({selectedOptions:a,placeholder:n,hasMultipleValues:g,isMultiSelect:c,isOpen:i,isItem:l,isSelected:d,isReadOnly:h,rowHeight:m,className:v,pt:y,...b})=>{const{icon:f={},img:j={},value:w={},expand:R={},close:E={}}=y||{},{style:N,className:S,...C}=f,{style:k,className:I,...W}=j,{style:V,className:q,...L}=w,{style:T,className:_,...A}=R,{style:D,className:G,...P}=E,p=a.every(e=>e.icon),B=!g||!p,x=!p&&c&&!l,u=!a.length&&n;u&&(a=[{label:n,value:""}]);const F=m!==void 0&&m>100;return s.jsxRuntimeExports.jsxs(J,{className:t(v,{selected:d,item:l}),...b,children:[s.jsxRuntimeExports.jsx(K,{className:t({wrap:F}),children:a.map((e,z)=>s.jsxRuntimeExports.jsxs(M,{children:[e.icon&&$(e.icon)?s.jsxRuntimeExports.jsx(U,{src:e.icon,className:t({avatar:O(e.icon)},I),style:k,"data-tooltip":e.label,...W}):e.icon?s.jsxRuntimeExports.jsx(o.Icon,{icon:e.icon,style:{color:e.color,...N},className:S,...C}):null,(B||!e.icon)&&s.jsxRuntimeExports.jsx(Q,{style:{color:x?"inherit":e.color,backgroundColor:x?e.color||"var(--md-sys-color-surface-container)":"transparent",...V},className:t({placeholder:u},q),"aria-label":e.label,...L,children:e.label})]},e.value.toString()+z))}),!l&&!h&&s.jsxRuntimeExports.jsx(X,{className:t("expand",H,{open:i},_),children:s.jsxRuntimeExports.jsx(Y,{icon:"expand_more",style:{rotate:i?"180deg":"0",...T},"aria-label":"Expand options",...A})}),l&&d&&c&&s.jsxRuntimeExports.jsx(o.Icon,{icon:"close",style:{marginLeft:"auto",marginRight:4,...D},"aria-label":"Deselect item",className:t("close",G),...P})]})},$=(a="")=>a.startsWith("/")||a.startsWith("./")||a.startsWith("../")||a.startsWith("http://")||a.startsWith("https://"),O=a=>a.includes("avatar");exports.EnumCellValue=Z;
+  padding: 2px;
+`,X=({selectedOptions:a,placeholder:n,hasMultipleValues:p,isMultiSelect:c,isOpen:i,isItem:l,isSelected:d,isReadOnly:g,className:h,pt:v,...y})=>{const{icon:b={},img:f={},value:j={},expand:R={},close:w={}}=v||{},{style:E,className:N,...S}=b,{style:C,className:k,...I}=f,{style:W,className:V,...q}=j,{style:T,className:L,..._}=R,{style:A,className:D,...G}=w,x=a.every(e=>e.icon),P=!p||!x,m=!x&&c&&!l,u=!a.length&&n;return u&&(a=[{label:n,value:""}]),s.jsxRuntimeExports.jsxs(F,{className:t(h,{selected:d,item:l}),...y,children:[s.jsxRuntimeExports.jsx(H,{className:"values",children:a.map((e,z)=>s.jsxRuntimeExports.jsxs(J,{children:[e.icon&&Y(e.icon)?s.jsxRuntimeExports.jsx(M,{src:e.icon,className:t({avatar:Z(e.icon)},k),style:C,"data-tooltip":e.label,...I}):e.icon?s.jsxRuntimeExports.jsx(o.Icon,{icon:e.icon,style:{color:e.color,...E},className:N,...S}):null,(P||!e.icon)&&s.jsxRuntimeExports.jsx(K,{style:{color:m&&e.color?o.getTextColor(e.color):e.color,backgroundColor:m?e.color||"var(--md-sys-color-surface-container)":"transparent",...W},className:t({placeholder:u},V),"aria-label":e.label,...q,children:e.label})]},e.value.toString()+z))}),!l&&!g&&s.jsxRuntimeExports.jsx(Q,{className:t("expand",B,{open:i},L),children:s.jsxRuntimeExports.jsx(U,{icon:"expand_more",style:{rotate:i?"180deg":"0",...T},"aria-label":"Expand options",..._})}),l&&d&&c&&s.jsxRuntimeExports.jsx(o.Icon,{icon:"close",style:{marginLeft:"auto",marginRight:4,...A},"aria-label":"Deselect item",className:t("close",D),...G})]})},Y=(a="")=>a.startsWith("/")||a.startsWith("./")||a.startsWith("../")||a.startsWith("http://")||a.startsWith("https://"),Z=a=>a.includes("avatar");exports.EnumCellValue=X;
 //# sourceMappingURL=EnumCellValue.cjs.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/EnumCellValue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumCellValue.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import { AttributeEnumItem } from '@shared/api'\nimport { Icon, IconProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\n// Inline the edit trigger class to avoid runtime import and circular dependency with CellWidget\nconst EDIT_TRIGGER_CLASS = 'edit-trigger'\n\nconst StyledWidget = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  border-radius: var(--border-radius-m);\n  padding: 0 1px;\n\n  &.item {\n    padding: 4px 2px;\n    border-radius: 0;\n    overflow: hidden;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-hover);\n    }\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n`\n\nconst StyledValuesContainer = styled.div`\n  flex: 1;\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  overflow: hidden;\n  border-radius: var(--border-radius-m);\n  padding: 0px 2px;\n  flex-wrap: nowrap;\n\n  &.wrap {\n    flex-wrap: wrap;\n  }\n`\n\nconst StyledValueWrapper = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n\n  max-width: 100%;\n  min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n  text-align: left;\n  border-radius: var(--border-radius-m);\n  padding: 0px 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n\n  &.placeholder {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst StyledImg = styled.img`\n  width: 20px;\n  height: 20px;\n  object-fit: cover;\n\n  &.avatar {\n    border-radius: 50%;\n  }\n`\n\nconst StyledExpandButton = styled.div`\n  width: 32px;\n  height: fit-content;\n  min-height: 32px;\n  aspect-ratio: 1;\n  border-radius: var(--border-radius-m);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest-hover);\n  }\n\n  &.open {\n    background-color: transparent;\n  }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n  transition: rotate 0.2s;\n`\n\nexport interface EnumTemplateProps extends React.HTMLAttributes<HTMLSpanElement> {\n  selectedOptions: AttributeEnumItem[]\n  placeholder?: string\n  hasMultipleValues?: boolean\n  isMultiSelect?: boolean\n  isOpen?: boolean\n  isItem?: boolean\n  isSelected?: boolean\n  isReadOnly?: boolean\n  rowHeight?: number\n  pt?: {\n    icon?: Partial<IconProps>\n    img?: Partial<React.ImgHTMLAttributes<HTMLImageElement>>\n    value?: Partial<React.ImgHTMLAttributes<HTMLSpanElement>>\n    expand?: Partial<IconProps>\n    close?: Partial<IconProps>\n  }\n}\n\nexport const EnumCellValue = ({\n  selectedOptions,\n  placeholder,\n  hasMultipleValues,\n  isMultiSelect,\n  isOpen,\n  isItem,\n  isSelected,\n  isReadOnly,\n  rowHeight,\n  className,\n  pt,\n  ...props\n}: EnumTemplateProps) => {\n  // Destructure pt subprops and their relevant props at the top\n  const {\n    icon: ptIcon = {},\n    img: ptImg = {},\n    value: ptValue = {},\n    expand: ptExpand = {},\n    close: ptClose = {},\n  } = pt || {}\n\n  const { style: iconStyle, className: iconClassName, ...iconRest } = ptIcon\n  const { style: imgStyle, className: imgClassName, ...imgRest } = ptImg\n  const { style: valueStyle, className: valueClassName, ...valueRest } = ptValue\n  const { style: expandStyle, className: expandClassName, ...expandRest } = ptExpand\n  const { style: closeStyle, className: closeClassName, ...closeRest } = ptClose\n\n  // Check if all options have icons\n  const allOptionsHaveIcon = selectedOptions.every((option) => option.icon)\n\n  // Determine if we should show labels based on the requirements\n  const showLabels = !hasMultipleValues || !allOptionsHaveIcon\n  // Show the colors be backgrounds instead of the text\n  const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem\n\n  const isPlaceholder = !selectedOptions.length && placeholder\n  if (isPlaceholder) {\n    selectedOptions = [\n      {\n        label: placeholder,\n        value: '',\n      },\n    ]\n  }\n\n  // Allow wrapping when row height is above 100px\n  const allowWrap = rowHeight !== undefined && rowHeight > 100\n\n  return (\n    <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n      <StyledValuesContainer className={clsx({ wrap: allowWrap })}>\n        {selectedOptions.map((option, i) => (\n          <StyledValueWrapper key={option.value.toString() + i}>\n            {option.icon && checkForImgSrc(option.icon) ? (\n              <StyledImg\n                src={option.icon}\n                className={clsx({ avatar: checkAvatarImg(option.icon) }, imgClassName)}\n                style={imgStyle}\n                data-tooltip={option.label}\n                {...imgRest}\n              />\n            ) : option.icon ? (\n              <Icon\n                icon={option.icon}\n                style={{ color: option.color, ...iconStyle }}\n                className={iconClassName}\n                {...iconRest}\n              />\n            ) : null}\n\n            {(showLabels || !option.icon) && (\n              <StyledValue\n                style={{\n                  color: backgroundColor ? 'inherit' : option.color,\n                  backgroundColor: backgroundColor\n                    ? option.color || 'var(--md-sys-color-surface-container)'\n                    : 'transparent',\n                  ...valueStyle,\n                }}\n                className={clsx({ placeholder: isPlaceholder }, valueClassName)}\n                aria-label={option.label}\n                {...valueRest}\n              >\n                {option.label}\n              </StyledValue>\n            )}\n          </StyledValueWrapper>\n        ))}\n      </StyledValuesContainer>\n      {!isItem && !isReadOnly && (\n        <StyledExpandButton\n          className={clsx('expand', EDIT_TRIGGER_CLASS, { open: isOpen }, expandClassName)}\n        >\n          <StyledExpandIcon\n            icon=\"expand_more\"\n            style={{ rotate: isOpen ? '180deg' : '0', ...expandStyle }}\n            aria-label=\"Expand options\"\n            {...expandRest}\n          />\n        </StyledExpandButton>\n      )}\n      {isItem && isSelected && isMultiSelect && (\n        <Icon\n          icon=\"close\"\n          style={{ marginLeft: 'auto', marginRight: 4, ...closeStyle }}\n          aria-label=\"Deselect item\"\n          className={clsx('close', closeClassName)}\n          {...closeRest}\n        />\n      )}\n    </StyledWidget>\n  )\n}\n\n// Helper functions to check if the icon is a valid image source\nconst checkForImgSrc = (icon: string | undefined = ''): boolean => {\n  return (\n    icon.startsWith('/') ||\n    icon.startsWith('./') ||\n    icon.startsWith('../') ||\n    icon.startsWith('http://') ||\n    icon.startsWith('https://')\n  )\n}\n\nconst checkAvatarImg = (src: string): boolean => src.includes('avatar')\n"],"names":["EDIT_TRIGGER_CLASS","StyledWidget","styled","StyledValuesContainer","StyledValueWrapper","StyledValue","StyledImg","StyledExpandButton","StyledExpandIcon","Icon","EnumCellValue","selectedOptions","placeholder","hasMultipleValues","isMultiSelect","isOpen","isItem","isSelected","isReadOnly","rowHeight","className","pt","props","ptIcon","ptImg","ptValue","ptExpand","ptClose","iconStyle","iconClassName","iconRest","imgStyle","imgClassName","imgRest","valueStyle","valueClassName","valueRest","expandStyle","expandClassName","expandRest","closeStyle","closeClassName","closeRest","allOptionsHaveIcon","option","showLabels","backgroundColor","isPlaceholder","allowWrap","jsxs","clsx","jsx","i","checkForImgSrc","checkAvatarImg","icon","src"],"mappings":"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"}
+{"version":3,"file":"EnumCellValue.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import { AttributeEnumItem } from '@shared/api'\nimport { getTextColor, Icon, IconProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\n// Inline the edit trigger class to avoid runtime import and circular dependency with CellWidget\nconst EDIT_TRIGGER_CLASS = 'edit-trigger'\n\nconst StyledWidget = styled.div`\n  display: flex;\n  gap: 1px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  border-radius: var(--border-radius-m);\n  padding: 0 1px;\n\n  &.item {\n    padding: 4px 2px;\n    border-radius: 0;\n    overflow: hidden;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-hover);\n    }\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  /* when value container is higher than 55px, wrap the contents */\n  &:not(.item) {\n    container-type: size;\n\n    @container (min-height: 55px) {\n      .values {\n        flex-wrap: wrap;\n        align-items: flex-start;\n        max-height: 100%;\n      }\n    }\n  }\n`\n\nconst StyledValuesContainer = styled.div`\n  flex: 1;\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  align-content: flex-start;\n  overflow: hidden;\n  border-radius: var(--border-radius-m);\n  padding: 0px 2px;\n  flex-wrap: nowrap;\n`\n\nconst StyledValueWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  align-items: center;\n\n  max-width: 100%;\n  min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n  text-align: left;\n  border-radius: var(--border-radius-m);\n  padding: 0px 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 100%;\n\n  &.placeholder {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst StyledImg = styled.img`\n  width: 20px;\n  height: 20px;\n  object-fit: cover;\n\n  &.avatar {\n    border-radius: 50%;\n  }\n`\n\nconst StyledExpandButton = styled.div`\n  border-radius: var(--border-radius-m);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest-hover);\n  }\n\n  &.open {\n    background-color: transparent;\n  }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n  transition: rotate 0.2s;\n  padding: 2px;\n`\n\nexport interface EnumTemplateProps extends React.HTMLAttributes<HTMLSpanElement> {\n  selectedOptions: AttributeEnumItem[]\n  placeholder?: string\n  hasMultipleValues?: boolean\n  isMultiSelect?: boolean\n  isOpen?: boolean\n  isItem?: boolean\n  isSelected?: boolean\n  isReadOnly?: boolean\n  pt?: {\n    icon?: Partial<IconProps>\n    img?: Partial<React.ImgHTMLAttributes<HTMLImageElement>>\n    value?: Partial<React.ImgHTMLAttributes<HTMLSpanElement>>\n    expand?: Partial<IconProps>\n    close?: Partial<IconProps>\n  }\n}\n\nexport const EnumCellValue = ({\n  selectedOptions,\n  placeholder,\n  hasMultipleValues,\n  isMultiSelect,\n  isOpen,\n  isItem,\n  isSelected,\n  isReadOnly,\n  className,\n  pt,\n  ...props\n}: EnumTemplateProps) => {\n  // Destructure pt subprops and their relevant props at the top\n  const {\n    icon: ptIcon = {},\n    img: ptImg = {},\n    value: ptValue = {},\n    expand: ptExpand = {},\n    close: ptClose = {},\n  } = pt || {}\n\n  const { style: iconStyle, className: iconClassName, ...iconRest } = ptIcon\n  const { style: imgStyle, className: imgClassName, ...imgRest } = ptImg\n  const { style: valueStyle, className: valueClassName, ...valueRest } = ptValue\n  const { style: expandStyle, className: expandClassName, ...expandRest } = ptExpand\n  const { style: closeStyle, className: closeClassName, ...closeRest } = ptClose\n\n  // Check if all options have icons\n  const allOptionsHaveIcon = selectedOptions.every((option) => option.icon)\n\n  // Determine if we should show labels based on the requirements\n  const showLabels = !hasMultipleValues || !allOptionsHaveIcon\n  // Show the colors be backgrounds instead of the text\n  const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem\n\n  const isPlaceholder = !selectedOptions.length && placeholder\n  if (isPlaceholder) {\n    selectedOptions = [\n      {\n        label: placeholder,\n        value: '',\n      },\n    ]\n  }\n\n  return (\n    <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n      <StyledValuesContainer className=\"values\">\n        {selectedOptions.map((option, i) => (\n          <StyledValueWrapper key={option.value.toString() + i}>\n            {option.icon && checkForImgSrc(option.icon) ? (\n              <StyledImg\n                src={option.icon}\n                className={clsx({ avatar: checkAvatarImg(option.icon) }, imgClassName)}\n                style={imgStyle}\n                data-tooltip={option.label}\n                {...imgRest}\n              />\n            ) : option.icon ? (\n              <Icon\n                icon={option.icon}\n                style={{ color: option.color, ...iconStyle }}\n                className={iconClassName}\n                {...iconRest}\n              />\n            ) : null}\n\n            {(showLabels || !option.icon) && (\n              <StyledValue\n                style={{\n                  color:\n                    backgroundColor && option.color ? getTextColor(option.color) : option.color,\n                  backgroundColor: backgroundColor\n                    ? option.color || 'var(--md-sys-color-surface-container)'\n                    : 'transparent',\n                  ...valueStyle,\n                }}\n                className={clsx({ placeholder: isPlaceholder }, valueClassName)}\n                aria-label={option.label}\n                {...valueRest}\n              >\n                {option.label}\n              </StyledValue>\n            )}\n          </StyledValueWrapper>\n        ))}\n      </StyledValuesContainer>\n      {!isItem && !isReadOnly && (\n        <StyledExpandButton\n          className={clsx('expand', EDIT_TRIGGER_CLASS, { open: isOpen }, expandClassName)}\n        >\n          <StyledExpandIcon\n            icon=\"expand_more\"\n            style={{ rotate: isOpen ? '180deg' : '0', ...expandStyle }}\n            aria-label=\"Expand options\"\n            {...expandRest}\n          />\n        </StyledExpandButton>\n      )}\n      {isItem && isSelected && isMultiSelect && (\n        <Icon\n          icon=\"close\"\n          style={{ marginLeft: 'auto', marginRight: 4, ...closeStyle }}\n          aria-label=\"Deselect item\"\n          className={clsx('close', closeClassName)}\n          {...closeRest}\n        />\n      )}\n    </StyledWidget>\n  )\n}\n\n// Helper functions to check if the icon is a valid image source\nconst checkForImgSrc = (icon: string | undefined = ''): boolean => {\n  return (\n    icon.startsWith('/') ||\n    icon.startsWith('./') ||\n    icon.startsWith('../') ||\n    icon.startsWith('http://') ||\n    icon.startsWith('https://')\n  )\n}\n\nconst checkAvatarImg = (src: string): boolean => src.includes('avatar')\n"],"names":["EDIT_TRIGGER_CLASS","StyledWidget","styled","StyledValuesContainer","StyledValueWrapper","StyledValue","StyledImg","StyledExpandButton","StyledExpandIcon","Icon","EnumCellValue","selectedOptions","placeholder","hasMultipleValues","isMultiSelect","isOpen","isItem","isSelected","isReadOnly","className","pt","props","ptIcon","ptImg","ptValue","ptExpand","ptClose","iconStyle","iconClassName","iconRest","imgStyle","imgClassName","imgRest","valueStyle","valueClassName","valueRest","expandStyle","expandClassName","expandRest","closeStyle","closeClassName","closeRest","allOptionsHaveIcon","option","showLabels","backgroundColor","isPlaceholder","jsxs","clsx","jsx","i","checkForImgSrc","checkAvatarImg","getTextColor","icon","src"],"mappings":"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"}