@ynput/ayon-frontend-shared 0.4.2 → 0.4.4

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

@@ -9,12 +9,12 @@ import { StyledBaseTextWidget as C } from "./TextWidget.es.js";
 import { Icon as D } from "@ynput/ayon-react-components";
 import "../../../components/SearchFilter/filterDates.es.js";
 import "date-fns";
-import "short-uuid";
+import "uuid";
 import "../utils/columnIds.es.js";
 import "react-toastify";
 import "lodash";
-import "uuid";
 import "../../../api/queries/users/updateUsers.es.js";
+import "../../../util/searchTerms.es.js";
 import "../../../util/pubsub.es.js";
 import "../../Feed/components/ActivityCheckbox/ActivityCheckbox.styled.es.js";
 import "../../../components/DoneCheckbox/DoneCheckbox.es.js";
@@ -42,6 +42,7 @@ import "../../../api/generated/configuration.es.js";
 import "../../../api/generated/dataImport.es.js";
 import "../../../api/generated/desktop.es.js";
 import "../../../api/generated/entityLists.es.js";
+import "../../../api/generated/enums.es.js";
 import "../../../api/generated/events.es.js";
 import "../../../api/generated/files.es.js";
 import "../../../api/generated/folders.es.js";
@@ -67,6 +68,8 @@ import "../../../api/generated/workfiles.es.js";
 import "../../../api/generated/ynputCloud.es.js";
 import "../../../api/generated/grouping.es.js";
 import "../../../api/generated/views.es.js";
+import "../../../api/queries/accessGroups/getAccessGroups.es.js";
+import "../../../api/queries/accessGroups/updateAccessGroups.es.js";
 import "../../../api/queries/actions/getActions.es.js";
 import "../../../api/queries/activities/getActivities.es.js";
 import "../../../api/queries/activities/updateReaction.es.js";
@@ -97,6 +100,7 @@ import "../../../api/queries/entityLists/getListsAttributes.es.js";
 import "../../../api/queries/entityLists/listItemsColumnStats.es.js";
 import "../../../api/queries/entityLists/updateListsAttributes.es.js";
 import "../../../api/queries/entityLists/listFolders.es.js";
+import "../../../api/queries/enums/getEnums.es.js";
 import "../../../api/queries/folders/getFolders.es.js";
 import "../../../api/queries/folders/getFolderDeleteInfo.es.js";
 import "../../../api/queries/grouping/getGrouping.es.js";
@@ -131,6 +135,12 @@ import "../../../context/DeleteEntitiesContext.es.js";
 import "../../../context/GlobalContext.es.js";
 import "../context/ProjectDataContextInstance.es.js";
 import { READ_ONLY as S } from "../utils/restrictedEntity.es.js";
+import "../../Slicer/context/SlicerContextInstance.es.js";
+import "../../../context/RemoteModulesContext.es.js";
+import "../../../../../_virtual/runtime.es.js";
+import "../../../../../_virtual/semver.es.js";
+import "../../../context/PowerpackContextInstance.es.js";
+import "../../Slicer/components/SlicerDropdownFallback.es.js";
 import "../../../context/ProjectFoldersContextInstance.es.js";
 import "../buildTreeTableColumns.es.js";
 const j = i(C)`
@@ -161,7 +171,7 @@ const j = i(C)`
   ${s}:hover & {
     opacity: 1;
   }
-`, v = "entity-widget", oi = ({
+`, v = "entity-widget", li = ({
   rowId: a,
   columnId: c,
   value: l,
@@ -193,6 +203,6 @@ const j = i(C)`
 };
 export {
   v as ENTITY_WIDGET_CLASS,
-  oi as EntityWidget
+  li as EntityWidget
 };
 //# sourceMappingURL=EntityWidget.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EntityWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityWidget.tsx"],"sourcesContent":["import { FC, MouseEventHandler, useContext } from 'react'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\nimport { CellValue } from './CellWidget'\nimport { EntityIcon } from '@shared/components/EntityIcon/EntityIcon'\nimport { DetailsPanelEntityContext } from '../context/DetailsPanelEntityContext'\nimport { useOptionalSelectedRowsContext } from '../context/SelectedRowsContext'\nimport { StyledBaseTextWidget } from './TextWidget'\nimport { READ_ONLY } from '../utils'\nimport { Icon } from '@ynput/ayon-react-components'\n\nconst EntityCell = styled(StyledBaseTextWidget)`\n  position: absolute;\n  inset: 0;\n  padding: 4px 8px;\n  align-items: center;\n\n  &.loading {\n    inset: 4px;\n    border-radius: 4px;\n    opacity: 1;\n  }\n`\n\nconst EntityButton = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 2px 4px;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OpenIcon = styled(Icon)`\n  opacity: 0;\n\n  ${EntityButton}:hover & {\n    opacity: 1;\n  }\n`\n\nexport const ENTITY_WIDGET_CLASS = 'entity-widget'\n\ntype EntityWidgetProps = {\n  rowId: string\n  columnId: string\n  value: CellValue\n  entityId?: string | null\n  entityType: 'folder' | 'task' | 'version'\n  subType?: string | null\n  className?: string\n  isLoading?: boolean\n}\n\nexport const EntityWidget: FC<EntityWidgetProps> = ({\n  rowId,\n  columnId,\n  value,\n  entityId,\n  entityType,\n  subType,\n  className,\n  isLoading,\n}) => {\n  const entityContext = useContext(DetailsPanelEntityContext)\n  const selectedRowsContext = useOptionalSelectedRowsContext()\n\n  const openEntity = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.button !== 0 || !entityId || !entityContext) {\n      return\n    }\n\n    selectedRowsContext?.clearRowsSelection()\n    entityContext.setSelectedEntity({ entityId, entityType })\n    event.preventDefault()\n  }\n\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (event.detail === 2) openEntity(event)\n  }\n\n  return (\n    <EntityCell\n      id={`${rowId}-${columnId}`}\n      className={clsx(ENTITY_WIDGET_CLASS, READ_ONLY, className, { loading: isLoading })}\n      onMouseDown={handleMouseDown}\n      data-tooltip-delay={200}\n    >\n      <EntityButton onMouseDown={openEntity}>\n        {subType && <EntityIcon entity={{ entityType, subType }} />}\n        {String(value ?? '')}\n        <OpenIcon icon=\"dock_to_left\" />\n      </EntityButton>\n    </EntityCell>\n  )\n}\n"],"names":["EntityCell","styled","StyledBaseTextWidget","EntityButton","OpenIcon","Icon","ENTITY_WIDGET_CLASS","EntityWidget","rowId","columnId","value","entityId","entityType","subType","className","isLoading","entityContext","useContext","DetailsPanelEntityContext","selectedRowsContext","useOptionalSelectedRowsContext","openEntity","event","handleMouseDown","jsx","clsx","READ_ONLY","jsxs","EntityIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAaC,EAAOC,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAaxCC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAatBG,IAAWH,EAAOI,CAAI;AAAA;AAAA;AAAA,IAGxBF,CAAY;AAAA;AAAA;AAAA,GAKHG,IAAsB,iBAatBC,KAAsC,CAAC;AAAA,EAClD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAgBC,EAAWC,CAAyB,GACpDC,IAAsBC,EAAA,GAEtBC,IAAa,CAACC,MAA4C;AAC9D,IAAIA,EAAM,WAAW,KAAK,CAACX,KAAY,CAACK,MAIxCG,GAAqB,mBAAA,GACrBH,EAAc,kBAAkB,EAAE,UAAAL,GAAU,YAAAC,EAAA,CAAY,GACxDU,EAAM,eAAA;AAAA,EACR,GAEMC,IAAqD,CAACD,MAAU;AACpE,IAAIA,EAAM,WAAW,KAAGD,EAAWC,CAAK;AAAA,EAC1C;AAEA,SACEE,gBAAAA,EAAAA;AAAAA,IAACxB;AAAA,IAAA;AAAA,MACC,IAAI,GAAGQ,CAAK,IAAIC,CAAQ;AAAA,MACxB,WAAWgB,EAAKnB,GAAqBoB,GAAWZ,GAAW,EAAE,SAASC,GAAW;AAAA,MACjF,aAAaQ;AAAA,MACb,sBAAoB;AAAA,MAEpB,UAAAI,gBAAAA,EAAAA,KAACxB,GAAA,EAAa,aAAakB,GACxB,UAAA;AAAA,QAAAR,2BAAYe,GAAA,EAAW,QAAQ,EAAE,YAAAhB,GAAY,SAAAC,KAAW;AAAA,QACxD,OAAOH,KAAS,EAAE;AAAA,QACnBc,gBAAAA,EAAAA,IAACpB,GAAA,EAAS,MAAK,eAAA,CAAe;AAAA,MAAA,EAAA,CAChC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"EntityWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityWidget.tsx"],"sourcesContent":["import { FC, MouseEventHandler, useContext } from 'react'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\nimport { CellValue } from './CellWidget'\nimport { EntityIcon } from '@shared/components/EntityIcon/EntityIcon'\nimport { DetailsPanelEntityContext } from '../context/DetailsPanelEntityContext'\nimport { useOptionalSelectedRowsContext } from '../context/SelectedRowsContext'\nimport { StyledBaseTextWidget } from './TextWidget'\nimport { READ_ONLY } from '../utils'\nimport { Icon } from '@ynput/ayon-react-components'\n\nconst EntityCell = styled(StyledBaseTextWidget)`\n  position: absolute;\n  inset: 0;\n  padding: 4px 8px;\n  align-items: center;\n\n  &.loading {\n    inset: 4px;\n    border-radius: 4px;\n    opacity: 1;\n  }\n`\n\nconst EntityButton = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 2px 4px;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OpenIcon = styled(Icon)`\n  opacity: 0;\n\n  ${EntityButton}:hover & {\n    opacity: 1;\n  }\n`\n\nexport const ENTITY_WIDGET_CLASS = 'entity-widget'\n\ntype EntityWidgetProps = {\n  rowId: string\n  columnId: string\n  value: CellValue\n  entityId?: string | null\n  entityType: 'folder' | 'task' | 'version'\n  subType?: string | null\n  className?: string\n  isLoading?: boolean\n}\n\nexport const EntityWidget: FC<EntityWidgetProps> = ({\n  rowId,\n  columnId,\n  value,\n  entityId,\n  entityType,\n  subType,\n  className,\n  isLoading,\n}) => {\n  const entityContext = useContext(DetailsPanelEntityContext)\n  const selectedRowsContext = useOptionalSelectedRowsContext()\n\n  const openEntity = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.button !== 0 || !entityId || !entityContext) {\n      return\n    }\n\n    selectedRowsContext?.clearRowsSelection()\n    entityContext.setSelectedEntity({ entityId, entityType })\n    event.preventDefault()\n  }\n\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (event.detail === 2) openEntity(event)\n  }\n\n  return (\n    <EntityCell\n      id={`${rowId}-${columnId}`}\n      className={clsx(ENTITY_WIDGET_CLASS, READ_ONLY, className, { loading: isLoading })}\n      onMouseDown={handleMouseDown}\n      data-tooltip-delay={200}\n    >\n      <EntityButton onMouseDown={openEntity}>\n        {subType && <EntityIcon entity={{ entityType, subType }} />}\n        {String(value ?? '')}\n        <OpenIcon icon=\"dock_to_left\" />\n      </EntityButton>\n    </EntityCell>\n  )\n}\n"],"names":["EntityCell","styled","StyledBaseTextWidget","EntityButton","OpenIcon","Icon","ENTITY_WIDGET_CLASS","EntityWidget","rowId","columnId","value","entityId","entityType","subType","className","isLoading","entityContext","useContext","DetailsPanelEntityContext","selectedRowsContext","useOptionalSelectedRowsContext","openEntity","event","handleMouseDown","jsx","clsx","READ_ONLY","jsxs","EntityIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAaC,EAAOC,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAaxCC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAatBG,IAAWH,EAAOI,CAAI;AAAA;AAAA;AAAA,IAGxBF,CAAY;AAAA;AAAA;AAAA,GAKHG,IAAsB,iBAatBC,KAAsC,CAAC;AAAA,EAClD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAgBC,EAAWC,CAAyB,GACpDC,IAAsBC,EAAA,GAEtBC,IAAa,CAACC,MAA4C;AAC9D,IAAIA,EAAM,WAAW,KAAK,CAACX,KAAY,CAACK,MAIxCG,GAAqB,mBAAA,GACrBH,EAAc,kBAAkB,EAAE,UAAAL,GAAU,YAAAC,EAAA,CAAY,GACxDU,EAAM,eAAA;AAAA,EACR,GAEMC,IAAqD,CAACD,MAAU;AACpE,IAAIA,EAAM,WAAW,KAAGD,EAAWC,CAAK;AAAA,EAC1C;AAEA,SACEE,gBAAAA,EAAAA;AAAAA,IAACxB;AAAA,IAAA;AAAA,MACC,IAAI,GAAGQ,CAAK,IAAIC,CAAQ;AAAA,MACxB,WAAWgB,EAAKnB,GAAqBoB,GAAWZ,GAAW,EAAE,SAASC,GAAW;AAAA,MACjF,aAAaQ;AAAA,MACb,sBAAoB;AAAA,MAEpB,UAAAI,gBAAAA,EAAAA,KAACxB,GAAA,EAAa,aAAakB,GACxB,UAAA;AAAA,QAAAR,2BAAYe,GAAA,EAAW,QAAQ,EAAE,YAAAhB,GAAY,SAAAC,KAAW;AAAA,QACxD,OAAOH,KAAS,EAAE;AAAA,QACnBc,gBAAAA,EAAAA,IAACpB,GAAA,EAAS,MAAK,eAAA,CAAe;AAAA,MAAA,EAAA,CAChC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -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

@@ -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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"}
+{"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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"}

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

@@ -1,8 +1,21 @@
 import { j as r } from "../../../../../_virtual/jsx-runtime.es.js";
-import { Icon as o, getTextColor as P } from "@ynput/ayon-react-components";
-import l from "clsx";
+import { Icon as c, getTextColor as z } from "@ynput/ayon-react-components";
+import t from "clsx";
 import s from "styled-components";
-const q = "edit-trigger", J = s.div`
+import { wrapMode as J } from "./wrapMode.es.js";
+const K = "edit-trigger", n = 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);
+  }
+`, Q = s.div`
   display: flex;
   gap: 1px;
   align-items: center;
@@ -30,19 +43,46 @@ const q = "edit-trigger", J = s.div`
     }
   }
 
-  /* 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 */
+  ${J`
+    &.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);
+      }
+
+      ${n} {
+        white-space: normal;
+        word-break: break-word;
+        line-height: var(--wrap-row-height);
+      }
+
+      .has-img ${n} {
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
     }
-  }
-`, K = s.div`
+  `}
+`, U = s.div`
   flex: 1;
   display: flex;
   gap: var(--base-gap-small);
@@ -52,34 +92,23 @@ const q = "edit-trigger", J = s.div`
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
   flex-wrap: nowrap;
-`, Q = s.div`
+`, X = s.div`
   display: flex;
   gap: 2px;
   align-items: center;
 
   max-width: 100%;
   min-width: 20px;
-`, U = 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);
-  }
-`, X = s.img`
+`, Y = s.img`
   width: 20px;
   height: 20px;
   object-fit: cover;
+  flex-shrink: 0;
 
   &.avatar {
     border-radius: 50%;
   }
-`, Y = s.div`
+`, Z = s.div`
   border-radius: var(--border-radius-m);
   display: flex;
   justify-content: center;
@@ -94,98 +123,116 @@ const q = "edit-trigger", J = s.div`
   &.open {
     background-color: transparent;
   }
-`, Z = s(o)`
+`, M = s(c)`
   transition: rotate 0.2s;
   padding: 2px;
-`, se = ({
-  selectedOptions: a,
-  placeholder: c,
-  hasMultipleValues: h,
-  isMultiSelect: n,
-  isOpen: i,
-  isItem: t,
-  isSelected: d,
-  isReadOnly: g,
-  iconOnlyColor: u = !1,
-  className: v,
-  pt: y,
+`, la = ({
+  selectedOptions: e,
+  placeholder: i,
+  hasMultipleValues: v,
+  isMultiSelect: o,
+  isOpen: d,
+  isItem: l,
+  isSelected: p,
+  isReadOnly: u,
+  iconOnlyColor: w = !1,
+  className: y,
+  pt: f,
   ...b
 }) => {
   const {
-    icon: f = {},
-    img: w = {},
-    value: N = {},
+    icon: N = {},
+    img: k = {},
+    value: j = {},
     expand: S = {},
-    close: j = {}
-  } = y || {}, { style: C, className: k, ...R } = f, { style: E, className: I, ...W } = w, { style: V, className: L, ...T } = N, { style: _, className: A, ...D } = S, { style: G, className: z, ...B } = j, m = a.every((e) => e.icon), F = !h || !m, p = !m && n && !t, x = !a.length && c;
-  return x && (a = [
+    close: C = {}
+  } = f || {}, { style: R, className: E, ...I } = N, { style: W, className: V, ...L } = k, { style: T, className: _, ...$ } = j, { style: A, className: D, ...G } = S, { style: q, className: B, ...F } = C, m = e.every((a) => a.icon), H = !v || !m, h = !m && o && !l, g = !e.length && i;
+  return g && (e = [
     {
-      label: c,
+      label: i,
       value: ""
     }
-  ]), /* @__PURE__ */ r.jsxs(J, { className: l(v, { selected: d, item: t }), ...b, children: [
-    /* @__PURE__ */ r.jsx(K, { className: "values", children: a.map((e, H) => /* @__PURE__ */ r.jsxs(Q, { children: [
-      e.icon && $(e.icon) ? /* @__PURE__ */ r.jsx(
-        X,
-        {
-          src: e.icon,
-          className: l({ avatar: M(e.icon) }, I),
-          style: E,
-          "data-tooltip": e.label,
-          ...W
-        }
-      ) : e.icon ? /* @__PURE__ */ r.jsx(
-        o,
-        {
-          icon: e.icon,
-          style: { color: e.color, ...C },
-          className: k,
-          ...R
-        }
-      ) : null,
-      (F || !e.icon) && /* @__PURE__ */ r.jsx(
-        U,
-        {
-          style: {
-            color: p && e.color ? P(e.color) : u && e.icon ? void 0 : e.color,
-            backgroundColor: p ? e.color || "var(--md-sys-color-surface-container)" : "transparent",
-            ...V
+  ]), /* @__PURE__ */ r.jsxs(
+    Q,
+    {
+      className: t(y, {
+        selected: p,
+        item: l,
+        "multi-select": o
+      }),
+      ...b,
+      children: [
+        /* @__PURE__ */ r.jsx(U, { className: "values", children: e.map((a, P) => /* @__PURE__ */ r.jsxs(
+          X,
+          {
+            className: t({ "has-img": x(a.icon) }),
+            children: [
+              a.icon && x(a.icon) ? /* @__PURE__ */ r.jsx(
+                Y,
+                {
+                  src: a.icon,
+                  className: t({ avatar: O(a.icon) }, V),
+                  style: W,
+                  "data-tooltip": a.label,
+                  ...L
+                }
+              ) : a.icon ? /* @__PURE__ */ r.jsx(
+                c,
+                {
+                  icon: a.icon,
+                  style: { color: a.color, ...R },
+                  className: E,
+                  ...I
+                }
+              ) : null,
+              (H || !a.icon) && /* @__PURE__ */ r.jsx(
+                n,
+                {
+                  style: {
+                    color: h && a.color ? z(a.color) : w && a.icon ? void 0 : a.color,
+                    backgroundColor: h ? a.color || "var(--md-sys-color-surface-container)" : "transparent",
+                    ...T
+                  },
+                  className: t({ placeholder: g }, _),
+                  "aria-label": a.label,
+                  ...$,
+                  children: a.label
+                }
+              )
+            ]
           },
-          className: l({ placeholder: x }, L),
-          "aria-label": e.label,
-          ...T,
-          children: e.label
-        }
-      )
-    ] }, e.value.toString() + H)) }),
-    !t && !g && /* @__PURE__ */ r.jsx(
-      Y,
-      {
-        className: l("expand", q, { open: i }, A),
-        children: /* @__PURE__ */ r.jsx(
+          a.value.toString() + P
+        )) }),
+        !l && !u && /* @__PURE__ */ r.jsx(
           Z,
           {
-            icon: "expand_more",
-            style: { rotate: i ? "180deg" : "0", ..._ },
-            "aria-label": "Expand options",
-            ...D
+            className: t("expand", K, { open: d }, D),
+            children: /* @__PURE__ */ r.jsx(
+              M,
+              {
+                icon: "expand_more",
+                style: { rotate: d ? "180deg" : "0", ...A },
+                "aria-label": "Expand options",
+                ...G
+              }
+            )
+          }
+        ),
+        l && p && o && /* @__PURE__ */ r.jsx(
+          c,
+          {
+            icon: "close",
+            style: { marginLeft: "auto", marginRight: 4, ...q },
+            "aria-label": "Deselect item",
+            className: t("close", B),
+            ...F
           }
         )
-      }
-    ),
-    t && d && n && /* @__PURE__ */ r.jsx(
-      o,
-      {
-        icon: "close",
-        style: { marginLeft: "auto", marginRight: 4, ...G },
-        "aria-label": "Deselect item",
-        className: l("close", z),
-        ...B
-      }
-    )
-  ] });
-}, $ = (a = "") => a.startsWith("/") || a.startsWith("./") || a.startsWith("../") || a.startsWith("http://") || a.startsWith("https://"), M = (a) => a.includes("avatar");
+      ]
+    }
+  );
+}, x = (e = "") => e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("http://") || e.startsWith("https://"), O = (e) => e.includes("avatar");
 export {
-  se as EnumCellValue
+  la as EnumCellValue
 };
 //# sourceMappingURL=EnumCellValue.es.js.map