@ynput/ayon-frontend-shared 0.2.39 → 0.2.41

package/dist/shared/src/components/AddonLoadingScreen/AddonLoadingScreen.es.js

@@ -1,19 +1,20 @@
-import { j as t } from "../../../../_virtual/jsx-runtime.es.js";
-import d from "styled-components";
-const s = d.div`
+import { j as d } from "../../../../_virtual/jsx-runtime.es.js";
+import e from "styled-components";
+const t = e.div`
   display: flex;
   width: 100%;
   height: 100%;
   gap: 0;
   padding: ${(i) => i.$padding};
-`, m = d.div`
+`, g = e.div`
   width: ${(i) => i.$config.width || "15%"};
   min-width: ${(i) => i.$config.minWidth || "2%"};
   max-width: ${(i) => i.$config.maxWidth || "600px"};
   height: 100%;
-  background: #f0f0f0;
   flex-shrink: 0;
-`, c = d.div`
+  border-radius: 4px;
+  background-color: var(--md-sys-color-surface-container);
+`, l = e.div`
   display: grid;
   grid-template-columns: repeat(${(i) => i.$config.columns}, 1fr);
   grid-template-rows: repeat(${(i) => i.$config.rows}, 1fr);
@@ -21,30 +22,33 @@ const s = d.div`
   flex: 1;
   padding: 1rem;
   overflow: auto;
-`, g = d.div`
-  background: #f0f0f0;
+`, h = e.div`
   border-radius: 4px;
   min-height: ${(i) => i.$minHeight};
-`, h = ({
+  background-color: var(--md-sys-color-surface-container);
+`, u = ({
   showSidebar: i = !0,
-  sidebarConfig: e = {},
-  gridConfig: n = { columns: 3, rows: 3 },
-  padding: o = "var(--padding-l)"
+  sidebarConfig: n = {},
+  gridConfig: o = { columns: 3, rows: 3 },
+  padding: a = "var(--padding-l)",
+  pt: r = {},
+  ...s
 }) => {
-  const r = n.columns * n.rows;
-  return /* @__PURE__ */ t.jsxs(s, { $padding: o, children: [
-    i && /* @__PURE__ */ t.jsx(m, { className: "loading", $config: e }),
-    /* @__PURE__ */ t.jsx(c, { $config: n, children: Array.from({ length: r }).map((l, a) => /* @__PURE__ */ t.jsx(
-      g,
+  const c = o.columns * o.rows;
+  return /* @__PURE__ */ d.jsxs(t, { $padding: a, ...s, children: [
+    i && /* @__PURE__ */ d.jsx(g, { className: "loading", $config: n, ...r == null ? void 0 : r.sidebar }),
+    /* @__PURE__ */ d.jsx(l, { $config: o, ...r == null ? void 0 : r.grid, children: Array.from({ length: c }).map(($, m) => /* @__PURE__ */ d.jsx(
+      h,
       {
         className: "loading",
-        $minHeight: n.itemMinHeight || "200px"
+        $minHeight: o.itemMinHeight || "200px",
+        ...r == null ? void 0 : r.gridItem
       },
-      a
+      m
     )) })
   ] });
 };
 export {
-  h as AddonLoadingScreen
+  u as AddonLoadingScreen
 };
 //# sourceMappingURL=AddonLoadingScreen.es.js.map

package/dist/shared/src/components/AddonLoadingScreen/AddonLoadingScreen.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddonLoadingScreen.es.js","sources":["../../../../../src/components/AddonLoadingScreen/AddonLoadingScreen.tsx"],"sourcesContent":["import { FC } from 'react'\nimport styled from 'styled-components'\n\ninterface GridConfig {\n  columns: number\n  rows: number\n  gap?: string\n  itemMinHeight?: string\n}\n\ninterface SidebarConfig {\n  width?: string\n  minWidth?: string\n  maxWidth?: string\n}\n\nexport interface ReportsLoadingScreenProps {\n  showSidebar?: boolean\n  sidebarConfig?: SidebarConfig\n  gridConfig?: GridConfig\n  padding?: string\n}\n\nconst Container = styled.div<{ $padding: string }>`\n  display: flex;\n  width: 100%;\n  height: 100%;\n  gap: 0;\n  padding: ${(props) => props.$padding};\n`\n\nconst Sidebar = styled.div<{ $config: SidebarConfig }>`\n  width: ${(props) => props.$config.width || '15%'};\n  min-width: ${(props) => props.$config.minWidth || '2%'};\n  max-width: ${(props) => props.$config.maxWidth || '600px'};\n  height: 100%;\n  background: #f0f0f0;\n  flex-shrink: 0;\n`\n\nconst Grid = styled.div<{ $config: GridConfig }>`\n  display: grid;\n  grid-template-columns: repeat(${(props) => props.$config.columns}, 1fr);\n  grid-template-rows: repeat(${(props) => props.$config.rows}, 1fr);\n  gap: ${(props) => props.$config.gap || '1rem'};\n  flex: 1;\n  padding: 1rem;\n  overflow: auto;\n`\n\nconst GridItem = styled.div<{ $minHeight: string }>`\n  background: #f0f0f0;\n  border-radius: 4px;\n  min-height: ${(props) => props.$minHeight};\n`\n\nexport const AddonLoadingScreen: FC<ReportsLoadingScreenProps> = ({\n  showSidebar = true,\n  sidebarConfig = {},\n  gridConfig = { columns: 3, rows: 3 },\n  padding = 'var(--padding-l)',\n}) => {\n  const totalItems = gridConfig.columns * gridConfig.rows\n\n  return (\n    <Container $padding={padding}>\n      {showSidebar && <Sidebar className=\"loading\" $config={sidebarConfig}></Sidebar>}\n\n      <Grid $config={gridConfig}>\n        {Array.from({ length: totalItems }).map((_, index) => (\n          <GridItem\n            key={index}\n            className=\"loading\"\n            $minHeight={gridConfig.itemMinHeight || '200px'}\n          ></GridItem>\n        ))}\n      </Grid>\n    </Container>\n  )\n}\n"],"names":["Container","styled","props","Sidebar","Grid","GridItem","AddonLoadingScreen","showSidebar","sidebarConfig","gridConfig","padding","totalItems","jsxs","jsx","_","index"],"mappings":";;AAuBA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAKZ,CAACC,MAAUA,EAAM,QAAQ;AAAA,GAGhCC,IAAUF,EAAO;AAAA,WACZ,CAACC,MAAUA,EAAM,QAAQ,SAAS,KAAK;AAAA,eACnC,CAACA,MAAUA,EAAM,QAAQ,YAAY,IAAI;AAAA,eACzC,CAACA,MAAUA,EAAM,QAAQ,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,GAMrDE,IAAOH,EAAO;AAAA;AAAA,kCAEc,CAACC,MAAUA,EAAM,QAAQ,OAAO;AAAA,+BACnC,CAACA,MAAUA,EAAM,QAAQ,IAAI;AAAA,SACnD,CAACA,MAAUA,EAAM,QAAQ,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAWJ,EAAO;AAAA;AAAA;AAAA,gBAGR,CAACC,MAAUA,EAAM,UAAU;AAAA,GAG9BI,IAAoD,CAAC;AAAA,EAChE,aAAAC,IAAc;AAAA,EACd,eAAAC,IAAgB,CAAC;AAAA,EACjB,YAAAC,IAAa,EAAE,SAAS,GAAG,MAAM,EAAE;AAAA,EACnC,SAAAC,IAAU;AACZ,MAAM;AACE,QAAAC,IAAaF,EAAW,UAAUA,EAAW;AAGjD,SAAAG,gBAAAA,EAAA,KAACZ,GAAU,EAAA,UAAUU,GAClB,UAAA;AAAA,IAAAH,KAAgBM,gBAAAA,EAAA,IAAAV,GAAA,EAAQ,WAAU,WAAU,SAASK,GAAe;AAAA,IAEpEK,gBAAAA,EAAA,IAAAT,GAAA,EAAK,SAASK,GACZ,gBAAM,KAAK,EAAE,QAAQE,EAAA,CAAY,EAAE,IAAI,CAACG,GAAGC,MAC1CF,gBAAAA,EAAA;AAAA,MAACR;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,YAAYI,EAAW,iBAAiB;AAAA,MAAA;AAAA,MAFnCM;AAAA,IAAA,CAIR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"AddonLoadingScreen.es.js","sources":["../../../../../src/components/AddonLoadingScreen/AddonLoadingScreen.tsx"],"sourcesContent":["import { FC, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\ninterface GridConfig {\n  columns: number\n  rows: number\n  gap?: string\n  itemMinHeight?: string\n}\n\ninterface SidebarConfig {\n  width?: string\n  minWidth?: string\n  maxWidth?: string\n}\n\nexport interface ReportsLoadingScreenProps extends HTMLAttributes<HTMLDivElement> {\n  showSidebar?: boolean\n  sidebarConfig?: SidebarConfig\n  gridConfig?: GridConfig\n  padding?: string\n  pt?: {\n    sidebar?: Partial<HTMLAttributes<HTMLDivElement>>\n    grid?: Partial<HTMLAttributes<HTMLDivElement>>\n    gridItem?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nconst Container = styled.div<{ $padding: string }>`\n  display: flex;\n  width: 100%;\n  height: 100%;\n  gap: 0;\n  padding: ${(props) => props.$padding};\n`\n\nconst Sidebar = styled.div<{ $config: SidebarConfig }>`\n  width: ${(props) => props.$config.width || '15%'};\n  min-width: ${(props) => props.$config.minWidth || '2%'};\n  max-width: ${(props) => props.$config.maxWidth || '600px'};\n  height: 100%;\n  flex-shrink: 0;\n  border-radius: 4px;\n  background-color: var(--md-sys-color-surface-container);\n`\n\nconst Grid = styled.div<{ $config: GridConfig }>`\n  display: grid;\n  grid-template-columns: repeat(${(props) => props.$config.columns}, 1fr);\n  grid-template-rows: repeat(${(props) => props.$config.rows}, 1fr);\n  gap: ${(props) => props.$config.gap || '1rem'};\n  flex: 1;\n  padding: 1rem;\n  overflow: auto;\n`\n\nconst GridItem = styled.div<{ $minHeight: string }>`\n  border-radius: 4px;\n  min-height: ${(props) => props.$minHeight};\n  background-color: var(--md-sys-color-surface-container);\n`\n\nexport const AddonLoadingScreen: FC<ReportsLoadingScreenProps> = ({\n  showSidebar = true,\n  sidebarConfig = {},\n  gridConfig = { columns: 3, rows: 3 },\n  padding = 'var(--padding-l)',\n  pt = {},\n  ...containerProps\n}) => {\n  const totalItems = gridConfig.columns * gridConfig.rows\n\n  return (\n    <Container $padding={padding} {...containerProps}>\n      {showSidebar && (\n        <Sidebar className=\"loading\" $config={sidebarConfig} {...pt?.sidebar}></Sidebar>\n      )}\n\n      <Grid $config={gridConfig} {...pt?.grid}>\n        {Array.from({ length: totalItems }).map((_, index) => (\n          <GridItem\n            key={index}\n            className=\"loading\"\n            $minHeight={gridConfig.itemMinHeight || '200px'}\n            {...pt?.gridItem}\n          ></GridItem>\n        ))}\n      </Grid>\n    </Container>\n  )\n}\n"],"names":["Container","styled","props","Sidebar","Grid","GridItem","AddonLoadingScreen","showSidebar","sidebarConfig","gridConfig","padding","pt","containerProps","totalItems","jsxs","jsx","_","index"],"mappings":";;AA4BA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAKZ,CAACC,MAAUA,EAAM,QAAQ;AAAA,GAGhCC,IAAUF,EAAO;AAAA,WACZ,CAACC,MAAUA,EAAM,QAAQ,SAAS,KAAK;AAAA,eACnC,CAACA,MAAUA,EAAM,QAAQ,YAAY,IAAI;AAAA,eACzC,CAACA,MAAUA,EAAM,QAAQ,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrDE,IAAOH,EAAO;AAAA;AAAA,kCAEc,CAACC,MAAUA,EAAM,QAAQ,OAAO;AAAA,+BACnC,CAACA,MAAUA,EAAM,QAAQ,IAAI;AAAA,SACnD,CAACA,MAAUA,EAAM,QAAQ,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAWJ,EAAO;AAAA;AAAA,gBAER,CAACC,MAAUA,EAAM,UAAU;AAAA;AAAA,GAI9BI,IAAoD,CAAC;AAAA,EAChE,aAAAC,IAAc;AAAA,EACd,eAAAC,IAAgB,CAAC;AAAA,EACjB,YAAAC,IAAa,EAAE,SAAS,GAAG,MAAM,EAAE;AAAA,EACnC,SAAAC,IAAU;AAAA,EACV,IAAAC,IAAK,CAAC;AAAA,EACN,GAAGC;AACL,MAAM;AACE,QAAAC,IAAaJ,EAAW,UAAUA,EAAW;AAEnD,SACGK,gBAAAA,EAAAA,KAAAd,GAAA,EAAU,UAAUU,GAAU,GAAGE,GAC/B,UAAA;AAAA,IACCL,KAAAQ,gBAAAA,EAAA,IAACZ,KAAQ,WAAU,WAAU,SAASK,GAAgB,GAAGG,KAAA,gBAAAA,EAAI,SAAS;AAAA,0BAGvEP,GAAK,EAAA,SAASK,GAAa,GAAGE,KAAA,gBAAAA,EAAI,MAChC,UAAA,MAAM,KAAK,EAAE,QAAQE,EAAY,CAAA,EAAE,IAAI,CAACG,GAAGC,MAC1CF,gBAAAA,EAAA;AAAA,MAACV;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,YAAYI,EAAW,iBAAiB;AAAA,QACvC,GAAGE,KAAA,gBAAAA,EAAI;AAAA,MAAA;AAAA,MAHHM;AAAA,IAAA,CAKR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/shared/src/components/Chips/Chips.cjs.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../_virtual/jsx-runtime.cjs.js"),o=require("react"),S=require("@ynput/ayon-react-components"),v=require("clsx"),h=require("styled-components"),W=h.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../../../../_virtual/jsx-runtime.cjs.js"),o=require("react"),w=require("@ynput/ayon-react-components"),v=require("clsx"),u=require("styled-components"),W=u.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
   width: 100%;
   overflow: hidden;
-`,m=h.div`
+`,x=u.div`
   background-color: var(--md-sys-color-surface-container-high);
   border-radius: var(--border-radius-m);
   padding: 2px 4px;
@@ -13,6 +13,10 @@
   text-overflow: ellipsis;
   cursor: pointer;
 
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
   flex-shrink: 0;
   min-width: auto;
   &.last {
@@ -23,18 +27,18 @@
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`,V=h(m)`
+`,V=u(x)`
   visibility: hidden;
   position: absolute;
   top: -9999px;
   left: -9999px;
   z-index: -100;
-`,O=h(m)`
+`,O=u(x)`
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-`,B=h(S.Icon)`
+`,B=u(w.Icon)`
   background-color: var(--md-sys-color-surface-container);
   border-radius: var(--border-radius-m);
   width: 24px;
@@ -47,5 +51,5 @@
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`,z=({values:t,disabled:w,pt:e})=>{var x,y;const r=o.useRef(null),[b,R]=o.useState([]),[f,j]=o.useState(0),[g,k]=o.useState([]);return o.useLayoutEffect(()=>{k(t)},[t]),o.useLayoutEffect(()=>{const n=()=>{if(!r.current||g.length===0)return;const l=r.current.offsetWidth,d=Array.from(r.current.querySelectorAll(".offscreen-chip")),p=r.current.querySelector(".more-chip");if(!d.length)return;let a=0;const s=[],q=(p==null?void 0:p.getBoundingClientRect().width)||60;if(t.length>0){const c=d[0].getBoundingClientRect().width;s.push(t[0]),a+=c}for(let c=1;c<t.length;c++){const C=d[c].getBoundingClientRect().width;if(a+C<=l)a+=C,s.push(t[c]);else{if(a+q<=l)break;if(s.length>1){const N=d[s.length-1].getBoundingClientRect().width;a-=N,s.pop()}break}}const E=t.length-s.length;R(s),j(E)},i=new ResizeObserver(n);return r.current&&i.observe(r.current),n(),()=>{r.current&&i.unobserve(r.current)}},[t,g]),w?null:t.length?u.jsxRuntimeExports.jsxs(W,{ref:r,children:[b.map((n,i)=>{var l;return o.createElement(m,{...e==null?void 0:e.chip,key:n.label+i,"data-tooltip":n.tooltip,className:v("chip",{last:i===b.length-1&&f>0},(l=e==null?void 0:e.chip)==null?void 0:l.className)},n.label)}),f>0&&u.jsxRuntimeExports.jsxs(O,{className:v("more-chip",(y=e==null?void 0:e.chip)==null?void 0:y.className),children:["+",f]}),g.map((n,i)=>u.jsxRuntimeExports.jsx(V,{className:"offscreen-chip",children:n.label},n.label+i))]}):u.jsxRuntimeExports.jsx(B,{icon:"add",className:(x=e==null?void 0:e.chip)==null?void 0:x.className})};exports.Chips=z;
+`,z=({values:n,disabled:R,pt:t})=>{var b,y;const r=o.useRef(null),[p,j]=o.useState([]),[f,k]=o.useState(0),[g,E]=o.useState([]);return o.useLayoutEffect(()=>{E(n)},[n]),o.useLayoutEffect(()=>{const e=()=>{if(!r.current||g.length===0)return;const l=r.current.offsetWidth,h=Array.from(r.current.querySelectorAll(".offscreen-chip")),m=r.current.querySelector(".more-chip");if(!h.length)return;let a=0;const i=[],q=(m==null?void 0:m.getBoundingClientRect().width)||60;if(n.length>0){const c=h[0].getBoundingClientRect().width;i.push(n[0]),a+=c}for(let c=1;c<n.length;c++){const C=h[c].getBoundingClientRect().width;if(a+C<=l)a+=C,i.push(n[c]);else{if(a+q<=l)break;if(i.length>1){const S=h[i.length-1].getBoundingClientRect().width;a-=S,i.pop()}break}}const N=n.length-i.length;j(i),k(N)},s=new ResizeObserver(e);return r.current&&s.observe(r.current),e(),()=>{r.current&&s.unobserve(r.current)}},[n,g]),R?null:n.length?d.jsxRuntimeExports.jsxs(W,{ref:r,children:[p.map((e,s)=>{var l;return o.createElement(x,{...t==null?void 0:t.chip,key:e.label+s,"data-tooltip":e.tooltip,className:v("chip",{last:s===p.length-1&&f>0},(l=t==null?void 0:t.chip)==null?void 0:l.className)},(e==null?void 0:e.icon)&&d.jsxRuntimeExports.jsx(w.Icon,{icon:e.icon}),"  ",e.label)}),f>0&&d.jsxRuntimeExports.jsxs(O,{className:v("more-chip",(y=t==null?void 0:t.chip)==null?void 0:y.className),children:["+",f]}),g.map((e,s)=>d.jsxRuntimeExports.jsx(V,{className:"offscreen-chip",children:e.label},e.label+s))]}):d.jsxRuntimeExports.jsx(B,{icon:"add",className:(b=t==null?void 0:t.chip)==null?void 0:b.className})};exports.Chips=z;
 //# sourceMappingURL=Chips.cjs.js.map

package/dist/shared/src/components/Chips/Chips.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.cjs.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [visibleValues, setVisibleValues] = useState<ChipValue[]>([])\n  const [hiddenCount, setHiddenCount] = useState(0)\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const calculateVisibleChips = () => {\n      if (!containerRef.current || offscreenChips.length === 0) return\n\n      const containerWidth = containerRef.current.offsetWidth\n      const chipElements = Array.from(containerRef.current.querySelectorAll('.offscreen-chip'))\n      const moreChipElement = containerRef.current.querySelector('.more-chip')\n\n      if (!chipElements.length) return\n\n      let totalWidth = 0\n      const newVisibleValues: ChipValue[] = []\n\n      const moreChipWidth = moreChipElement?.getBoundingClientRect().width || 60\n\n      // Always show the first chip\n      if (values.length > 0) {\n        const firstChipWidth = chipElements[0].getBoundingClientRect().width\n        newVisibleValues.push(values[0])\n        totalWidth += firstChipWidth\n      }\n\n      // Add additional chips if they fit\n      for (let i = 1; i < values.length; i++) {\n        const chipWidth = chipElements[i].getBoundingClientRect().width\n\n        // Check if the next chip can fit completely\n        if (totalWidth + chipWidth <= containerWidth) {\n          totalWidth += chipWidth\n          newVisibleValues.push(values[i])\n        } else {\n          // Check if there's room for the more chip\n          if (totalWidth + moreChipWidth <= containerWidth) {\n            // Keep current visible chips and show more chip\n            break\n          } else {\n            // Remove the last chip if we need room for the more chip\n            if (newVisibleValues.length > 1) {\n              const lastChipWidth =\n                chipElements[newVisibleValues.length - 1].getBoundingClientRect().width\n              totalWidth -= lastChipWidth\n              newVisibleValues.pop()\n            }\n            break\n          }\n        }\n      }\n\n      const finalHiddenCount = values.length - newVisibleValues.length\n      setVisibleValues(newVisibleValues)\n      setHiddenCount(finalHiddenCount)\n    }\n\n    const resizeObserver = new ResizeObserver(calculateVisibleChips)\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    // Initial calculation\n    calculateVisibleChips()\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current)\n      }\n    }\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  return (\n    <ChipsContainer ref={containerRef}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.label}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.label}\n        </OffscreenChip>\n      ))}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleValues","setVisibleValues","useState","hiddenCount","setHiddenCount","offscreenChips","setOffscreenChips","useLayoutEffect","calculateVisibleChips","containerWidth","chipElements","moreChipElement","totalWidth","newVisibleValues","moreChipWidth","firstChipWidth","i","chipWidth","lastChipWidth","finalHiddenCount","resizeObserver","jsxs","chip","index","createElement","clsx","_a","_b","jsx"],"mappings":"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"}
+{"version":3,"file":"Chips.cjs.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [visibleValues, setVisibleValues] = useState<ChipValue[]>([])\n  const [hiddenCount, setHiddenCount] = useState(0)\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const calculateVisibleChips = () => {\n      if (!containerRef.current || offscreenChips.length === 0) return\n\n      const containerWidth = containerRef.current.offsetWidth\n      const chipElements = Array.from(containerRef.current.querySelectorAll('.offscreen-chip'))\n      const moreChipElement = containerRef.current.querySelector('.more-chip')\n\n      if (!chipElements.length) return\n\n      let totalWidth = 0\n      const newVisibleValues: ChipValue[] = []\n\n      const moreChipWidth = moreChipElement?.getBoundingClientRect().width || 60\n\n      // Always show the first chip\n      if (values.length > 0) {\n        const firstChipWidth = chipElements[0].getBoundingClientRect().width\n        newVisibleValues.push(values[0])\n        totalWidth += firstChipWidth\n      }\n\n      // Add additional chips if they fit\n      for (let i = 1; i < values.length; i++) {\n        const chipWidth = chipElements[i].getBoundingClientRect().width\n\n        // Check if the next chip can fit completely\n        if (totalWidth + chipWidth <= containerWidth) {\n          totalWidth += chipWidth\n          newVisibleValues.push(values[i])\n        } else {\n          // Check if there's room for the more chip\n          if (totalWidth + moreChipWidth <= containerWidth) {\n            // Keep current visible chips and show more chip\n            break\n          } else {\n            // Remove the last chip if we need room for the more chip\n            if (newVisibleValues.length > 1) {\n              const lastChipWidth =\n                chipElements[newVisibleValues.length - 1].getBoundingClientRect().width\n              totalWidth -= lastChipWidth\n              newVisibleValues.pop()\n            }\n            break\n          }\n        }\n      }\n\n      const finalHiddenCount = values.length - newVisibleValues.length\n      setVisibleValues(newVisibleValues)\n      setHiddenCount(finalHiddenCount)\n    }\n\n    const resizeObserver = new ResizeObserver(calculateVisibleChips)\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    // Initial calculation\n    calculateVisibleChips()\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current)\n      }\n    }\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  return (\n    <ChipsContainer ref={containerRef}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip?.icon && <Icon icon={chip.icon}/>}  {chip.label}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.label}\n        </OffscreenChip>\n      ))}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleValues","setVisibleValues","useState","hiddenCount","setHiddenCount","offscreenChips","setOffscreenChips","useLayoutEffect","calculateVisibleChips","containerWidth","chipElements","moreChipElement","totalWidth","newVisibleValues","moreChipWidth","firstChipWidth","i","chipWidth","lastChipWidth","finalHiddenCount","resizeObserver","jsxs","chip","index","createElement","clsx","_a","jsx","_b"],"mappings":"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"}

package/dist/shared/src/components/Chips/Chips.es.js

@@ -1,15 +1,15 @@
-import { j as d } from "../../../../_virtual/jsx-runtime.es.js";
-import { useRef as O, useState as p, useLayoutEffect as w, createElement as z } from "react";
-import { Icon as A } from "@ynput/ayon-react-components";
+import { j as a } from "../../../../_virtual/jsx-runtime.es.js";
+import { useRef as z, useState as g, useLayoutEffect as w, createElement as A } from "react";
+import { Icon as k } from "@ynput/ayon-react-components";
 import v from "clsx";
-import a from "styled-components";
-const E = a.div`
+import d from "styled-components";
+const E = d.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
   width: 100%;
   overflow: hidden;
-`, g = a.div`
+`, p = d.div`
   background-color: var(--md-sys-color-surface-container-high);
   border-radius: var(--border-radius-m);
   padding: 2px 4px;
@@ -18,6 +18,10 @@ const E = a.div`
   text-overflow: ellipsis;
   cursor: pointer;
 
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
   flex-shrink: 0;
   min-width: auto;
   &.last {
@@ -28,18 +32,18 @@ const E = a.div`
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`, S = a(g)`
+`, S = d(p)`
   visibility: hidden;
   position: absolute;
   top: -9999px;
   left: -9999px;
   z-index: -100;
-`, q = a(g)`
+`, q = d(p)`
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-`, H = a(A)`
+`, H = d(k)`
   background-color: var(--md-sys-color-surface-container);
   border-radius: var(--border-radius-m);
   width: 24px;
@@ -52,66 +56,68 @@ const E = a.div`
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`, G = ({ values: r, disabled: k, pt: e }) => {
+`, G = ({ values: n, disabled: j, pt: r }) => {
   var x, C;
-  const i = O(null), [b, j] = p([]), [f, R] = p(0), [u, N] = p([]);
+  const i = z(null), [b, R] = g([]), [f, N] = g(0), [u, W] = g([]);
   return w(() => {
-    N(r);
-  }, [r]), w(() => {
-    const n = () => {
+    W(n);
+  }, [n]), w(() => {
+    const e = () => {
       if (!i.current || u.length === 0) return;
       const c = i.current.offsetWidth, h = Array.from(i.current.querySelectorAll(".offscreen-chip")), m = i.current.querySelector(".more-chip");
       if (!h.length) return;
       let l = 0;
-      const o = [], W = (m == null ? void 0 : m.getBoundingClientRect().width) || 60;
-      if (r.length > 0) {
+      const o = [], V = (m == null ? void 0 : m.getBoundingClientRect().width) || 60;
+      if (n.length > 0) {
         const s = h[0].getBoundingClientRect().width;
-        o.push(r[0]), l += s;
+        o.push(n[0]), l += s;
       }
-      for (let s = 1; s < r.length; s++) {
+      for (let s = 1; s < n.length; s++) {
         const y = h[s].getBoundingClientRect().width;
         if (l + y <= c)
-          l += y, o.push(r[s]);
+          l += y, o.push(n[s]);
         else {
-          if (l + W <= c)
+          if (l + V <= c)
             break;
           if (o.length > 1) {
-            const B = h[o.length - 1].getBoundingClientRect().width;
-            l -= B, o.pop();
+            const O = h[o.length - 1].getBoundingClientRect().width;
+            l -= O, o.pop();
           }
           break;
         }
       }
-      const V = r.length - o.length;
-      j(o), R(V);
-    }, t = new ResizeObserver(n);
-    return i.current && t.observe(i.current), n(), () => {
+      const B = n.length - o.length;
+      R(o), N(B);
+    }, t = new ResizeObserver(e);
+    return i.current && t.observe(i.current), e(), () => {
       i.current && t.unobserve(i.current);
     };
-  }, [r, u]), k ? null : r.length ? /* @__PURE__ */ d.jsxs(E, { ref: i, children: [
-    b.map((n, t) => {
+  }, [n, u]), j ? null : n.length ? /* @__PURE__ */ a.jsxs(E, { ref: i, children: [
+    b.map((e, t) => {
       var c;
-      return /* @__PURE__ */ z(
-        g,
+      return /* @__PURE__ */ A(
+        p,
         {
-          ...e == null ? void 0 : e.chip,
-          key: n.label + t,
-          "data-tooltip": n.tooltip,
+          ...r == null ? void 0 : r.chip,
+          key: e.label + t,
+          "data-tooltip": e.tooltip,
           className: v(
             "chip",
             { last: t === b.length - 1 && f > 0 },
-            (c = e == null ? void 0 : e.chip) == null ? void 0 : c.className
+            (c = r == null ? void 0 : r.chip) == null ? void 0 : c.className
           )
         },
-        n.label
+        (e == null ? void 0 : e.icon) && /* @__PURE__ */ a.jsx(k, { icon: e.icon }),
+        "  ",
+        e.label
       );
     }),
-    f > 0 && /* @__PURE__ */ d.jsxs(q, { className: v("more-chip", (C = e == null ? void 0 : e.chip) == null ? void 0 : C.className), children: [
+    f > 0 && /* @__PURE__ */ a.jsxs(q, { className: v("more-chip", (C = r == null ? void 0 : r.chip) == null ? void 0 : C.className), children: [
       "+",
       f
     ] }),
-    u.map((n, t) => /* @__PURE__ */ d.jsx(S, { className: "offscreen-chip", children: n.label }, n.label + t))
-  ] }) : /* @__PURE__ */ d.jsx(H, { icon: "add", className: (x = e == null ? void 0 : e.chip) == null ? void 0 : x.className });
+    u.map((e, t) => /* @__PURE__ */ a.jsx(S, { className: "offscreen-chip", children: e.label }, e.label + t))
+  ] }) : /* @__PURE__ */ a.jsx(H, { icon: "add", className: (x = r == null ? void 0 : r.chip) == null ? void 0 : x.className });
 };
 export {
   G as Chips

package/dist/shared/src/components/Chips/Chips.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.es.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [visibleValues, setVisibleValues] = useState<ChipValue[]>([])\n  const [hiddenCount, setHiddenCount] = useState(0)\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const calculateVisibleChips = () => {\n      if (!containerRef.current || offscreenChips.length === 0) return\n\n      const containerWidth = containerRef.current.offsetWidth\n      const chipElements = Array.from(containerRef.current.querySelectorAll('.offscreen-chip'))\n      const moreChipElement = containerRef.current.querySelector('.more-chip')\n\n      if (!chipElements.length) return\n\n      let totalWidth = 0\n      const newVisibleValues: ChipValue[] = []\n\n      const moreChipWidth = moreChipElement?.getBoundingClientRect().width || 60\n\n      // Always show the first chip\n      if (values.length > 0) {\n        const firstChipWidth = chipElements[0].getBoundingClientRect().width\n        newVisibleValues.push(values[0])\n        totalWidth += firstChipWidth\n      }\n\n      // Add additional chips if they fit\n      for (let i = 1; i < values.length; i++) {\n        const chipWidth = chipElements[i].getBoundingClientRect().width\n\n        // Check if the next chip can fit completely\n        if (totalWidth + chipWidth <= containerWidth) {\n          totalWidth += chipWidth\n          newVisibleValues.push(values[i])\n        } else {\n          // Check if there's room for the more chip\n          if (totalWidth + moreChipWidth <= containerWidth) {\n            // Keep current visible chips and show more chip\n            break\n          } else {\n            // Remove the last chip if we need room for the more chip\n            if (newVisibleValues.length > 1) {\n              const lastChipWidth =\n                chipElements[newVisibleValues.length - 1].getBoundingClientRect().width\n              totalWidth -= lastChipWidth\n              newVisibleValues.pop()\n            }\n            break\n          }\n        }\n      }\n\n      const finalHiddenCount = values.length - newVisibleValues.length\n      setVisibleValues(newVisibleValues)\n      setHiddenCount(finalHiddenCount)\n    }\n\n    const resizeObserver = new ResizeObserver(calculateVisibleChips)\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    // Initial calculation\n    calculateVisibleChips()\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current)\n      }\n    }\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  return (\n    <ChipsContainer ref={containerRef}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.label}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.label}\n        </OffscreenChip>\n      ))}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleValues","setVisibleValues","useState","hiddenCount","setHiddenCount","offscreenChips","setOffscreenChips","useLayoutEffect","calculateVisibleChips","containerWidth","chipElements","moreChipElement","totalWidth","newVisibleValues","moreChipWidth","firstChipWidth","i","chipWidth","lastChipWidth","finalHiddenCount","resizeObserver","jsxs","chip","index","createElement","clsx","_a","_b","jsx"],"mappings":"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"}
+{"version":3,"file":"Chips.es.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [visibleValues, setVisibleValues] = useState<ChipValue[]>([])\n  const [hiddenCount, setHiddenCount] = useState(0)\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const calculateVisibleChips = () => {\n      if (!containerRef.current || offscreenChips.length === 0) return\n\n      const containerWidth = containerRef.current.offsetWidth\n      const chipElements = Array.from(containerRef.current.querySelectorAll('.offscreen-chip'))\n      const moreChipElement = containerRef.current.querySelector('.more-chip')\n\n      if (!chipElements.length) return\n\n      let totalWidth = 0\n      const newVisibleValues: ChipValue[] = []\n\n      const moreChipWidth = moreChipElement?.getBoundingClientRect().width || 60\n\n      // Always show the first chip\n      if (values.length > 0) {\n        const firstChipWidth = chipElements[0].getBoundingClientRect().width\n        newVisibleValues.push(values[0])\n        totalWidth += firstChipWidth\n      }\n\n      // Add additional chips if they fit\n      for (let i = 1; i < values.length; i++) {\n        const chipWidth = chipElements[i].getBoundingClientRect().width\n\n        // Check if the next chip can fit completely\n        if (totalWidth + chipWidth <= containerWidth) {\n          totalWidth += chipWidth\n          newVisibleValues.push(values[i])\n        } else {\n          // Check if there's room for the more chip\n          if (totalWidth + moreChipWidth <= containerWidth) {\n            // Keep current visible chips and show more chip\n            break\n          } else {\n            // Remove the last chip if we need room for the more chip\n            if (newVisibleValues.length > 1) {\n              const lastChipWidth =\n                chipElements[newVisibleValues.length - 1].getBoundingClientRect().width\n              totalWidth -= lastChipWidth\n              newVisibleValues.pop()\n            }\n            break\n          }\n        }\n      }\n\n      const finalHiddenCount = values.length - newVisibleValues.length\n      setVisibleValues(newVisibleValues)\n      setHiddenCount(finalHiddenCount)\n    }\n\n    const resizeObserver = new ResizeObserver(calculateVisibleChips)\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    // Initial calculation\n    calculateVisibleChips()\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current)\n      }\n    }\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  return (\n    <ChipsContainer ref={containerRef}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip?.icon && <Icon icon={chip.icon}/>}  {chip.label}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.label}\n        </OffscreenChip>\n      ))}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleValues","setVisibleValues","useState","hiddenCount","setHiddenCount","offscreenChips","setOffscreenChips","useLayoutEffect","calculateVisibleChips","containerWidth","chipElements","moreChipElement","totalWidth","newVisibleValues","moreChipWidth","firstChipWidth","i","chipWidth","lastChipWidth","finalHiddenCount","resizeObserver","jsxs","chip","index","createElement","clsx","_a","jsx","_b"],"mappings":"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"}

package/dist/shared/src/components/DetailsDialog/DetailsDialog.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../../_virtual/jsx-runtime.cjs.js"),a=require("react-toastify");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/activities/getCategories.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");const d=require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/versions/getVersionsProducts.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/users/guests.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");require("../../api/queries/uris/getUris.cjs.js");const c=require("@ynput/ayon-react-components"),g=({projectName:o,entityType:i,entityIds:n,visible:u,onHide:s})=>{const{data:q={},isLoading:e,isError:r,error:l}=d.useGetEntityQuery({projectName:o,entityType:i,entityId:n[0]},{skip:!u});return e&&r&&a.toast.error(`Unable to load detail. ${l}`),!u||q.length<1?null:t.jsxRuntimeExports.jsx(c.Dialog,{isOpen:!0,onClose:s,size:"lg",style:{width:"50vw"},header:`${i} detail`,children:t.jsxRuntimeExports.jsxs("pre",{children:[!e&&!r&&JSON.stringify(q,null,2),e&&"loading...",r&&"error..."]})})};exports.DetailsDialog=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../../_virtual/jsx-runtime.cjs.js"),a=require("react-toastify");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/activities/getCategories.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/config/getConfig.cjs.js");require("../../api/queries/config/updateConfig.cjs.js");const d=require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/versions/getVersionsProducts.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/users/guests.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");require("../../api/queries/uris/getUris.cjs.js");const c=require("@ynput/ayon-react-components"),g=({projectName:o,entityType:i,entityIds:n,visible:u,onHide:s})=>{const{data:q={},isLoading:e,isError:r,error:l}=d.useGetEntityQuery({projectName:o,entityType:i,entityId:n[0]},{skip:!u});return e&&r&&a.toast.error(`Unable to load detail. ${l}`),!u||q.length<1?null:t.jsxRuntimeExports.jsx(c.Dialog,{isOpen:!0,onClose:s,size:"lg",style:{width:"50vw"},header:`${i} detail`,children:t.jsxRuntimeExports.jsxs("pre",{children:[!e&&!r&&JSON.stringify(q,null,2),e&&"loading...",r&&"error..."]})})};exports.DetailsDialog=g;
 //# sourceMappingURL=DetailsDialog.cjs.js.map

package/dist/shared/src/components/DetailsDialog/DetailsDialog.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsDialog.cjs.js","sources":["../../../../../src/components/DetailsDialog/DetailsDialog.tsx"],"sourcesContent":["import { toast } from 'react-toastify'\nimport { useGetEntityQuery } from '@shared/api'\nimport { Dialog } from '@ynput/ayon-react-components'\n\nexport interface DetailsDialogProps {\n  projectName?: string\n  entityType: string\n  entityIds: string[]\n  visible: boolean\n  onHide: () => void\n}\n\nexport const DetailsDialog = ({\n  projectName,\n  entityType,\n  entityIds,\n  visible,\n  onHide,\n}: DetailsDialogProps) => {\n  const {\n    data = {},\n    isLoading,\n    isError,\n    error,\n  } = useGetEntityQuery(\n    { projectName, entityType: entityType, entityId: entityIds[0] },\n    { skip: !visible },\n  )\n\n  if (isLoading)\n    if (isError) {\n      toast.error(`Unable to load detail. ${error}`)\n    }\n\n  if (!visible || data.length < 1) return null\n\n  return (\n    <Dialog\n      isOpen={true}\n      onClose={onHide}\n      size=\"lg\"\n      style={{ width: '50vw' }}\n      header={`${entityType} detail`}\n    >\n      <pre>\n        {!isLoading && !isError && JSON.stringify(data, null, 2)}\n        {isLoading && 'loading...'}\n        {isError && 'error...'}\n      </pre>\n    </Dialog>\n  )\n}\n"],"names":["DetailsDialog","projectName","entityType","entityIds","visible","onHide","data","isLoading","isError","error","useGetEntityQuery","toast","jsx","Dialog"],"mappings":"s/IAYaA,EAAgB,CAAC,CAC5B,YAAAC,EACA,WAAAC,EACA,UAAAC,EACA,QAAAC,EACA,OAAAC,CACF,IAA0B,CAClB,KAAA,CACJ,KAAAC,EAAO,CAAC,EACR,UAAAC,EACA,QAAAC,EACA,MAAAC,CAAA,EACEC,EAAA,kBACF,CAAE,YAAAT,EAAa,WAAAC,EAAwB,SAAUC,EAAU,CAAC,CAAE,EAC9D,CAAE,KAAM,CAACC,CAAQ,CACnB,EAOA,OALIG,GACEC,GACIG,EAAAA,MAAA,MAAM,0BAA0BF,CAAK,EAAE,EAG7C,CAACL,GAAWE,EAAK,OAAS,EAAU,KAGtCM,EAAA,kBAAA,IAACC,EAAA,OAAA,CACC,OAAQ,GACR,QAASR,EACT,KAAK,KACL,MAAO,CAAE,MAAO,MAAO,EACvB,OAAQ,GAAGH,CAAU,UAErB,kCAAC,MACE,CAAA,SAAA,CAAA,CAACK,GAAa,CAACC,GAAW,KAAK,UAAUF,EAAM,KAAM,CAAC,EACtDC,GAAa,aACbC,GAAW,UAAA,CACd,CAAA,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DetailsDialog.cjs.js","sources":["../../../../../src/components/DetailsDialog/DetailsDialog.tsx"],"sourcesContent":["import { toast } from 'react-toastify'\nimport { useGetEntityQuery } from '@shared/api'\nimport { Dialog } from '@ynput/ayon-react-components'\n\nexport interface DetailsDialogProps {\n  projectName?: string\n  entityType: string\n  entityIds: string[]\n  visible: boolean\n  onHide: () => void\n}\n\nexport const DetailsDialog = ({\n  projectName,\n  entityType,\n  entityIds,\n  visible,\n  onHide,\n}: DetailsDialogProps) => {\n  const {\n    data = {},\n    isLoading,\n    isError,\n    error,\n  } = useGetEntityQuery(\n    { projectName, entityType: entityType, entityId: entityIds[0] },\n    { skip: !visible },\n  )\n\n  if (isLoading)\n    if (isError) {\n      toast.error(`Unable to load detail. ${error}`)\n    }\n\n  if (!visible || data.length < 1) return null\n\n  return (\n    <Dialog\n      isOpen={true}\n      onClose={onHide}\n      size=\"lg\"\n      style={{ width: '50vw' }}\n      header={`${entityType} detail`}\n    >\n      <pre>\n        {!isLoading && !isError && JSON.stringify(data, null, 2)}\n        {isLoading && 'loading...'}\n        {isError && 'error...'}\n      </pre>\n    </Dialog>\n  )\n}\n"],"names":["DetailsDialog","projectName","entityType","entityIds","visible","onHide","data","isLoading","isError","error","useGetEntityQuery","toast","jsx","Dialog"],"mappings":"mmJAYaA,EAAgB,CAAC,CAC5B,YAAAC,EACA,WAAAC,EACA,UAAAC,EACA,QAAAC,EACA,OAAAC,CACF,IAA0B,CAClB,KAAA,CACJ,KAAAC,EAAO,CAAC,EACR,UAAAC,EACA,QAAAC,EACA,MAAAC,CAAA,EACEC,EAAA,kBACF,CAAE,YAAAT,EAAa,WAAAC,EAAwB,SAAUC,EAAU,CAAC,CAAE,EAC9D,CAAE,KAAM,CAACC,CAAQ,CACnB,EAOA,OALIG,GACEC,GACIG,EAAAA,MAAA,MAAM,0BAA0BF,CAAK,EAAE,EAG7C,CAACL,GAAWE,EAAK,OAAS,EAAU,KAGtCM,EAAA,kBAAA,IAACC,EAAA,OAAA,CACC,OAAQ,GACR,QAASR,EACT,KAAK,KACL,MAAO,CAAE,MAAO,MAAO,EACvB,OAAQ,GAAGH,CAAU,UAErB,kCAAC,MACE,CAAA,SAAA,CAAA,CAACK,GAAa,CAACC,GAAW,KAAK,UAAUF,EAAM,KAAM,CAAC,EACtDC,GAAa,aACbC,GAAW,UAAA,CACd,CAAA,CAAA,CACF,CAEJ"}

package/dist/shared/src/components/DetailsDialog/DetailsDialog.es.js

@@ -50,6 +50,8 @@ import "../../api/queries/attributes/getAttributes.es.js";
 import "../../api/queries/attributes/updateAttributes.es.js";
 import "../../api/queries/authentication/getAuthentication.es.js";
 import "../../api/queries/cloud/cloud.es.js";
+import "../../api/queries/config/getConfig.es.js";
+import "../../api/queries/config/updateConfig.es.js";
 import { useGetEntityQuery as d } from "../../api/queries/entities/getEntity.es.js";
 import "../../api/queries/entities/getEntityPanel.es.js";
 import "../../api/queries/entities/updateEntity.es.js";
@@ -84,7 +86,7 @@ import "../../api/queries/views/updateViews.es.js";
 import "../../api/queries/watchers/getWatchers.es.js";
 import "../../api/queries/uris/getUris.es.js";
 import { Dialog as f } from "@ynput/ayon-react-components";
-const Mr = ({
+const Vr = ({
   projectName: e,
   entityType: o,
   entityIds: s,
@@ -117,6 +119,6 @@ const Mr = ({
   );
 };
 export {
-  Mr as DetailsDialog
+  Vr as DetailsDialog
 };
 //# sourceMappingURL=DetailsDialog.es.js.map

package/dist/shared/src/components/DetailsDialog/DetailsDialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsDialog.es.js","sources":["../../../../../src/components/DetailsDialog/DetailsDialog.tsx"],"sourcesContent":["import { toast } from 'react-toastify'\nimport { useGetEntityQuery } from '@shared/api'\nimport { Dialog } from '@ynput/ayon-react-components'\n\nexport interface DetailsDialogProps {\n  projectName?: string\n  entityType: string\n  entityIds: string[]\n  visible: boolean\n  onHide: () => void\n}\n\nexport const DetailsDialog = ({\n  projectName,\n  entityType,\n  entityIds,\n  visible,\n  onHide,\n}: DetailsDialogProps) => {\n  const {\n    data = {},\n    isLoading,\n    isError,\n    error,\n  } = useGetEntityQuery(\n    { projectName, entityType: entityType, entityId: entityIds[0] },\n    { skip: !visible },\n  )\n\n  if (isLoading)\n    if (isError) {\n      toast.error(`Unable to load detail. ${error}`)\n    }\n\n  if (!visible || data.length < 1) return null\n\n  return (\n    <Dialog\n      isOpen={true}\n      onClose={onHide}\n      size=\"lg\"\n      style={{ width: '50vw' }}\n      header={`${entityType} detail`}\n    >\n      <pre>\n        {!isLoading && !isError && JSON.stringify(data, null, 2)}\n        {isLoading && 'loading...'}\n        {isError && 'error...'}\n      </pre>\n    </Dialog>\n  )\n}\n"],"names":["DetailsDialog","projectName","entityType","entityIds","visible","onHide","data","isLoading","isError","error","useGetEntityQuery","toast","jsx","Dialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAMA,KAAgB,CAAC;AAAA,EAC5B,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AACF,MAA0B;AAClB,QAAA;AAAA,IACJ,MAAAC,IAAO,CAAC;AAAA,IACR,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,IACEC;AAAA,IACF,EAAE,aAAAT,GAAa,YAAAC,GAAwB,UAAUC,EAAU,CAAC,EAAE;AAAA,IAC9D,EAAE,MAAM,CAACC,EAAQ;AAAA,EACnB;AAOA,SALIG,KACEC,KACIG,EAAA,MAAM,0BAA0BF,CAAK,EAAE,GAG7C,CAACL,KAAWE,EAAK,SAAS,IAAU,OAGtCM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAASR;AAAA,MACT,MAAK;AAAA,MACL,OAAO,EAAE,OAAO,OAAO;AAAA,MACvB,QAAQ,GAAGH,CAAU;AAAA,MAErB,iCAAC,OACE,EAAA,UAAA;AAAA,QAAA,CAACK,KAAa,CAACC,KAAW,KAAK,UAAUF,GAAM,MAAM,CAAC;AAAA,QACtDC,KAAa;AAAA,QACbC,KAAW;AAAA,MAAA,EACd,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"DetailsDialog.es.js","sources":["../../../../../src/components/DetailsDialog/DetailsDialog.tsx"],"sourcesContent":["import { toast } from 'react-toastify'\nimport { useGetEntityQuery } from '@shared/api'\nimport { Dialog } from '@ynput/ayon-react-components'\n\nexport interface DetailsDialogProps {\n  projectName?: string\n  entityType: string\n  entityIds: string[]\n  visible: boolean\n  onHide: () => void\n}\n\nexport const DetailsDialog = ({\n  projectName,\n  entityType,\n  entityIds,\n  visible,\n  onHide,\n}: DetailsDialogProps) => {\n  const {\n    data = {},\n    isLoading,\n    isError,\n    error,\n  } = useGetEntityQuery(\n    { projectName, entityType: entityType, entityId: entityIds[0] },\n    { skip: !visible },\n  )\n\n  if (isLoading)\n    if (isError) {\n      toast.error(`Unable to load detail. ${error}`)\n    }\n\n  if (!visible || data.length < 1) return null\n\n  return (\n    <Dialog\n      isOpen={true}\n      onClose={onHide}\n      size=\"lg\"\n      style={{ width: '50vw' }}\n      header={`${entityType} detail`}\n    >\n      <pre>\n        {!isLoading && !isError && JSON.stringify(data, null, 2)}\n        {isLoading && 'loading...'}\n        {isError && 'error...'}\n      </pre>\n    </Dialog>\n  )\n}\n"],"names":["DetailsDialog","projectName","entityType","entityIds","visible","onHide","data","isLoading","isError","error","useGetEntityQuery","toast","jsx","Dialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAMA,KAAgB,CAAC;AAAA,EAC5B,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AACF,MAA0B;AAClB,QAAA;AAAA,IACJ,MAAAC,IAAO,CAAC;AAAA,IACR,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,IACEC;AAAA,IACF,EAAE,aAAAT,GAAa,YAAAC,GAAwB,UAAUC,EAAU,CAAC,EAAE;AAAA,IAC9D,EAAE,MAAM,CAACC,EAAQ;AAAA,EACnB;AAOA,SALIG,KACEC,KACIG,EAAA,MAAM,0BAA0BF,CAAK,EAAE,GAG7C,CAACL,KAAWE,EAAK,SAAS,IAAU,OAGtCM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAASR;AAAA,MACT,MAAK;AAAA,MACL,OAAO,EAAE,OAAO,OAAO;AAAA,MACvB,QAAQ,GAAGH,CAAU;AAAA,MAErB,iCAAC,OACE,EAAA,UAAA;AAAA,QAAA,CAACK,KAAa,CAACC,KAAW,KAAK,UAAUF,GAAM,MAAM,CAAC;AAAA,QACtDC,KAAa;AAAA,QACbC,KAAW;AAAA,MAAA,EACd,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/shared/src/components/DetailsPanelAttributes/components/RenderFieldWidget.cjs.js

@@ -1,4 +1,4 @@
-"use strict";const s=require("../../../../../_virtual/jsx-runtime.cjs.js"),x=require("styled-components"),S=require("../../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js"),W=require("../../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js"),b=require("../../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js"),w=require("../../../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js");require("react");require("../../../context/RemoteModulesContext.cjs.js");require("../../../../../_virtual/runtime.cjs.js");require("../../../../../_virtual/semver.cjs.js");const y=require("../../../hooks/useScopedStatuses.cjs.js");require("react-toastify");require("../../../api/base/client.cjs.js");require("../../../api/generated/graphql.cjs.js");require("../../../api/generated/graphqlLinks.cjs.js");require("../../../api/generated/access.cjs.js");require("../../../api/generated/actions.cjs.js");require("../../../api/generated/activityFeed.cjs.js");require("../../../api/generated/addons.cjs.js");require("../../../api/generated/anatomy.cjs.js");require("../../../api/generated/attributes.cjs.js");require("../../../api/generated/authentication.cjs.js");require("../../../api/generated/bundles.cjs.js");require("../../../api/generated/configuration.cjs.js");require("../../../api/generated/desktop.cjs.js");require("../../../api/generated/entityLists.cjs.js");require("../../../api/generated/events.cjs.js");require("../../../api/generated/files.cjs.js");require("../../../api/generated/folders.cjs.js");require("../../../api/generated/inbox.cjs.js");require("../../../api/generated/links.cjs.js");require("../../../api/generated/market.cjs.js");require("../../../api/generated/onboarding.cjs.js");require("../../../api/generated/operations.cjs.js");require("../../../api/generated/products.cjs.js");require("../../../api/generated/projectDashboard.cjs.js");require("../../../api/generated/projects.cjs.js");require("../../../api/generated/reviewables.cjs.js");require("../../../api/generated/services.cjs.js");require("../../../api/generated/system.cjs.js");require("../../../api/generated/tasks.cjs.js");require("../../../api/generated/teams.cjs.js");require("../../../api/generated/thumbnails.cjs.js");require("../../../api/generated/uRIs.cjs.js");require("../../../api/generated/users.cjs.js");require("../../../api/generated/versions.cjs.js");require("../../../api/generated/workfiles.cjs.js");require("../../../api/generated/ynputCloud.cjs.js");require("../../../api/generated/grouping.cjs.js");require("../../../api/generated/views.cjs.js");require("../../../api/queries/actions/getActions.cjs.js");require("../../../api/queries/activities/getActivities.cjs.js");require("../../../api/queries/activities/updateActivities.cjs.js");require("../../../api/queries/activities/updateReaction.cjs.js");require("../../../api/queries/activities/getMentions.cjs.js");require("../../../api/queries/activities/getCategories.cjs.js");require("../../../api/queries/addons/getAddons.cjs.js");require("../../../api/queries/addons/updateAddons.cjs.js");require("../../../api/queries/attributes/getAttributes.cjs.js");require("../../../api/queries/attributes/updateAttributes.cjs.js");require("../../../api/queries/authentication/getAuthentication.cjs.js");require("../../../api/queries/cloud/cloud.cjs.js");require("../../../api/queries/entities/getEntity.cjs.js");require("../../../api/queries/entities/getEntityPanel.cjs.js");require("../../../api/queries/entities/updateEntity.cjs.js");require("../../../api/queries/entityLists/getLists.cjs.js");require("../../../api/queries/entityLists/updateLists.cjs.js");require("../../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../../api/queries/entityLists/listFolders.cjs.js");require("../../../api/queries/folders/getFolders.cjs.js");require("../../../api/queries/grouping/getGrouping.cjs.js");require("../../../api/queries/links/updateLinks.cjs.js");require("../../../api/queries/links/getLinks.cjs.js");require("../../../api/queries/links/getEntityLinks.cjs.js");require("../../../api/queries/overview/getOverview.cjs.js");require("../../../api/queries/overview/updateOverview.cjs.js");require("../../../api/queries/versions/getVersionsProducts.cjs.js");require("../../../api/queries/permissions/getPermissions.cjs.js");require("../../../api/queries/products/createProduct.cjs.js");require("../../../api/queries/project/getProject.cjs.js");require("../../../api/queries/project/updateProject.cjs.js");require("../../../api/queries/review/getReview.cjs.js");require("../../../api/queries/review/updateReview.cjs.js");require("../../../api/queries/share/share.cjs.js");require("../../../api/queries/system/getSystem.cjs.js");require("../../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../../api/queries/users/getUsers.cjs.js");require("../../../api/queries/users/updateUsers.cjs.js");require("../../../api/queries/users/guests.cjs.js");require("../../../api/queries/versions/updateVersions.cjs.js");require("../../../api/queries/views/getViews.cjs.js");require("../../../api/queries/views/updateViews.cjs.js");require("../../../api/queries/watchers/getWatchers.cjs.js");require("../../../api/queries/uris/getUris.cjs.js");require("../../../context/DetailsPanelContext.cjs.js");require("../../../context/ThumbnailUploaderContext.cjs.js");require("../../../context/SettingsPanelContext.cjs.js");require("../../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../../context/pip/PiPWrapper.cjs.js");require("../../../context/AddonProjectContext.cjs.js");require("../../../context/AddonContext.cjs.js");require("../../../context/PowerpackContext.cjs.js");require("../../../context/MoveEntityContext.cjs.js");require("../../../context/MenuContext.cjs.js");require("../../../context/WebsocketContext.cjs.js");require("../../../context/GlobalContext.cjs.js");require("../../../context/ProjectContext.cjs.js");require("../../../context/ProjectFoldersContext.cjs.js");require("../../../context/UriContext.cjs.js");require("react-redux");require("custom-protocol-check");require("../../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");const E=x.div`
+"use strict";const s=require("../../../../../_virtual/jsx-runtime.cjs.js"),x=require("styled-components"),S=require("../../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js"),W=require("../../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js"),b=require("../../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js"),w=require("../../../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js");require("react");require("../../../context/RemoteModulesContext.cjs.js");require("../../../../../_virtual/runtime.cjs.js");require("../../../../../_virtual/semver.cjs.js");const y=require("../../../hooks/useScopedStatuses.cjs.js");require("react-toastify");require("../../../api/base/client.cjs.js");require("../../../api/generated/graphql.cjs.js");require("../../../api/generated/graphqlLinks.cjs.js");require("../../../api/generated/access.cjs.js");require("../../../api/generated/actions.cjs.js");require("../../../api/generated/activityFeed.cjs.js");require("../../../api/generated/addons.cjs.js");require("../../../api/generated/anatomy.cjs.js");require("../../../api/generated/attributes.cjs.js");require("../../../api/generated/authentication.cjs.js");require("../../../api/generated/bundles.cjs.js");require("../../../api/generated/configuration.cjs.js");require("../../../api/generated/desktop.cjs.js");require("../../../api/generated/entityLists.cjs.js");require("../../../api/generated/events.cjs.js");require("../../../api/generated/files.cjs.js");require("../../../api/generated/folders.cjs.js");require("../../../api/generated/inbox.cjs.js");require("../../../api/generated/links.cjs.js");require("../../../api/generated/market.cjs.js");require("../../../api/generated/onboarding.cjs.js");require("../../../api/generated/operations.cjs.js");require("../../../api/generated/products.cjs.js");require("../../../api/generated/projectDashboard.cjs.js");require("../../../api/generated/projects.cjs.js");require("../../../api/generated/reviewables.cjs.js");require("../../../api/generated/services.cjs.js");require("../../../api/generated/system.cjs.js");require("../../../api/generated/tasks.cjs.js");require("../../../api/generated/teams.cjs.js");require("../../../api/generated/thumbnails.cjs.js");require("../../../api/generated/uRIs.cjs.js");require("../../../api/generated/users.cjs.js");require("../../../api/generated/versions.cjs.js");require("../../../api/generated/workfiles.cjs.js");require("../../../api/generated/ynputCloud.cjs.js");require("../../../api/generated/grouping.cjs.js");require("../../../api/generated/views.cjs.js");require("../../../api/queries/actions/getActions.cjs.js");require("../../../api/queries/activities/getActivities.cjs.js");require("../../../api/queries/activities/updateActivities.cjs.js");require("../../../api/queries/activities/updateReaction.cjs.js");require("../../../api/queries/activities/getMentions.cjs.js");require("../../../api/queries/activities/getCategories.cjs.js");require("../../../api/queries/addons/getAddons.cjs.js");require("../../../api/queries/addons/updateAddons.cjs.js");require("../../../api/queries/attributes/getAttributes.cjs.js");require("../../../api/queries/attributes/updateAttributes.cjs.js");require("../../../api/queries/authentication/getAuthentication.cjs.js");require("../../../api/queries/cloud/cloud.cjs.js");require("../../../api/queries/config/getConfig.cjs.js");require("../../../api/queries/config/updateConfig.cjs.js");require("../../../api/queries/entities/getEntity.cjs.js");require("../../../api/queries/entities/getEntityPanel.cjs.js");require("../../../api/queries/entities/updateEntity.cjs.js");require("../../../api/queries/entityLists/getLists.cjs.js");require("../../../api/queries/entityLists/updateLists.cjs.js");require("../../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../../api/queries/entityLists/listFolders.cjs.js");require("../../../api/queries/folders/getFolders.cjs.js");require("../../../api/queries/grouping/getGrouping.cjs.js");require("../../../api/queries/links/updateLinks.cjs.js");require("../../../api/queries/links/getLinks.cjs.js");require("../../../api/queries/links/getEntityLinks.cjs.js");require("../../../api/queries/overview/getOverview.cjs.js");require("../../../api/queries/overview/updateOverview.cjs.js");require("../../../api/queries/versions/getVersionsProducts.cjs.js");require("../../../api/queries/permissions/getPermissions.cjs.js");require("../../../api/queries/products/createProduct.cjs.js");require("../../../api/queries/project/getProject.cjs.js");require("../../../api/queries/project/updateProject.cjs.js");require("../../../api/queries/review/getReview.cjs.js");require("../../../api/queries/review/updateReview.cjs.js");require("../../../api/queries/share/share.cjs.js");require("../../../api/queries/system/getSystem.cjs.js");require("../../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../../api/queries/users/getUsers.cjs.js");require("../../../api/queries/users/updateUsers.cjs.js");require("../../../api/queries/users/guests.cjs.js");require("../../../api/queries/versions/updateVersions.cjs.js");require("../../../api/queries/views/getViews.cjs.js");require("../../../api/queries/views/updateViews.cjs.js");require("../../../api/queries/watchers/getWatchers.cjs.js");require("../../../api/queries/uris/getUris.cjs.js");require("../../../context/DetailsPanelContext.cjs.js");require("../../../context/ThumbnailUploaderContext.cjs.js");require("../../../context/SettingsPanelContext.cjs.js");require("../../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../../context/pip/PiPWrapper.cjs.js");require("../../../context/AddonProjectContext.cjs.js");require("../../../context/AddonContext.cjs.js");require("../../../context/PowerpackContext.cjs.js");require("../../../context/MoveEntityContext.cjs.js");require("../../../context/MenuContext.cjs.js");require("../../../context/WebsocketContext.cjs.js");require("../../../context/GlobalContext.cjs.js");require("../../../context/ProjectContext.cjs.js");require("../../../context/ProjectFoldersContext.cjs.js");require("../../../context/UriContext.cjs.js");require("react-redux");require("custom-protocol-check");require("../../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");const E=x.div`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/shared/src/components/DetailsPanelAttributes/components/RenderFieldWidget.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderFieldWidget.cjs.js","sources":["../../../../../../src/components/DetailsPanelAttributes/components/RenderFieldWidget.tsx"],"sourcesContent":["import { FC } from 'react'\nimport styled from 'styled-components'\nimport type { CellValue } from '@shared/containers/ProjectTreeTable/widgets/CellWidget'\nimport { TextWidget } from '@shared/containers/ProjectTreeTable/widgets/TextWidget'\nimport { BooleanWidget } from '@shared/containers/ProjectTreeTable/widgets/BooleanWidget'\nimport { DateWidget } from '@shared/containers/ProjectTreeTable/widgets/DateWidget'\nimport { EnumWidget } from '@shared/containers/ProjectTreeTable/widgets/EnumWidget'\nimport { useScopedStatuses } from '@shared/hooks'\n// Import AttributeField as a type to avoid runtime circular dependency with DetailsPanelAttributesEditor\nimport type { AttributeField } from '../DetailsPanelAttributesEditor'\nimport type { DetailsPanelEntityData } from '@shared/api'\n\nconst FieldValueText = styled.div`\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: right;\n\n  input {\n    text-align: left;\n  }\n`\n\nconst StyledEnumWidget = styled(EnumWidget)`\n  .enum,\n  .edit-trigger {\n    &:hover {\n      background-color: unset;\n    }\n  }\n  &:hover {\n    background-color: unset;\n  }\n`\n\ninterface RenderFieldWidgetProps {\n  field: AttributeField\n  value: any\n  isEditing: boolean\n  isReadOnly: boolean\n  isMixed: boolean\n  onChange: (fieldName: string, value: CellValue | CellValue[]) => void\n  onCancelEdit: () => void\n  entities?: DetailsPanelEntityData[]\n  entityType?: string\n}\n\nconst RenderFieldWidget: FC<RenderFieldWidgetProps> = ({\n  field,\n  value,\n  isEditing,\n  isReadOnly,\n  isMixed,\n  onChange,\n  onCancelEdit,\n  entities = [],\n  entityType = 'task',\n}) => {\n  const { type } = field.data\n  const widgetCommonProps = {\n    isEditing: isEditing && !isReadOnly,\n    isInherited: false,\n    onChange: (newValue: CellValue | CellValue[]) => onChange(field.name, newValue),\n  }\n\n  // Format the value for display\n  let displayValue = value === null || value === undefined ? '' : value\n  const labelValue = field.data.title || field.name\n\n  // Handle different field types\n  switch (true) {\n    case type === 'boolean':\n      return (\n        <BooleanWidget\n          value={Boolean(displayValue)}\n          {...widgetCommonProps}\n          style={{ margin: 0 }}\n          isReadOnly={isReadOnly}\n        />\n      )\n\n    case type === 'datetime':\n      return (\n        <DateWidget\n          value={displayValue}\n          {...widgetCommonProps}\n          isEditing\n          onCancelEdit={onCancelEdit}\n          style={{ width: 'fit-content' }}\n          autoFocus={false}\n        />\n      )\n\n    case !!field.data.enum: {\n      const isListType = type?.includes('list')\n      let valueArray = []\n\n      if (isListType) {\n        valueArray = Array.isArray(displayValue) ? displayValue : []\n      } else if (isMixed) {\n        valueArray = []\n      } else {\n        valueArray = [displayValue]\n      }\n\n      // Use scoped statuses if the field name is 'status'\n      let enumOptions = field.data.enum || []\n      if (field.name === 'status' && entities.length > 0) {\n        const scopedStatuses = useScopedStatuses(\n          entities.map((entity) => entity.projectName),\n          [entityType],\n        )\n        if (scopedStatuses && scopedStatuses.length > 0) {\n          enumOptions = scopedStatuses.map((status) => ({\n            value: status.name,\n            label: status.name,\n            icon: status.icon,\n            color: status.color,\n          }))\n        }\n      }\n\n      if (field.allowNone && !!valueArray.length && !isListType) {\n        // Check if current field has a value (for single value fields)\n        const hasCurrentValue = displayValue && displayValue !== ''\n        if (hasCurrentValue) {\n          enumOptions = [\n            { value: '', label: `No ${field.data.title || field.name}` },\n            ...enumOptions,\n          ]\n        }\n      }\n\n      return (\n        <StyledEnumWidget\n          value={valueArray}\n          options={enumOptions}\n          type={type}\n          pt={{\n            template: {\n              style: { height: 32 },\n              className: 'enum',\n            },\n          }}\n          placeholder={isMixed ? `Mixed ${labelValue}` : `Select ${labelValue}...`}\n          onCancelEdit={onCancelEdit}\n          align=\"right\"\n          isReadOnly={isReadOnly}\n          enableCustomValues={field.enableCustomValues ?? false}\n          search={field.enableSearch ?? false}\n          sortBySelected={!enumOptions}\n          {...widgetCommonProps}\n        />\n      )\n    }\n\n    case type === 'string' || type === 'integer' || type === 'float':\n    default:\n      return (\n        <FieldValueText>\n          <TextWidget\n            value={displayValue.toString()}\n            onCancelEdit={onCancelEdit}\n            type={type as 'string' | 'integer' | 'float'}\n            {...widgetCommonProps}\n          />\n        </FieldValueText>\n      )\n  }\n}\n\nexport default RenderFieldWidget\n"],"names":["FieldValueText","styled","StyledEnumWidget","EnumWidget","RenderFieldWidget","field","value","isEditing","isReadOnly","isMixed","onChange","onCancelEdit","entities","entityType","type","widgetCommonProps","newValue","displayValue","labelValue","jsx","BooleanWidget","DateWidget","isListType","valueArray","enumOptions","scopedStatuses","useScopedStatuses","entity","status","TextWidget"],"mappings":"gmMAYA,MAAMA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAmBD,EAAOE,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBpCC,EAAgD,CAAC,CACrD,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,WAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EAAW,CAAC,EACZ,WAAAC,EAAa,MACf,IAAM,CACE,KAAA,CAAE,KAAAC,GAAST,EAAM,KACjBU,EAAoB,CACxB,UAAWR,GAAa,CAACC,EACzB,YAAa,GACb,SAAWQ,GAAsCN,EAASL,EAAM,KAAMW,CAAQ,CAChF,EAGA,IAAIC,EAAeX,GAAwC,GAC3D,MAAMY,EAAab,EAAM,KAAK,OAASA,EAAM,KAG7C,OAAQ,GAAM,CACZ,KAAKS,IAAS,UAEV,OAAAK,EAAA,kBAAA,IAACC,EAAA,cAAA,CACC,MAAO,EAAQH,EACd,GAAGF,EACJ,MAAO,CAAE,OAAQ,CAAE,EACnB,WAAAP,CAAA,CACF,EAGJ,KAAKM,IAAS,WAEV,OAAAK,EAAA,kBAAA,IAACE,EAAA,WAAA,CACC,MAAOJ,EACN,GAAGF,EACJ,UAAS,GACT,aAAAJ,EACA,MAAO,CAAE,MAAO,aAAc,EAC9B,UAAW,EAAA,CACb,EAGJ,IAAK,CAAC,CAACN,EAAM,KAAK,KAAM,CAChB,MAAAiB,EAAaR,GAAA,YAAAA,EAAM,SAAS,QAClC,IAAIS,EAAa,CAAC,EAEdD,EACFC,EAAa,MAAM,QAAQN,CAAY,EAAIA,EAAe,CAAC,EAClDR,EACTc,EAAa,CAAC,EAEdA,EAAa,CAACN,CAAY,EAI5B,IAAIO,EAAcnB,EAAM,KAAK,MAAQ,CAAC,EACtC,GAAIA,EAAM,OAAS,UAAYO,EAAS,OAAS,EAAG,CAClD,MAAMa,EAAiBC,EAAA,kBACrBd,EAAS,IAAKe,GAAWA,EAAO,WAAW,EAC3C,CAACd,CAAU,CACb,EACIY,GAAkBA,EAAe,OAAS,IAC9BD,EAAAC,EAAe,IAAKG,IAAY,CAC5C,MAAOA,EAAO,KACd,MAAOA,EAAO,KACd,KAAMA,EAAO,KACb,MAAOA,EAAO,KAAA,EACd,EACJ,CAGF,OAAIvB,EAAM,WAAekB,EAAW,QAAU,CAACD,GAErBL,GAAgBA,IAAiB,KAEzCO,EAAA,CACZ,CAAE,MAAO,GAAI,MAAO,MAAMnB,EAAM,KAAK,OAASA,EAAM,IAAI,EAAG,EAC3D,GAAGmB,CACL,GAKFL,EAAA,kBAAA,IAACjB,EAAA,CACC,MAAOqB,EACP,QAASC,EACT,KAAAV,EACA,GAAI,CACF,SAAU,CACR,MAAO,CAAE,OAAQ,EAAG,EACpB,UAAW,MAAA,CAEf,EACA,YAAaL,EAAU,SAASS,CAAU,GAAK,UAAUA,CAAU,MACnE,aAAAP,EACA,MAAM,QACN,WAAAH,EACA,mBAAoBH,EAAM,oBAAsB,GAChD,OAAQA,EAAM,cAAgB,GAC9B,eAAgB,CAACmB,EAChB,GAAGT,CAAA,CACN,CAAA,CAIJ,KAAKD,IAAS,UAAYA,IAAS,WAAaA,IAAS,SACzD,QACE,+BACGd,EACC,CAAA,SAAAmB,EAAA,kBAAA,IAACU,EAAA,WAAA,CACC,MAAOZ,EAAa,SAAS,EAC7B,aAAAN,EACA,KAAAG,EACC,GAAGC,CAAA,CAAA,EAER,CAAA,CAGR"}
+{"version":3,"file":"RenderFieldWidget.cjs.js","sources":["../../../../../../src/components/DetailsPanelAttributes/components/RenderFieldWidget.tsx"],"sourcesContent":["import { FC } from 'react'\nimport styled from 'styled-components'\nimport type { CellValue } from '@shared/containers/ProjectTreeTable/widgets/CellWidget'\nimport { TextWidget } from '@shared/containers/ProjectTreeTable/widgets/TextWidget'\nimport { BooleanWidget } from '@shared/containers/ProjectTreeTable/widgets/BooleanWidget'\nimport { DateWidget } from '@shared/containers/ProjectTreeTable/widgets/DateWidget'\nimport { EnumWidget } from '@shared/containers/ProjectTreeTable/widgets/EnumWidget'\nimport { useScopedStatuses } from '@shared/hooks'\n// Import AttributeField as a type to avoid runtime circular dependency with DetailsPanelAttributesEditor\nimport type { AttributeField } from '../DetailsPanelAttributesEditor'\nimport type { DetailsPanelEntityData } from '@shared/api'\n\nconst FieldValueText = styled.div`\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: right;\n\n  input {\n    text-align: left;\n  }\n`\n\nconst StyledEnumWidget = styled(EnumWidget)`\n  .enum,\n  .edit-trigger {\n    &:hover {\n      background-color: unset;\n    }\n  }\n  &:hover {\n    background-color: unset;\n  }\n`\n\ninterface RenderFieldWidgetProps {\n  field: AttributeField\n  value: any\n  isEditing: boolean\n  isReadOnly: boolean\n  isMixed: boolean\n  onChange: (fieldName: string, value: CellValue | CellValue[]) => void\n  onCancelEdit: () => void\n  entities?: DetailsPanelEntityData[]\n  entityType?: string\n}\n\nconst RenderFieldWidget: FC<RenderFieldWidgetProps> = ({\n  field,\n  value,\n  isEditing,\n  isReadOnly,\n  isMixed,\n  onChange,\n  onCancelEdit,\n  entities = [],\n  entityType = 'task',\n}) => {\n  const { type } = field.data\n  const widgetCommonProps = {\n    isEditing: isEditing && !isReadOnly,\n    isInherited: false,\n    onChange: (newValue: CellValue | CellValue[]) => onChange(field.name, newValue),\n  }\n\n  // Format the value for display\n  let displayValue = value === null || value === undefined ? '' : value\n  const labelValue = field.data.title || field.name\n\n  // Handle different field types\n  switch (true) {\n    case type === 'boolean':\n      return (\n        <BooleanWidget\n          value={Boolean(displayValue)}\n          {...widgetCommonProps}\n          style={{ margin: 0 }}\n          isReadOnly={isReadOnly}\n        />\n      )\n\n    case type === 'datetime':\n      return (\n        <DateWidget\n          value={displayValue}\n          {...widgetCommonProps}\n          isEditing\n          onCancelEdit={onCancelEdit}\n          style={{ width: 'fit-content' }}\n          autoFocus={false}\n        />\n      )\n\n    case !!field.data.enum: {\n      const isListType = type?.includes('list')\n      let valueArray = []\n\n      if (isListType) {\n        valueArray = Array.isArray(displayValue) ? displayValue : []\n      } else if (isMixed) {\n        valueArray = []\n      } else {\n        valueArray = [displayValue]\n      }\n\n      // Use scoped statuses if the field name is 'status'\n      let enumOptions = field.data.enum || []\n      if (field.name === 'status' && entities.length > 0) {\n        const scopedStatuses = useScopedStatuses(\n          entities.map((entity) => entity.projectName),\n          [entityType],\n        )\n        if (scopedStatuses && scopedStatuses.length > 0) {\n          enumOptions = scopedStatuses.map((status) => ({\n            value: status.name,\n            label: status.name,\n            icon: status.icon,\n            color: status.color,\n          }))\n        }\n      }\n\n      if (field.allowNone && !!valueArray.length && !isListType) {\n        // Check if current field has a value (for single value fields)\n        const hasCurrentValue = displayValue && displayValue !== ''\n        if (hasCurrentValue) {\n          enumOptions = [\n            { value: '', label: `No ${field.data.title || field.name}` },\n            ...enumOptions,\n          ]\n        }\n      }\n\n      return (\n        <StyledEnumWidget\n          value={valueArray}\n          options={enumOptions}\n          type={type}\n          pt={{\n            template: {\n              style: { height: 32 },\n              className: 'enum',\n            },\n          }}\n          placeholder={isMixed ? `Mixed ${labelValue}` : `Select ${labelValue}...`}\n          onCancelEdit={onCancelEdit}\n          align=\"right\"\n          isReadOnly={isReadOnly}\n          enableCustomValues={field.enableCustomValues ?? false}\n          search={field.enableSearch ?? false}\n          sortBySelected={!enumOptions}\n          {...widgetCommonProps}\n        />\n      )\n    }\n\n    case type === 'string' || type === 'integer' || type === 'float':\n    default:\n      return (\n        <FieldValueText>\n          <TextWidget\n            value={displayValue.toString()}\n            onCancelEdit={onCancelEdit}\n            type={type as 'string' | 'integer' | 'float'}\n            {...widgetCommonProps}\n          />\n        </FieldValueText>\n      )\n  }\n}\n\nexport default RenderFieldWidget\n"],"names":["FieldValueText","styled","StyledEnumWidget","EnumWidget","RenderFieldWidget","field","value","isEditing","isReadOnly","isMixed","onChange","onCancelEdit","entities","entityType","type","widgetCommonProps","newValue","displayValue","labelValue","jsx","BooleanWidget","DateWidget","isListType","valueArray","enumOptions","scopedStatuses","useScopedStatuses","entity","status","TextWidget"],"mappings":"mtMAYA,MAAMA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAmBD,EAAOE,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBpCC,EAAgD,CAAC,CACrD,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,WAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EAAW,CAAC,EACZ,WAAAC,EAAa,MACf,IAAM,CACE,KAAA,CAAE,KAAAC,GAAST,EAAM,KACjBU,EAAoB,CACxB,UAAWR,GAAa,CAACC,EACzB,YAAa,GACb,SAAWQ,GAAsCN,EAASL,EAAM,KAAMW,CAAQ,CAChF,EAGA,IAAIC,EAAeX,GAAwC,GAC3D,MAAMY,EAAab,EAAM,KAAK,OAASA,EAAM,KAG7C,OAAQ,GAAM,CACZ,KAAKS,IAAS,UAEV,OAAAK,EAAA,kBAAA,IAACC,EAAA,cAAA,CACC,MAAO,EAAQH,EACd,GAAGF,EACJ,MAAO,CAAE,OAAQ,CAAE,EACnB,WAAAP,CAAA,CACF,EAGJ,KAAKM,IAAS,WAEV,OAAAK,EAAA,kBAAA,IAACE,EAAA,WAAA,CACC,MAAOJ,EACN,GAAGF,EACJ,UAAS,GACT,aAAAJ,EACA,MAAO,CAAE,MAAO,aAAc,EAC9B,UAAW,EAAA,CACb,EAGJ,IAAK,CAAC,CAACN,EAAM,KAAK,KAAM,CAChB,MAAAiB,EAAaR,GAAA,YAAAA,EAAM,SAAS,QAClC,IAAIS,EAAa,CAAC,EAEdD,EACFC,EAAa,MAAM,QAAQN,CAAY,EAAIA,EAAe,CAAC,EAClDR,EACTc,EAAa,CAAC,EAEdA,EAAa,CAACN,CAAY,EAI5B,IAAIO,EAAcnB,EAAM,KAAK,MAAQ,CAAC,EACtC,GAAIA,EAAM,OAAS,UAAYO,EAAS,OAAS,EAAG,CAClD,MAAMa,EAAiBC,EAAA,kBACrBd,EAAS,IAAKe,GAAWA,EAAO,WAAW,EAC3C,CAACd,CAAU,CACb,EACIY,GAAkBA,EAAe,OAAS,IAC9BD,EAAAC,EAAe,IAAKG,IAAY,CAC5C,MAAOA,EAAO,KACd,MAAOA,EAAO,KACd,KAAMA,EAAO,KACb,MAAOA,EAAO,KAAA,EACd,EACJ,CAGF,OAAIvB,EAAM,WAAekB,EAAW,QAAU,CAACD,GAErBL,GAAgBA,IAAiB,KAEzCO,EAAA,CACZ,CAAE,MAAO,GAAI,MAAO,MAAMnB,EAAM,KAAK,OAASA,EAAM,IAAI,EAAG,EAC3D,GAAGmB,CACL,GAKFL,EAAA,kBAAA,IAACjB,EAAA,CACC,MAAOqB,EACP,QAASC,EACT,KAAAV,EACA,GAAI,CACF,SAAU,CACR,MAAO,CAAE,OAAQ,EAAG,EACpB,UAAW,MAAA,CAEf,EACA,YAAaL,EAAU,SAASS,CAAU,GAAK,UAAUA,CAAU,MACnE,aAAAP,EACA,MAAM,QACN,WAAAH,EACA,mBAAoBH,EAAM,oBAAsB,GAChD,OAAQA,EAAM,cAAgB,GAC9B,eAAgB,CAACmB,EAChB,GAAGT,CAAA,CACN,CAAA,CAIJ,KAAKD,IAAS,UAAYA,IAAS,WAAaA,IAAS,SACzD,QACE,+BACGd,EACC,CAAA,SAAAmB,EAAA,kBAAA,IAACU,EAAA,WAAA,CACC,MAAOZ,EAAa,SAAS,EAC7B,aAAAN,EACA,KAAAG,EACC,GAAGC,CAAA,CAAA,EAER,CAAA,CAGR"}