npm - @ynput/ayon-frontend-shared - Versions diffs - 0.4.2 → 0.4.3 - Mend

@ynput/ayon-frontend-shared 0.4.2 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

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

@@ -1,4 +1,4 @@
-"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=require("../../../components/EntityIcon/EntityIcon.cjs.js"),C=t(o.Button)`
+"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"),E=require("../utils/restrictedEntity.cjs.js"),l=require("../types/columnConfig.cjs.js"),R=require("../../../components/EntityIcon/EntityIcon.cjs.js"),k=require("../constants.cjs.js"),N=t(i.Button)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -8,7 +8,7 @@
     }
   }
   cursor: pointer;
-`,S=t.div`
+`,C=t.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -16,15 +16,21 @@
   height: 100%;
   width: 100%;
   padding-right: 8px;
-`,q=t.div`
+`,S=t.div`
   width: 100%;
   height: 32px;
   overflow: hidden;
   position: relative;
-`,N=t.div`
+  &.stacked {
+    height: 100%;
+  }
+`,q=t.div`
   position: absolute;
   inset: 0;
-`,k=t.div`
+  display: flex;
+  align-items: center;
+`,W=t.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -36,6 +42,11 @@
   max-width: 100%;
   height: 100%;
+  &.stacked {
+    height: auto;
+    max-height: 100%;
+  }
   /* &:hover {
     &,
     .icon,
@@ -57,7 +68,7 @@
   }
   .path {
-    ${o.theme.bodyMedium}
+    ${i.theme.bodyMedium}
     font-size: 14px;
     margin-bottom: -4px;
     color: var(--md-sys-color-outline);
@@ -73,7 +84,7 @@
   }
   .label {
-    ${o.theme.bodyMedium}
+    ${i.theme.bodyMedium}
     font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
@@ -82,11 +93,19 @@
     min-width: 0;
   }
+  &.stacked .label {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+    word-break: break-word;
+  }
   .divider {
-    ${o.theme.bodyMedium}
+    ${i.theme.bodyMedium}
     font-size: 14px;
     color: var(--md-sys-color-outline);
     flex-shrink: 0;
   }
-`,P=({id:l,label:c,name:d,path:s,isExpandable:p,entityType:n,subType:x,isExpanded:h,toggleExpandAll:m,toggleExpanded:u,rowHeight:g=40,columnDisplayConfig:r})=>{const v=E.isEntityRestricted(n),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(S,{children:[p?e.jsxRuntimeExports.jsx(C,{onClick:j=>{j.altKey?m(l):u()},className:"expander",icon:h?"expand_more":"chevron_right"}):null,e.jsxRuntimeExports.jsx(q,{children:e.jsxRuntimeExports.jsx(N,{children:e.jsxRuntimeExports.jsxs(k,{children:[e.jsxRuntimeExports.jsx(R.EntityIcon,{entity:{entityType:n,subType:x||void 0}}),e.jsxRuntimeExports.jsxs(M,{className:b({compact:i}),children:[w&&!v&&e.jsxRuntimeExports.jsxs("span",{className:"path",children:[s,i&&s?"/":""]}),e.jsxRuntimeExports.jsx("span",{className:"label",children:c||d})]})]})})})]})};exports.EntityNameWidget=P;
+`,P=({id:c,label:d,name:p,path:n,isExpandable:x,entityType:r,subType:h,isExpanded:m,toggleExpandAll:u,toggleExpanded:g,rowHeight:y=40,columnDisplayConfig:a})=>{const v=E.isEntityRestricted(r),s=y<k.WRAP_MIN_ROW_HEIGHT,o=s?"compact":"stacked",w=l.getDisplayValue(a,"path","compact")??!0,f=l.getDisplayValue(a,"path","full")??!0,b=s?w:f;return e.jsxRuntimeExports.jsxs(C,{className:o,children:[x?e.jsxRuntimeExports.jsx(N,{onClick:j=>{j.altKey?u(c):g()},className:"expander",icon:m?"expand_more":"chevron_right"}):null,e.jsxRuntimeExports.jsx(S,{className:o,children:e.jsxRuntimeExports.jsx(q,{children:e.jsxRuntimeExports.jsxs(W,{className:o,children:[e.jsxRuntimeExports.jsx(R.EntityIcon,{entity:{entityType:r,subType:h||void 0}}),e.jsxRuntimeExports.jsxs(M,{className:o,children:[b&&!v&&e.jsxRuntimeExports.jsxs("span",{className:"path",children:[n,s&&n?"/":""]}),e.jsxRuntimeExports.jsx("span",{className:"label",children:d||p})]})]})})})]})};exports.EntityNameWidget=P;
 //# sourceMappingURL=EntityNameWidget.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, 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'\nimport { EntityIcon } from '@shared/components/EntityIcon/EntityIcon'\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 entityType: string\n subType?: string \| null\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 entityType,\n subType,\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(entityType)\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 <EntityIcon entity={{ entityType, subType: subType \|\| undefined }} />\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","entityType","subType","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","columnDisplayConfig","isRestricted","isEntityRestricted","isCompact","showPathCompact","getDisplayValue","showPathFull","shouldShowPath","jsx","e","EntityIcon"~~,"jsxs","clsx"~~],"mappings":"~~+XAOMA~~,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,EAAAA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,EAAAA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~MAUhBA~~,EAAAA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBTC,EAAmB,CAAC,CAC/B,GAAAC,EACA,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,aAAAC,EACA,WAAAC,EACA,QAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EAAY,GACZ,oBAAAC,CACF,IAA6B,CAE3B,MAAMC,EAAeC,EAAAA,mBAAmBR,CAAU,EAI5CS,EAAYJ,EAAY,~~GAIxBK~~,EAAkBC,EAAAA,~~gBAAgBL~~,EAAqB,OAAQ,SAAS,GAAK,~~GAC7EM~~,EAAeD,EAAAA,~~gBAAgBL~~,EAAqB,OAAQ,MAAM,GAAK,~~GACvEO~~,~~EAAiBJ~~,~~EAAYC~~,EAAkBE,EAErD,~~gCACGxB~~,EAAA,~~CACE~~,SAAA,~~CAAAW~~,~~EACCe~~,EAAAA,kBAAAA,~~IAAC7B~~,EAAA,CACC,~~QAAU8B~~,GAAM,CACVA,EAAE,~~OAEJZ~~,EAAgBR,CAAE,EAGlBS,EAAA,CAEJ,EACA,UAAU,WACV,KAAMF,EAAa,cAAgB,eAAA,CAAA,EAEnC,~~KACJY~~,EAAAA,kBAAAA,~~IAACzB~~,~~EAAA~~,~~CACC~~,~~SAAAyB~~,~~wBAACxB~~,EAAA,CACC,~~kCAACC~~,EAAA,~~CACC~~,SAAA,~~CAAAuB~~,wBAACE,EAAAA,YAAW,OAAQ,CAAE,~~WAAAhB~~,EAAY,QAASC,GAAW,QAAa,~~EACnEgB~~,~~yBAACzB~~,~~GAAkB~~,~~UAAW0B~~,~~EAAK~~,~~CAAE~~,~~QAAST~~,~~EAAW~~,~~EACtD,~~SAAA,CAAAI,GAAkB,~~CAACN~~,~~GAClBU~~,EAAAA,kBAAAA,KAAC,OAAA,CAAK,UAAU,OACb,SAAA,~~CAAAnB~~,EACAW,GAAaX,EAAO,IAAM,EAAA,EAC7B,~~EAEFgB~~,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,QAAS,~~YAASjB~~,CAAA,CAAK,CAAA,CAAA,CACzC,CAAA,CAAA,CACF,EACF,CAAA,CACF,CAAA,EACF,CAEJ"}
1	+ {"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport { isEntityRestricted } from '../utils/restrictedEntity'\nimport { getDisplayValue, type DisplayConfig, getColumnDisplayConfig } from '../types/columnConfig'\nimport { EntityIcon } from '@shared/components/EntityIcon/EntityIcon'\nimport { WRAP_MIN_ROW_HEIGHT } from '../constants'\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 &.stacked {\n height: 100%;\n }\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\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 &.stacked {\n height: auto;\n max-height: 100%;\n }\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 &.stacked .label {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: normal;\n word-break: break-word;\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 entityType: string\n subType?: string \| null\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 entityType,\n subType,\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(entityType)\n\n // Determine layout based on row height\n // below the wrap threshold = single line (compact), above = stacked\n const isCompact = rowHeight < WRAP_MIN_ROW_HEIGHT\n const layout = isCompact ? 'compact' : 'stacked'\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 className={layout}>\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 className={layout}>\n <StyledContentAbsolute>\n <StyledContent className={layout}>\n <EntityIcon entity={{ entityType, subType: subType \|\| undefined }} />\n <StyledTextContent className={layout}>\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","entityType","subType","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","columnDisplayConfig","isRestricted","isEntityRestricted","isCompact","WRAP_MIN_ROW_HEIGHT","layout","showPathCompact","getDisplayValue","showPathFull","shouldShowPath","jsxs","jsx","e","EntityIcon"],"mappings":"8YAOMA,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;AAAA;AAAA;AAAA;AAAA,EAW9BI,EAAwBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/BK,EAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BvBM,EAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3BO,EAAAA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,EAAAA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkBhBA,EAAAA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBTC,EAAmB,CAAC,CAC/B,GAAAC,EACA,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,aAAAC,EACA,WAAAC,EACA,QAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EAAY,GACZ,oBAAAC,CACF,IAA6B,CAE3B,MAAMC,EAAeC,EAAAA,mBAAmBR,CAAU,EAI5CS,EAAYJ,EAAYK,EAAAA,oBACxBC,EAASF,EAAY,UAAY,UAIjCG,EAAkBC,EAAAA,gBAAgBP,EAAqB,OAAQ,SAAS,GAAK,GAC7EQ,EAAeD,EAAAA,gBAAgBP,EAAqB,OAAQ,MAAM,GAAK,GACvES,EAAiBN,EAAYG,EAAkBE,EAErD,OACEE,EAAAA,kBAAAA,KAAC5B,EAAA,CAAuB,UAAWuB,EAChC,SAAA,CAAAZ,EACCkB,EAAAA,kBAAAA,IAAChC,EAAA,CACC,QAAUiC,GAAM,CACVA,EAAE,OAEJf,EAAgBR,CAAE,EAGlBS,EAAA,CAEJ,EACA,UAAU,WACV,KAAMF,EAAa,cAAgB,eAAA,CAAA,EAEnC,KACJe,EAAAA,kBAAAA,IAAC5B,GAAqB,UAAWsB,EAC/B,iCAACrB,EAAA,CACC,SAAA0B,EAAAA,kBAAAA,KAACzB,EAAA,CAAc,UAAWoB,EACxB,SAAA,CAAAM,wBAACE,EAAAA,YAAW,OAAQ,CAAE,WAAAnB,EAAY,QAASC,GAAW,QAAa,EACnEe,EAAAA,kBAAAA,KAACxB,EAAA,CAAkB,UAAWmB,EAC3B,SAAA,CAAAI,GAAkB,CAACR,GAClBS,EAAAA,kBAAAA,KAAC,OAAA,CAAK,UAAU,OACb,SAAA,CAAAlB,EACAW,GAAaX,EAAO,IAAM,EAAA,EAC7B,EAEFmB,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,QAAS,YAASpB,CAAA,CAAK,CAAA,CAAA,CACzC,CAAA,CAAA,CACF,EACF,CAAA,CACF,CAAA,EACF,CAEJ"}

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

@@ -1,10 +1,10 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.es.js";
-import { Button as j, theme as i } from "@ynput/ayon-react-components";
+import { Button as j, theme as r } from "@ynput/ayon-react-components";
 import t from "styled-components";
-import C from "clsx";
-import { isEntityRestricted as E } from "../utils/restrictedEntity.es.js";
-import { getDisplayValue as a } from "../types/columnConfig.es.js";
-import { EntityIcon as N } from "../../../components/EntityIcon/EntityIcon.es.js";
+import { isEntityRestricted as N } from "../utils/restrictedEntity.es.js";
+import { getDisplayValue as l } from "../types/columnConfig.es.js";
+import { EntityIcon as E } from "../../../components/EntityIcon/EntityIcon.es.js";
+import { WRAP_MIN_ROW_HEIGHT as C } from "../constants.es.js";
 const S = t(j)`
   &.expander {
     background-color: unset;
@@ -15,7 +15,7 @@ const S = t(j)`
     }
   }
   cursor: pointer;
-`, k = t.div`
+`, R = t.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -23,15 +23,21 @@ const S = t(j)`
   height: 100%;
   width: 100%;
   padding-right: 8px;
-`, z = t.div`
+`, W = t.div`
   width: 100%;
   height: 32px;
   overflow: hidden;
   position: relative;
-`, M = t.div`
+  &.stacked {
+    height: 100%;
+  }
+`, _ = t.div`
   position: absolute;
   inset: 0;
-`, P = t.div`
+  display: flex;
+  align-items: center;
+`, M = t.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -43,6 +49,11 @@ const S = t(j)`
   max-width: 100%;
   height: 100%;
+  &.stacked {
+    height: auto;
+    max-height: 100%;
+  }
   /* &:hover {
     &,
     .icon,
@@ -50,7 +61,7 @@ const S = t(j)`
       color: var(--md-sys-color-primary);
     }
   } */
-`, R = t.div`
+`, P = t.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -64,7 +75,7 @@ const S = t(j)`
   }
   .path {
-    ${i.bodyMedium}
+    ${r.bodyMedium}
     font-size: 14px;
     margin-bottom: -4px;
     color: var(--md-sys-color-outline);
@@ -80,7 +91,7 @@ const S = t(j)`
   }
   .label {
-    ${i.bodyMedium}
+    ${r.bodyMedium}
     font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
@@ -89,51 +100,59 @@ const S = t(j)`
     min-width: 0;
   }
+  &.stacked .label {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+    word-break: break-word;
+  }
   .divider {
-    ${i.bodyMedium}
+    ${r.bodyMedium}
     font-size: 14px;
     color: var(--md-sys-color-outline);
     flex-shrink: 0;
   }
-`, K = ({
-  id: l,
-  label: d,
-  name: c,
-  path: r,
-  isExpandable: p,
-  entityType: s,
-  subType: m,
-  isExpanded: h,
-  toggleExpandAll: x,
-  toggleExpanded: f,
-  rowHeight: u = 40,
+`, F = ({
+  id: d,
+  label: c,
+  name: p,
+  path: s,
+  isExpandable: m,
+  entityType: a,
+  subType: h,
+  isExpanded: x,
+  toggleExpandAll: f,
+  toggleExpanded: u,
+  rowHeight: v = 40,
   columnDisplayConfig: n
 }) => {
-  const v = E(s), o = u < 50, g = a(n, "path", "compact") ?? !0, w = a(n, "path", "full") ?? !0, y = o ? g : w;
-  return /* @__PURE__ */ e.jsxs(k, { children: [
-    p ? /* @__PURE__ */ e.jsx(
+  const g = N(a), i = v < C, o = i ? "compact" : "stacked", w = l(n, "path", "compact") ?? !0, y = l(n, "path", "full") ?? !0, b = i ? w : y;
+  return /* @__PURE__ */ e.jsxs(R, { className: o, children: [
+    m ? /* @__PURE__ */ e.jsx(
       S,
       {
-        onClick: (b) => {
-          b.altKey ? x(l) : f();
+        onClick: (k) => {
+          k.altKey ? f(d) : u();
         },
         className: "expander",
-        icon: h ? "expand_more" : "chevron_right"
+        icon: x ? "expand_more" : "chevron_right"
       }
     ) : null,
-    /* @__PURE__ */ e.jsx(z, { children: /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsxs(P, { children: [
-      /* @__PURE__ */ e.jsx(N, { entity: { entityType: s, subType: m || void 0 } }),
-      /* @__PURE__ */ e.jsxs(R, { className: C({ compact: o }), children: [
-        y && !v && /* @__PURE__ */ e.jsxs("span", { className: "path", children: [
-          r,
-          o && r ? "/" : ""
+    /* @__PURE__ */ e.jsx(W, { className: o, children: /* @__PURE__ */ e.jsx(_, { children: /* @__PURE__ */ e.jsxs(M, { className: o, children: [
+      /* @__PURE__ */ e.jsx(E, { entity: { entityType: a, subType: h || void 0 } }),
+      /* @__PURE__ */ e.jsxs(P, { className: o, children: [
+        b && !g && /* @__PURE__ */ e.jsxs("span", { className: "path", children: [
+          s,
+          i && s ? "/" : ""
         ] }),
-        /* @__PURE__ */ e.jsx("span", { className: "label", children: d || c })
+        /* @__PURE__ */ e.jsx("span", { className: "label", children: c || p })
       ] })
     ] }) }) })
   ] });
 };
 export {
-  K as EntityNameWidget
+  F as EntityNameWidget
 };
 //# sourceMappingURL=EntityNameWidget.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, 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'\nimport { EntityIcon } from '@shared/components/EntityIcon/EntityIcon'\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 entityType: string\n subType?: string \| null\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 entityType,\n subType,\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(entityType)\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 <EntityIcon entity={{ entityType, subType: subType \|\| undefined }} />\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","entityType","subType","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","columnDisplayConfig","isRestricted","isEntityRestricted","isCompact","showPathCompact","getDisplayValue","showPathFull","shouldShowPath","jsx","e","EntityIcon"~~,"jsxs","clsx"~~],"mappings":";;;;;;;AAOA,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,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,qBAAAC;AACF,MAA6B;AAE3B,QAAMC,IAAeC,EAAmBR,CAAU,GAI5CS,IAAYJ,IAAY,~~IAIxBK~~,IAAkBC,~~EAAgBL~~,GAAqB,QAAQ,SAAS,KAAK,~~IAC7EM~~,IAAeD,~~EAAgBL~~,GAAqB,QAAQ,MAAM,KAAK,~~IACvEO~~,~~IAAiBJ~~,~~IAAYC~~,IAAkBE;AAErD,~~gCACGxB~~,GAAA,~~EACE~~,UAAA;AAAA,~~IAAAW~~,~~IACCe~~,gBAAAA,EAAAA;AAAAA,~~MAAC7B~~;AAAA,MAAA;AAAA,QACC,SAAS,~~CAAC8B~~,MAAM;AACd,UAAIA,EAAE,~~SAEJZ~~,EAAgBR,CAAE,IAGlBS,EAAA;AAAA,QAEJ;AAAA,QACA,WAAU;AAAA,QACV,MAAMF,IAAa,gBAAgB;AAAA,MAAA;AAAA,IAAA,IAEnC;AAAA,~~IACJY~~,gBAAAA,EAAAA,~~IAACzB~~,GAAA,EACC,~~UAAAyB~~,gBAAAA,~~MAACxB~~,GAAA,~~EACC~~,~~iCAACC~~,~~GAAA~~,~~EACC,~~UAAA;AAAA,~~MAAAuB~~,gBAAAA,MAACE,KAAW,QAAQ,EAAE,~~YAAAhB~~,GAAY,SAASC,KAAW,UAAa;AAAA,~~MACnEgB~~,gBAAAA,~~OAACzB~~,~~KAAkB~~,~~WAAW0B~~,~~EAAK~~,~~EAAE~~,~~SAAST~~,~~GAAW,GACtD,~~UAAA;AAAA,QAAAI,KAAkB,~~CAACN~~,~~KAClBU~~,gBAAAA,EAAAA,KAAC,QAAA,EAAK,WAAU,QACb,UAAA;AAAA,~~UAAAnB~~;AAAA,UACAW,KAAaX,IAAO,MAAM;AAAA,QAAA,GAC7B;AAAA,~~QAEFgB~~,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,SAAS,~~eAASjB~~,EAAA,CAAK;AAAA,MAAA,EAAA,CACzC;AAAA,IAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport { isEntityRestricted } from '../utils/restrictedEntity'\nimport { getDisplayValue, type DisplayConfig, getColumnDisplayConfig } from '../types/columnConfig'\nimport { EntityIcon } from '@shared/components/EntityIcon/EntityIcon'\nimport { WRAP_MIN_ROW_HEIGHT } from '../constants'\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 &.stacked {\n height: 100%;\n }\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\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 &.stacked {\n height: auto;\n max-height: 100%;\n }\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 &.stacked .label {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: normal;\n word-break: break-word;\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 entityType: string\n subType?: string \| null\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 entityType,\n subType,\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(entityType)\n\n // Determine layout based on row height\n // below the wrap threshold = single line (compact), above = stacked\n const isCompact = rowHeight < WRAP_MIN_ROW_HEIGHT\n const layout = isCompact ? 'compact' : 'stacked'\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 className={layout}>\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 className={layout}>\n <StyledContentAbsolute>\n <StyledContent className={layout}>\n <EntityIcon entity={{ entityType, subType: subType \|\| undefined }} />\n <StyledTextContent className={layout}>\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","entityType","subType","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","columnDisplayConfig","isRestricted","isEntityRestricted","isCompact","WRAP_MIN_ROW_HEIGHT","layout","showPathCompact","getDisplayValue","showPathFull","shouldShowPath","jsxs","jsx","e","EntityIcon"],"mappings":";;;;;;;AAOA,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;AAAA;AAAA;AAAA;AAAA,GAW9BI,IAAwBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO/BK,IAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0BvBM,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkBhBA,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,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,qBAAAC;AACF,MAA6B;AAE3B,QAAMC,IAAeC,EAAmBR,CAAU,GAI5CS,IAAYJ,IAAYK,GACxBC,IAASF,IAAY,YAAY,WAIjCG,IAAkBC,EAAgBP,GAAqB,QAAQ,SAAS,KAAK,IAC7EQ,IAAeD,EAAgBP,GAAqB,QAAQ,MAAM,KAAK,IACvES,IAAiBN,IAAYG,IAAkBE;AAErD,SACEE,gBAAAA,EAAAA,KAAC5B,GAAA,EAAuB,WAAWuB,GAChC,UAAA;AAAA,IAAAZ,IACCkB,gBAAAA,EAAAA;AAAAA,MAAChC;AAAA,MAAA;AAAA,QACC,SAAS,CAACiC,MAAM;AACd,UAAIA,EAAE,SAEJf,EAAgBR,CAAE,IAGlBS,EAAA;AAAA,QAEJ;AAAA,QACA,WAAU;AAAA,QACV,MAAMF,IAAa,gBAAgB;AAAA,MAAA;AAAA,IAAA,IAEnC;AAAA,IACJe,gBAAAA,EAAAA,IAAC5B,KAAqB,WAAWsB,GAC/B,gCAACrB,GAAA,EACC,UAAA0B,gBAAAA,EAAAA,KAACzB,GAAA,EAAc,WAAWoB,GACxB,UAAA;AAAA,MAAAM,gBAAAA,MAACE,KAAW,QAAQ,EAAE,YAAAnB,GAAY,SAASC,KAAW,UAAa;AAAA,MACnEe,gBAAAA,EAAAA,KAACxB,GAAA,EAAkB,WAAWmB,GAC3B,UAAA;AAAA,QAAAI,KAAkB,CAACR,KAClBS,gBAAAA,EAAAA,KAAC,QAAA,EAAK,WAAU,QACb,UAAA;AAAA,UAAAlB;AAAA,UACAW,KAAaX,IAAO,MAAM;AAAA,QAAA,GAC7B;AAAA,QAEFmB,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,SAAS,eAASpB,EAAA,CAAK;AAAA,MAAA,EAAA,CACzC;AAAA,IAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,4 +1,16 @@
-"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"),F="edit-trigger",H=r.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../../../_virtual/jsx-runtime.cjs.js"),l=require("@ynput/ayon-react-components"),t=require("clsx"),s=require("styled-components"),M=require("./wrapMode.cjs.js"),z="edit-trigger",c=s.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);
+  }
+`,J=s.div`
   display: flex;
   gap: 1px;
   align-items: center;
@@ -26,19 +38,46 @@
     }
   }
-  /* when value container is higher than 55px, wrap the contents */
-  &:not(.item) {
-    container-type: size;
-    @container (min-height: 55px) {
+  /* wrapped rows sit on a fixed row lattice, so the height clip can only land between rows */
+  ${M.wrapMode`
+    &.multi-select:not(.item) {
       .values {
+        --wrap-row-height: 24px;
+        --wrap-row-gap: var(--base-gap-small);
         flex-wrap: wrap;
         align-items: flex-start;
+        align-content: flex-start;
+        row-gap: var(--wrap-row-gap);
         max-height: 100%;
+        /* var() inside an unsupported round() computes to none, not to the fallback — gate it */
+        @supports (max-height: round(down, 100px, 24px)) {
+          max-height: calc(
+            round(
+                down,
+                100cqh + var(--wrap-row-gap),
+                calc(var(--wrap-row-height) + var(--wrap-row-gap))
+              ) - var(--wrap-row-gap)
+          );
+        }
+      }
+      .values > * {
+        min-height: var(--wrap-row-height);
+      }
+      ${c} {
+        white-space: normal;
+        word-break: break-word;
+        line-height: var(--wrap-row-height);
+      }
+      .has-img ${c} {
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
     }
-  }
-`,J=r.div`
+  `}
+`,K=s.div`
   flex: 1;
   display: flex;
   gap: var(--base-gap-small);
@@ -48,34 +87,23 @@
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
   flex-wrap: nowrap;
-`,K=r.div`
+`,Q=s.div`
   display: flex;
   gap: 2px;
   align-items: center;
   max-width: 100%;
   min-width: 20px;
-`,M=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);
-  }
-`,Q=r.img`
+`,U=s.img`
   width: 20px;
   height: 20px;
   object-fit: cover;
+  flex-shrink: 0;
   &.avatar {
     border-radius: 50%;
   }
-`,U=r.div`
+`,X=s.div`
   border-radius: var(--border-radius-m);
   display: flex;
   justify-content: center;
@@ -90,8 +118,8 @@
   &.open {
     background-color: transparent;
   }
-`,X=r(o.Icon)`
+`,Y=s(l.Icon)`
   transition: rotate 0.2s;
   padding: 2px;
-`,Y=({selectedOptions:a,placeholder:n,hasMultipleValues:p,isMultiSelect:c,isOpen:i,isItem:l,isSelected:d,isReadOnly:g,iconOnlyColor:h=!1,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,...T}=w,{style:L,className:_,...A}=R,{style:D,className:G,...P}=E,x=a.every(e=>e.icon),z=!p||!x,m=!x&&c&&!l,u=!a.length&&n;return u&&(a=[{label:n,value:""}]),s.jsxRuntimeExports.jsxs(H,{className:t(v,{selected:d,item:l}),...b,children:[s.jsxRuntimeExports.jsx(J,{className:"values",children:a.map((e,B)=>s.jsxRuntimeExports.jsxs(K,{children:[e.icon&&Z(e.icon)?s.jsxRuntimeExports.jsx(Q,{src:e.icon,className:t({avatar:$(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,(z||!e.icon)&&s.jsxRuntimeExports.jsx(M,{style:{color:m&&e.color?o.getTextColor(e.color):h&&e.icon?void 0:e.color,backgroundColor:m?e.color||"var(--md-sys-color-surface-container)":"transparent",...V},className:t({placeholder:u},q),"aria-label":e.label,...T,children:e.label})]},e.value.toString()+B))}),!l&&!g&&s.jsxRuntimeExports.jsx(U,{className:t("expand",F,{open:i},_),children:s.jsxRuntimeExports.jsx(X,{icon:"expand_more",style:{rotate:i?"180deg":"0",...L},"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})]})},Z=(a="")=>a.startsWith("/")||a.startsWith("./")||a.startsWith("../")||a.startsWith("http://")||a.startsWith("https://"),$=a=>a.includes("avatar");exports.EnumCellValue=Y;
+`,Z=({selectedOptions:a,placeholder:i,hasMultipleValues:g,isMultiSelect:n,isOpen:d,isItem:o,isSelected:p,isReadOnly:v,iconOnlyColor:w=!1,className:y,pt:b,...f})=>{const{icon:j={},img:R={},value:N={},expand:E={},close:S={}}=b||{},{style:k,className:C,...I}=j,{style:W,className:q,...V}=R,{style:T,className:L,..._}=N,{style:$,className:A,...D}=E,{style:G,className:P,...B}=S,m=a.every(e=>e.icon),F=!g||!m,x=!m&&n&&!o,u=!a.length&&i;return u&&(a=[{label:i,value:""}]),r.jsxRuntimeExports.jsxs(J,{className:t(y,{selected:p,item:o,"multi-select":n}),...f,children:[r.jsxRuntimeExports.jsx(K,{className:"values",children:a.map((e,H)=>r.jsxRuntimeExports.jsxs(Q,{className:t({"has-img":h(e.icon)}),children:[e.icon&&h(e.icon)?r.jsxRuntimeExports.jsx(U,{src:e.icon,className:t({avatar:O(e.icon)},q),style:W,"data-tooltip":e.label,...V}):e.icon?r.jsxRuntimeExports.jsx(l.Icon,{icon:e.icon,style:{color:e.color,...k},className:C,...I}):null,(F||!e.icon)&&r.jsxRuntimeExports.jsx(c,{style:{color:x&&e.color?l.getTextColor(e.color):w&&e.icon?void 0:e.color,backgroundColor:x?e.color||"var(--md-sys-color-surface-container)":"transparent",...T},className:t({placeholder:u},L),"aria-label":e.label,..._,children:e.label})]},e.value.toString()+H))}),!o&&!v&&r.jsxRuntimeExports.jsx(X,{className:t("expand",z,{open:d},A),children:r.jsxRuntimeExports.jsx(Y,{icon:"expand_more",style:{rotate:d?"180deg":"0",...$},"aria-label":"Expand options",...D})}),o&&p&&n&&r.jsxRuntimeExports.jsx(l.Icon,{icon:"close",style:{marginLeft:"auto",marginRight:4,...G},"aria-label":"Deselect item",className:t("close",P),...B})]})},h=(a="")=>a.startsWith("/")||a.startsWith("./")||a.startsWith("../")||a.startsWith("http://")||a.startsWith("https://"),O=a=>a.includes("avatar");exports.EnumCellValue=Z;
 //# sourceMappingURL=EnumCellValue.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EnumCellValue.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import type { EnumItem } 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 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 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: EnumItem[]\n placeholder?: string\n hasMultipleValues?: boolean\n isMultiSelect?: boolean\n isOpen?: boolean\n isItem?: boolean\n isSelected?: boolean\n isReadOnly?: boolean\n iconOnlyColor?: boolean // When true, only the icon gets colored, not the text label\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 iconOnlyColor = false,\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\n ? getTextColor(option.color)\n : iconOnlyColor && option.icon\n ? undefined\n : 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","iconOnlyColor","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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"}
1	+ {"version":3,"file":"EnumCellValue.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import type { EnumItem } from '@shared/api'\nimport { getTextColor, Icon, IconProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\nimport { wrapMode } from './wrapMode'\n// Inline the edit trigger class to avoid runtime import and circular dependency with CellWidget\nconst EDIT_TRIGGER_CLASS = 'edit-trigger'\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 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 /* wrapped rows sit on a fixed row lattice, so the height clip can only land between rows /\n ${wrapMode`\n &.multi-select:not(.item) {\n .values {\n --wrap-row-height: 24px;\n --wrap-row-gap: var(--base-gap-small);\n flex-wrap: wrap;\n align-items: flex-start;\n align-content: flex-start;\n row-gap: var(--wrap-row-gap);\n max-height: 100%;\n / var() inside an unsupported round() computes to none, not to the fallback — gate it /\n @supports (max-height: round(down, 100px, 24px)) {\n max-height: calc(\n round(\n down,\n 100cqh + var(--wrap-row-gap),\n calc(var(--wrap-row-height) + var(--wrap-row-gap))\n ) - var(--wrap-row-gap)\n );\n }\n }\n\n .values > {\n min-height: var(--wrap-row-height);\n }\n\n ${StyledValue} {\n white-space: normal;\n word-break: break-word;\n line-height: var(--wrap-row-height);\n }\n\n .has-img ${StyledValue} {\n white-space: nowrap;\n text-overflow: ellipsis;\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 StyledImg = styled.img`\n width: 20px;\n height: 20px;\n object-fit: cover;\n flex-shrink: 0;\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: EnumItem[]\n placeholder?: string\n hasMultipleValues?: boolean\n isMultiSelect?: boolean\n isOpen?: boolean\n isItem?: boolean\n isSelected?: boolean\n isReadOnly?: boolean\n iconOnlyColor?: boolean // When true, only the icon gets colored, not the text label\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 iconOnlyColor = false,\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\n className={clsx(className, {\n selected: isSelected,\n item: isItem,\n 'multi-select': isMultiSelect,\n })}\n {...props}\n >\n <StyledValuesContainer className=\"values\">\n {selectedOptions.map((option, i) => (\n <StyledValueWrapper\n key={option.value.toString() + i}\n className={clsx({ 'has-img': checkForImgSrc(option.icon) })}\n >\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\n ? getTextColor(option.color)\n : iconOnlyColor && option.icon\n ? undefined\n : 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","StyledValue","styled","StyledWidget","wrapMode","StyledValuesContainer","StyledValueWrapper","StyledImg","StyledExpandButton","StyledExpandIcon","Icon","EnumCellValue","selectedOptions","placeholder","hasMultipleValues","isMultiSelect","isOpen","isItem","isSelected","isReadOnly","iconOnlyColor","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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"}