@ynput/ayon-frontend-shared 0.2.26 → 0.2.28

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),p=require("react"),m=require("./AccessUser.styled.cjs.js"),d=require("../ShareOptionIcon/ShareOptionIcon.cjs.js"),l=require("clsx"),h={0:"No access",10:"Viewer",20:"Editor",30:"Admin"},S=p.forwardRef(({name:s,label:r,icon:t,shareType:c,isMe:n,isOwner:o,isCompact:i,children:x,className:a,...u},E)=>{const j=r&&r!==s&&!s.startsWith("__")&&!s.endsWith("__");return e.jsxRuntimeExports.jsxs(m.User,{...u,ref:E,className:l(a,{compact:i}),children:[e.jsxRuntimeExports.jsx(d.ShareOptionIcon,{shareType:c,name:s,label:r,icon:t}),e.jsxRuntimeExports.jsxs("span",{className:"label",children:[r||s,n?e.jsxRuntimeExports.jsx("span",{className:"name",children:"(you)"}):j&&e.jsxRuntimeExports.jsxs("span",{className:"name",children:["(",s,")"]})]}),o&&e.jsxRuntimeExports.jsx("span",{className:"owner",children:"Owner"}),x]})});exports.ACCESS_LEVEL_LABELS=h;exports.AccessUser=S;
+//# sourceMappingURL=AccessUser.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessUser.cjs.js","sources":["../../../../../src/components/AccessUser/AccessUser.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as Styled from './AccessUser.styled'\nimport { ShareOptionIcon } from '../ShareOptionIcon'\nimport clsx from 'clsx'\n\nexport const ACCESS_LEVEL_LABELS = {\n  0: 'No access',\n  10: 'Viewer',\n  20: 'Editor',\n  30: 'Admin',\n}\n\nexport type AccessLevel = 0 | 10 | 20 | 30\n\nexport interface AccessUser {\n  value: string // unique identifier for the user or group\n  name: string\n  label?: string\n  shareType?: string\n  icon?: string // optional icon for the user\n  accessLevel?: AccessLevel // access level (optional for display-only usage)\n  isOwner?: boolean // if this user is the owner\n  isMe?: boolean // if this user is the current user\n}\n\nexport interface AccessUserProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<AccessUser, 'icon' | 'name' | 'label' | 'shareType' | 'isMe' | 'isOwner'> {\n  children?: React.ReactNode // Allow children for controls like dropdown/buttons\n  isCompact?: boolean // if true, use compact styling\n}\n\nexport const AccessUser = forwardRef<HTMLDivElement, AccessUserProps>(\n  (\n    { name, label, icon, shareType, isMe, isOwner, isCompact, children, className, ...props },\n    ref,\n  ) => {\n    const showUsername = label && label !== name && !name.startsWith('__') && !name.endsWith('__')\n\n    return (\n      <Styled.User {...props} ref={ref} className={clsx(className, { compact: isCompact })}>\n        <ShareOptionIcon shareType={shareType} name={name} label={label} icon={icon} />\n        <span className=\"label\">\n          {label || name}\n          {isMe ? (\n            <span className=\"name\">(you)</span>\n          ) : (\n            showUsername && <span className=\"name\">({name})</span>\n          )}\n        </span>\n        {isOwner && <span className=\"owner\">Owner</span>}\n        {children}\n      </Styled.User>\n    )\n  },\n)\n"],"names":["ACCESS_LEVEL_LABELS","AccessUser","forwardRef","name","label","icon","shareType","isMe","isOwner","isCompact","children","className","props","ref","showUsername","jsxs","Styled.User","clsx","jsx","ShareOptionIcon"],"mappings":"+QAKaA,EAAsB,CACjC,EAAG,YACH,GAAI,SACJ,GAAI,SACJ,GAAI,OACN,EAsBaC,EAAaC,EAAA,WACxB,CACE,CAAE,KAAAC,EAAM,MAAAC,EAAO,KAAAC,EAAM,UAAAC,EAAW,KAAAC,EAAM,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAA,EAClFC,IACG,CACH,MAAMC,EAAeV,GAASA,IAAUD,GAAQ,CAACA,EAAK,WAAW,IAAI,GAAK,CAACA,EAAK,SAAS,IAAI,EAE7F,OACGY,EAAA,kBAAA,KAAAC,EAAA,KAAA,CAAa,GAAGJ,EAAO,IAAAC,EAAU,UAAWI,EAAKN,EAAW,CAAE,QAASF,CAAW,CAAA,EACjF,SAAA,CAAAS,EAAA,kBAAA,IAACC,EAAgB,gBAAA,CAAA,UAAAb,EAAsB,KAAAH,EAAY,MAAAC,EAAc,KAAAC,EAAY,EAC7EU,EAAAA,kBAAAA,KAAC,OAAK,CAAA,UAAU,QACb,SAAA,CAASX,GAAAD,EACTI,EACEW,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,OAAO,SAAK,OAAA,CAAA,EAE5BJ,GAAgBC,EAAAA,kBAAAA,KAAC,OAAK,CAAA,UAAU,OAAO,SAAA,CAAA,IAAEZ,EAAK,GAAA,CAAC,CAAA,CAAA,EAEnD,EACCK,GAAWU,EAAA,kBAAA,IAAC,OAAK,CAAA,UAAU,QAAQ,SAAK,QAAA,EACxCR,CAAA,EACH,CAAA,CAGN"}

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

@@ -0,0 +1,33 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.es.js";
+import { forwardRef as h } from "react";
+import { User as j } from "./AccessUser.styled.es.js";
+import { ShareOptionIcon as f } from "../ShareOptionIcon/ShareOptionIcon.es.js";
+import l from "clsx";
+const L = {
+  0: "No access",
+  10: "Viewer",
+  20: "Editor",
+  30: "Admin"
+}, S = h(
+  ({ name: s, label: o, icon: c, shareType: e, isMe: t, isOwner: n, isCompact: i, children: a, className: m, ...p }, x) => {
+    const d = o && o !== s && !s.startsWith("__") && !s.endsWith("__");
+    return /* @__PURE__ */ r.jsxs(j, { ...p, ref: x, className: l(m, { compact: i }), children: [
+      /* @__PURE__ */ r.jsx(f, { shareType: e, name: s, label: o, icon: c }),
+      /* @__PURE__ */ r.jsxs("span", { className: "label", children: [
+        o || s,
+        t ? /* @__PURE__ */ r.jsx("span", { className: "name", children: "(you)" }) : d && /* @__PURE__ */ r.jsxs("span", { className: "name", children: [
+          "(",
+          s,
+          ")"
+        ] })
+      ] }),
+      n && /* @__PURE__ */ r.jsx("span", { className: "owner", children: "Owner" }),
+      a
+    ] });
+  }
+);
+export {
+  L as ACCESS_LEVEL_LABELS,
+  S as AccessUser
+};
+//# sourceMappingURL=AccessUser.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessUser.es.js","sources":["../../../../../src/components/AccessUser/AccessUser.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as Styled from './AccessUser.styled'\nimport { ShareOptionIcon } from '../ShareOptionIcon'\nimport clsx from 'clsx'\n\nexport const ACCESS_LEVEL_LABELS = {\n  0: 'No access',\n  10: 'Viewer',\n  20: 'Editor',\n  30: 'Admin',\n}\n\nexport type AccessLevel = 0 | 10 | 20 | 30\n\nexport interface AccessUser {\n  value: string // unique identifier for the user or group\n  name: string\n  label?: string\n  shareType?: string\n  icon?: string // optional icon for the user\n  accessLevel?: AccessLevel // access level (optional for display-only usage)\n  isOwner?: boolean // if this user is the owner\n  isMe?: boolean // if this user is the current user\n}\n\nexport interface AccessUserProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<AccessUser, 'icon' | 'name' | 'label' | 'shareType' | 'isMe' | 'isOwner'> {\n  children?: React.ReactNode // Allow children for controls like dropdown/buttons\n  isCompact?: boolean // if true, use compact styling\n}\n\nexport const AccessUser = forwardRef<HTMLDivElement, AccessUserProps>(\n  (\n    { name, label, icon, shareType, isMe, isOwner, isCompact, children, className, ...props },\n    ref,\n  ) => {\n    const showUsername = label && label !== name && !name.startsWith('__') && !name.endsWith('__')\n\n    return (\n      <Styled.User {...props} ref={ref} className={clsx(className, { compact: isCompact })}>\n        <ShareOptionIcon shareType={shareType} name={name} label={label} icon={icon} />\n        <span className=\"label\">\n          {label || name}\n          {isMe ? (\n            <span className=\"name\">(you)</span>\n          ) : (\n            showUsername && <span className=\"name\">({name})</span>\n          )}\n        </span>\n        {isOwner && <span className=\"owner\">Owner</span>}\n        {children}\n      </Styled.User>\n    )\n  },\n)\n"],"names":["ACCESS_LEVEL_LABELS","AccessUser","forwardRef","name","label","icon","shareType","isMe","isOwner","isCompact","children","className","props","ref","showUsername","jsxs","Styled.User","clsx","jsx","ShareOptionIcon"],"mappings":";;;;;AAKO,MAAMA,IAAsB;AAAA,EACjC,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAsBaC,IAAaC;AAAA,EACxB,CACE,EAAE,MAAAC,GAAM,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAClFC,MACG;AACH,UAAMC,IAAeV,KAASA,MAAUD,KAAQ,CAACA,EAAK,WAAW,IAAI,KAAK,CAACA,EAAK,SAAS,IAAI;AAE7F,WACGY,gBAAAA,EAAA,KAAAC,GAAA,EAAa,GAAGJ,GAAO,KAAAC,GAAU,WAAWI,EAAKN,GAAW,EAAE,SAASF,EAAW,CAAA,GACjF,UAAA;AAAA,MAAAS,gBAAAA,EAAA,IAACC,GAAgB,EAAA,WAAAb,GAAsB,MAAAH,GAAY,OAAAC,GAAc,MAAAC,GAAY;AAAA,MAC7EU,gBAAAA,EAAAA,KAAC,QAAK,EAAA,WAAU,SACb,UAAA;AAAA,QAASX,KAAAD;AAAA,QACTI,IACEW,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,QAAO,UAAK,QAAA,CAAA,IAE5BJ,KAAgBC,gBAAAA,EAAAA,KAAC,QAAK,EAAA,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UAAEZ;AAAA,UAAK;AAAA,QAAA,EAAC,CAAA;AAAA,MAAA,GAEnD;AAAA,MACCK,KAAWU,gBAAAA,EAAA,IAAC,QAAK,EAAA,WAAU,SAAQ,UAAK,SAAA;AAAA,MACxCR;AAAA,IAAA,GACH;AAAA,EAAA;AAGN;"}

package/dist/shared/src/components/AccessUser/AccessUser.styled.cjs.js

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=e.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-medium);
+  padding: var(--padding-s) var(--padding-m);
+  border-radius: var(--border-radius-m);
+  min-height: 40px;
+
+  &.compact {
+    min-height: 32px;
+    padding: var(--padding-s);
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  .name {
+    color: var(--md-sys-color-outline);
+    padding-left: var(--base-gap-small);
+  }
+
+  .owner,
+  .suffix {
+    color: var(--md-sys-color-outline);
+  }
+
+  .icon {
+    font-size: 24px;
+    user-select: none;
+  }
+
+  .remove.hasIcon {
+    padding: 2px;
+    font-size: 20px;
+  }
+`;exports.User=r;
+//# sourceMappingURL=AccessUser.styled.cjs.js.map

package/dist/shared/src/components/AccessUser/AccessUser.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessUser.styled.cjs.js","sources":["../../../../../src/components/AccessUser/AccessUser.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const User = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-medium);\n  padding: var(--padding-s) var(--padding-m);\n  border-radius: var(--border-radius-m);\n  min-height: 40px;\n\n  &.compact {\n    min-height: 32px;\n    padding: var(--padding-s);\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .name {\n    color: var(--md-sys-color-outline);\n    padding-left: var(--base-gap-small);\n  }\n\n  .owner,\n  .suffix {\n    color: var(--md-sys-color-outline);\n  }\n\n  .icon {\n    font-size: 24px;\n    user-select: none;\n  }\n\n  .remove.hasIcon {\n    padding: 2px;\n    font-size: 20px;\n  }\n`\n"],"names":["User","styled"],"mappings":"qHAEaA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/components/AccessUser/AccessUser.styled.es.js

@@ -0,0 +1,46 @@
+import r from "styled-components";
+const e = r.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-medium);
+  padding: var(--padding-s) var(--padding-m);
+  border-radius: var(--border-radius-m);
+  min-height: 40px;
+
+  &.compact {
+    min-height: 32px;
+    padding: var(--padding-s);
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  .name {
+    color: var(--md-sys-color-outline);
+    padding-left: var(--base-gap-small);
+  }
+
+  .owner,
+  .suffix {
+    color: var(--md-sys-color-outline);
+  }
+
+  .icon {
+    font-size: 24px;
+    user-select: none;
+  }
+
+  .remove.hasIcon {
+    padding: 2px;
+    font-size: 20px;
+  }
+`;
+export {
+  e as User
+};
+//# sourceMappingURL=AccessUser.styled.es.js.map

package/dist/shared/src/components/AccessUser/AccessUser.styled.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessUser.styled.es.js","sources":["../../../../../src/components/AccessUser/AccessUser.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const User = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-medium);\n  padding: var(--padding-s) var(--padding-m);\n  border-radius: var(--border-radius-m);\n  min-height: 40px;\n\n  &.compact {\n    min-height: 32px;\n    padding: var(--padding-s);\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .name {\n    color: var(--md-sys-color-outline);\n    padding-left: var(--base-gap-small);\n  }\n\n  .owner,\n  .suffix {\n    color: var(--md-sys-color-outline);\n  }\n\n  .icon {\n    font-size: 24px;\n    user-select: none;\n  }\n\n  .remove.hasIcon {\n    padding: 2px;\n    font-size: 20px;\n  }\n`\n"],"names":["User","styled"],"mappings":";AAEO,MAAMA,IAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),o=require("clsx"),r=require("styled-components"),n=r.div`
+  padding: var(--padding-l);
+  border-radius: var(--border-radius-xxl);
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  h3 {
+    margin: 0;
+    padding: 4px 0;
+  }
+`,d=r.div`
+  display: flex;
+
+  .label {
+    width: 130px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--md-sys-color-outline);
+    display: block;
+  }
+
+  .value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`,x=({data:l,title:s,isLoading:a})=>e.jsxRuntimeExports.jsxs(n,{children:[s&&e.jsxRuntimeExports.jsx("h3",{children:s}),Object.entries(l).map(([i,t])=>e.jsxRuntimeExports.jsxs(d,{className:o({loading:a}),children:[e.jsxRuntimeExports.jsx("label",{className:"label",children:i}),e.jsxRuntimeExports.jsx("span",{className:"value",children:String(t)})]},i))]});exports.DetailsMetaData=x;
+//# sourceMappingURL=DetailsMetaData.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsMetaData.cjs.js","sources":["../../../../../src/components/DetailsMetaData/DetailsMetaData.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { FC } from 'react'\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n  padding: var(--padding-l);\n  border-radius: var(--border-radius-xxl);\n  border: 1px solid var(--md-sys-color-outline-variant);\n\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  h3 {\n    margin: 0;\n    padding: 4px 0;\n  }\n`\n\nconst Row = styled.div`\n  display: flex;\n\n  .label {\n    width: 130px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--md-sys-color-outline);\n    display: block;\n  }\n\n  .value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`\n\ninterface DetailsMetaDataProps {\n  data: Record<string, any>\n  title?: string\n  isLoading?: boolean\n}\n\nexport const DetailsMetaData: FC<DetailsMetaDataProps> = ({ data, title, isLoading }) => {\n  return (\n    <Container>\n      {title && <h3>{title}</h3>}\n      {Object.entries(data).map(([key, value]) => (\n        <Row key={key} className={clsx({ loading: isLoading })}>\n          <label className=\"label\">{key}</label>\n          <span className={'value'}>{String(value)}</span>\n        </Row>\n      ))}\n    </Container>\n  )\n}\n"],"names":["Container","styled","Row","DetailsMetaData","data","title","isLoading","jsx","key","value","jsxs","clsx"],"mappings":"4LAIMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBnBC,EAAMD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BNE,EAA4C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,8BAEpEN,EACE,CAAA,SAAA,CAASK,GAAAE,EAAAA,kBAAAA,IAAC,MAAI,SAAMF,CAAA,CAAA,EACpB,OAAO,QAAQD,CAAI,EAAE,IAAI,CAAC,CAACI,EAAKC,CAAK,IACpCC,EAAA,kBAAA,KAACR,GAAc,UAAWS,EAAK,CAAE,QAASL,CAAA,CAAW,EACnD,SAAA,CAACC,EAAA,kBAAA,IAAA,QAAA,CAAM,UAAU,QAAS,SAAIC,EAAA,0BAC7B,OAAK,CAAA,UAAW,QAAU,SAAA,OAAOC,CAAK,CAAE,CAAA,CAAA,CAAA,EAFjCD,CAGV,CACD,CAAA,EACH"}

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

@@ -0,0 +1,46 @@
+import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
+import d from "clsx";
+import a from "styled-components";
+const n = a.div`
+  padding: var(--padding-l);
+  border-radius: var(--border-radius-xxl);
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  h3 {
+    margin: 0;
+    padding: 4px 0;
+  }
+`, t = a.div`
+  display: flex;
+
+  .label {
+    width: 130px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--md-sys-color-outline);
+    display: block;
+  }
+
+  .value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`, m = ({ data: i, title: l, isLoading: s }) => /* @__PURE__ */ e.jsxs(n, { children: [
+  l && /* @__PURE__ */ e.jsx("h3", { children: l }),
+  Object.entries(i).map(([r, o]) => /* @__PURE__ */ e.jsxs(t, { className: d({ loading: s }), children: [
+    /* @__PURE__ */ e.jsx("label", { className: "label", children: r }),
+    /* @__PURE__ */ e.jsx("span", { className: "value", children: String(o) })
+  ] }, r))
+] });
+export {
+  m as DetailsMetaData
+};
+//# sourceMappingURL=DetailsMetaData.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsMetaData.es.js","sources":["../../../../../src/components/DetailsMetaData/DetailsMetaData.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { FC } from 'react'\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n  padding: var(--padding-l);\n  border-radius: var(--border-radius-xxl);\n  border: 1px solid var(--md-sys-color-outline-variant);\n\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  h3 {\n    margin: 0;\n    padding: 4px 0;\n  }\n`\n\nconst Row = styled.div`\n  display: flex;\n\n  .label {\n    width: 130px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--md-sys-color-outline);\n    display: block;\n  }\n\n  .value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`\n\ninterface DetailsMetaDataProps {\n  data: Record<string, any>\n  title?: string\n  isLoading?: boolean\n}\n\nexport const DetailsMetaData: FC<DetailsMetaDataProps> = ({ data, title, isLoading }) => {\n  return (\n    <Container>\n      {title && <h3>{title}</h3>}\n      {Object.entries(data).map(([key, value]) => (\n        <Row key={key} className={clsx({ loading: isLoading })}>\n          <label className=\"label\">{key}</label>\n          <span className={'value'}>{String(value)}</span>\n        </Row>\n      ))}\n    </Container>\n  )\n}\n"],"names":["Container","styled","Row","DetailsMetaData","data","title","isLoading","jsx","key","value","jsxs","clsx"],"mappings":";;;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBnBC,IAAMD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0BNE,IAA4C,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,WAAAC,+BAEpEN,GACE,EAAA,UAAA;AAAA,EAASK,KAAAE,gBAAAA,EAAAA,IAAC,QAAI,UAAMF,EAAA,CAAA;AAAA,EACpB,OAAO,QAAQD,CAAI,EAAE,IAAI,CAAC,CAACI,GAAKC,CAAK,MACpCC,gBAAAA,EAAA,KAACR,KAAc,WAAWS,EAAK,EAAE,SAASL,EAAA,CAAW,GACnD,UAAA;AAAA,IAACC,gBAAAA,EAAA,IAAA,SAAA,EAAM,WAAU,SAAS,UAAIC,GAAA;AAAA,0BAC7B,QAAK,EAAA,WAAW,SAAU,UAAA,OAAOC,CAAK,EAAE,CAAA;AAAA,EAAA,EAAA,GAFjCD,CAGV,CACD;AAAA,GACH;"}

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

@@ -1,16 +1,24 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../../_virtual/jsx-runtime.cjs.js");require("lodash");require("react-toastify");const b=require("../../util/copyToClipboard.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");const w=require("react"),n=require("styled-components"),f=require("clsx"),q=require("@ynput/ayon-react-components"),S=require("./components/RenderFieldWidget.cjs.js"),u=n.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js");require("lodash");require("react-toastify");const w=require("../../util/copyToClipboard.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");const f=require("react"),n=require("styled-components"),q=require("clsx"),S=require("@ynput/ayon-react-components"),k=require("./components/RenderFieldWidget.cjs.js"),p=n.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   height: 100%;
-`,p=n.div`
+
+  padding: var(--padding-l);
+  border-radius: var(--border-radius-xxl);
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  h3 {
+    margin: 0;
+    padding: 4px 0;
+  }
+`,x=n.div`
   display: grid;
   grid-template-columns: 150px 1fr auto;
   gap: 0px;
   align-items: center;
   min-height: 37px;
   position: relative;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 
   .copy-icon {
     opacity: 0;
@@ -23,13 +31,13 @@
   &:hover .copy-icon {
     opacity: 1;
   }
-`,k=n.div`
-  color: var(--md-sys-color-on-surface-variant);
+`,C=n.div`
+  color: var(--md-sys-color-outline);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-left: 4px;
-`,C=n.div`
+`,P=n.div`
   height: 32px;
   overflow: hidden;
   width: fit-content;
@@ -58,11 +66,13 @@
     background-color: var(--md-sys-color-surface-container);
     cursor: default;
   }
-`,P=n(p)`
-  .shimmer {
+`,T=n(x)`
+  &.loading {
     width: 100%;
-    height: 24px;
+    height: 33px;
+    min-height: unset;
     border-radius: 4px;
+    margin-bottom: 4px;
   }
-`,T=({isLoading:x,form:m,fields:c,enableEditing:l,mixedFields:i,onChange:s})=>{const[y,a]=w.useState(null),h=t=>{var e;l&&!((e=c.find(r=>r.name===t))!=null&&e.readonly)&&a(t)},v=(t,e)=>{a(null),s==null||s(t,e)},g=()=>{a(null)};return x?o.jsxRuntimeExports.jsx(u,{children:Array.from({length:10}).map((t,e)=>o.jsxRuntimeExports.jsxs(P,{children:[o.jsxRuntimeExports.jsx("div",{className:"loading"}),o.jsxRuntimeExports.jsx("div",{className:"loading"})]},e))}):o.jsxRuntimeExports.jsx(u,{children:c.filter(t=>!t.hidden).map(t=>{const e=m[t.name],r=y===t.name,d=t.readonly||!l,j=(i==null?void 0:i.includes(t.name))||!1;return o.jsxRuntimeExports.jsxs(p,{children:[o.jsxRuntimeExports.jsx(k,{title:t.data.description||t.data.title||t.name,children:t.data.title||t.name}),o.jsxRuntimeExports.jsx(C,{className:f({editing:r,readonly:d}),onClick:()=>!r&&h(t.name),children:o.jsxRuntimeExports.jsx(S,{field:t,value:e,isEditing:r,isReadOnly:d,isMixed:j,onChange:v,onCancelEdit:g})}),o.jsxRuntimeExports.jsx(q.Button,{className:"copy-icon",variant:"text",icon:"content_copy",onClick:R=>{R.stopPropagation();const E=e??"";b.copyToClipboard(E.toString(),!0)}})]},t.name)})})};exports.DetailsPanelAttributesEditor=T;
+`,A=({title:i,isLoading:m,form:h,fields:s,enableEditing:d,mixedFields:a,onChange:c})=>{const[g,l]=f.useState(null),y=o=>{var t;d&&!((t=s.find(r=>r.name===o))!=null&&t.readonly)&&l(o)},v=(o,t)=>{l(null),c==null||c(o,t)},j=()=>{l(null)};return m?e.jsxRuntimeExports.jsxs(p,{children:[i&&e.jsxRuntimeExports.jsx("h3",{children:i}),Array.from({length:s.length??10}).map((o,t)=>e.jsxRuntimeExports.jsx(T,{className:"loading"},t))]}):e.jsxRuntimeExports.jsxs(p,{children:[i&&e.jsxRuntimeExports.jsx("h3",{children:i}),s.filter(o=>!o.hidden).map(o=>{const t=h[o.name],r=g===o.name,u=o.readonly||!d,b=(a==null?void 0:a.includes(o.name))||!1;return e.jsxRuntimeExports.jsxs(x,{children:[e.jsxRuntimeExports.jsx(C,{title:o.data.description||o.data.title||o.name,children:o.data.title||o.name}),e.jsxRuntimeExports.jsx(P,{className:q({editing:r,readonly:u}),onClick:()=>!r&&y(o.name),children:e.jsxRuntimeExports.jsx(k,{field:o,value:t,isEditing:r,isReadOnly:u,isMixed:b,onChange:v,onCancelEdit:j})}),e.jsxRuntimeExports.jsx(S.Button,{className:"copy-icon",variant:"text",icon:"content_copy",onClick:R=>{R.stopPropagation();const E=t??"";w.copyToClipboard(E.toString(),!0)}})]},o.name)})]})};exports.DetailsPanelAttributesEditor=A;
 //# sourceMappingURL=DetailsPanelAttributesEditor.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelAttributesEditor.cjs.js","sources":["../../../../../src/components/DetailsPanelAttributes/DetailsPanelAttributesEditor.tsx"],"sourcesContent":["import type { AttributeModel } from '@shared/api'\nimport { copyToClipboard } from '@shared/util'\nimport { FC, useState } from 'react'\nimport styled from 'styled-components'\nimport { CellValue } from '@shared/containers/ProjectTreeTable/widgets/CellWidget'\nimport clsx from 'clsx'\nimport { Button } from '@ynput/ayon-react-components'\nimport RenderFieldWidget from './components/RenderFieldWidget'\n\nconst StyledForm = styled.div`\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  height: 100%;\n`\n\nconst FormRow = styled.div`\n  display: grid;\n  grid-template-columns: 150px 1fr auto;\n  gap: 0px;\n  align-items: center;\n  min-height: 37px;\n  position: relative;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  .copy-icon {\n    opacity: 0;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n\n  &:hover .copy-icon {\n    opacity: 1;\n  }\n`\n\nconst FieldLabel = styled.div`\n  color: var(--md-sys-color-on-surface-variant);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: 4px;\n`\n\nconst FieldValue = styled.div`\n  height: 32px;\n  overflow: hidden;\n  width: fit-content;\n  min-width: 160px;\n  max-width: 100%;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  border-radius: 4px;\n  padding: 0 4px;\n\n  &:not(.readonly) {\n    cursor: pointer;\n  }\n\n  &:hover:not(.readonly) {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n\n  .dropdown .button {\n    background-color: unset;\n  }\n\n  &.editing {\n    background-color: var(--md-sys-color-surface-container);\n    cursor: default;\n  }\n`\n\nconst ShimmerRow = styled(FormRow)`\n  .shimmer {\n    width: 100%;\n    height: 24px;\n    border-radius: 4px;\n  }\n`\n\n// TODO: move styles to a separate file\n\nexport type AttributeField = Omit<AttributeModel, 'position' | 'scope' | 'builtin'> & {\n  readonly?: boolean\n  hidden?: boolean\n}\n\nexport interface DetailsPanelAttributesEditorProps {\n  isLoading?: boolean // show loading shimmer for 20 placeholder items\n  enableEditing?: boolean // if this is false, everything is readonly\n  fields: AttributeField[] // the schema for the form\n  form: Record<\n    string,\n    string | number | boolean | Date | any[] | Record<string, any> | undefined | null\n  > // the form data\n  mixedFields?: string[] // when multiple entities are selected, this is a list of fields that are mixed\n  onChange?: (key: string, value: any) => void\n}\n\nexport const DetailsPanelAttributesEditor: FC<DetailsPanelAttributesEditorProps> = ({\n  isLoading,\n  form,\n  fields,\n  enableEditing,\n  mixedFields,\n  onChange,\n}) => {\n  const [editingField, setEditingField] = useState<string | null>(null)\n\n  // Handler for starting to edit a field\n  const handleStartEditing = (fieldName: string) => {\n    if (enableEditing && !fields.find((field) => field.name === fieldName)?.readonly) {\n      setEditingField(fieldName)\n    }\n  }\n\n  // Handler for field value changes\n  const handleValueChange = (fieldName: string, value: CellValue | CellValue[]) => {\n    setEditingField(null)\n    onChange?.(fieldName, value)\n  }\n\n  const handleCancelEdit = () => {\n    setEditingField(null)\n  }\n\n  if (isLoading) {\n    return (\n      <StyledForm>\n        {Array.from({ length: 10 }).map((_, index) => (\n          <ShimmerRow key={index}>\n            <div className=\"loading\"></div>\n            <div className=\"loading\"></div>\n          </ShimmerRow>\n        ))}\n      </StyledForm>\n    )\n  }\n\n  return (\n    <StyledForm>\n      {fields\n        .filter((f) => !f.hidden)\n        .map((field) => {\n          const fieldValue = form[field.name]\n          const isEditing = editingField === field.name\n          const isReadOnly = field.readonly || !enableEditing\n          const isMixed = mixedFields?.includes(field.name) || false\n\n          return (\n            <FormRow key={field.name}>\n              <FieldLabel title={field.data.description || field.data.title || field.name}>\n                {field.data.title || field.name}\n              </FieldLabel>\n              <FieldValue\n                className={clsx({ editing: isEditing, readonly: isReadOnly })}\n                onClick={() => !isEditing && handleStartEditing(field.name)}\n              >\n                <RenderFieldWidget\n                  field={field}\n                  value={fieldValue}\n                  isEditing={isEditing}\n                  isReadOnly={isReadOnly}\n                  isMixed={isMixed}\n                  onChange={handleValueChange}\n                  onCancelEdit={handleCancelEdit}\n                />\n              </FieldValue>\n              <Button\n                className=\"copy-icon\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  const valueToDisplay =\n                    fieldValue === null || fieldValue === undefined ? '' : fieldValue\n                  copyToClipboard(valueToDisplay.toString(), true)\n                }}\n              />\n            </FormRow>\n          )\n        })}\n    </StyledForm>\n  )\n}\n"],"names":["StyledForm","styled","FormRow","FieldLabel","FieldValue","ShimmerRow","DetailsPanelAttributesEditor","isLoading","form","fields","enableEditing","mixedFields","onChange","editingField","setEditingField","useState","handleStartEditing","fieldName","_a","field","handleValueChange","value","handleCancelEdit","jsx","_","index","f","fieldValue","isEditing","isReadOnly","isMixed","clsx","RenderFieldWidget","Button","e","valueToDisplay","copyToClipboard"],"mappings":"ucASMA,EAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpBC,EAAUD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBjBE,EAAaF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpBG,EAAaH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+BpBI,EAAaJ,EAAOC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BpBI,EAAsE,CAAC,CAClF,UAAAC,EACA,KAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAwB,IAAI,EAG9DC,EAAsBC,GAAsB,OAC5CP,GAAiB,GAACQ,EAAAT,EAAO,KAAMU,GAAUA,EAAM,OAASF,CAAS,IAA/C,MAAAC,EAAkD,WACtEJ,EAAgBG,CAAS,CAE7B,EAGMG,EAAoB,CAACH,EAAmBI,IAAmC,CAC/EP,EAAgB,IAAI,EACpBF,GAAA,MAAAA,EAAWK,EAAWI,EACxB,EAEMC,EAAmB,IAAM,CAC7BR,EAAgB,IAAI,CACtB,EAEA,OAAIP,EAECgB,EAAAA,kBAAAA,IAAAvB,EAAA,CACE,SAAM,MAAA,KAAK,CAAE,OAAQ,EAAI,CAAA,EAAE,IAAI,CAACwB,EAAGC,6BACjCpB,EACC,CAAA,SAAA,CAACkB,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,SAAU,CAAA,EACzBA,EAAAA,kBAAAA,IAAC,MAAI,CAAA,UAAU,SAAU,CAAA,CAAA,GAFVE,CAGjB,CACD,EACH,EAKDF,EAAA,kBAAA,IAAAvB,EAAA,CACE,SACES,EAAA,OAAQiB,GAAM,CAACA,EAAE,MAAM,EACvB,IAAKP,GAAU,CACR,MAAAQ,EAAanB,EAAKW,EAAM,IAAI,EAC5BS,EAAYf,IAAiBM,EAAM,KACnCU,EAAaV,EAAM,UAAY,CAACT,EAChCoB,GAAUnB,GAAA,YAAAA,EAAa,SAASQ,EAAM,QAAS,GAErD,gCACGjB,EACC,CAAA,SAAA,CAAAqB,EAAA,kBAAA,IAACpB,EAAW,CAAA,MAAOgB,EAAM,KAAK,aAAeA,EAAM,KAAK,OAASA,EAAM,KACpE,SAAAA,EAAM,KAAK,OAASA,EAAM,KAC7B,EACAI,EAAA,kBAAA,IAACnB,EAAA,CACC,UAAW2B,EAAK,CAAE,QAASH,EAAW,SAAUC,EAAY,EAC5D,QAAS,IAAM,CAACD,GAAaZ,EAAmBG,EAAM,IAAI,EAE1D,SAAAI,EAAA,kBAAA,IAACS,EAAA,CACC,MAAAb,EACA,MAAOQ,EACP,UAAAC,EACA,WAAAC,EACA,QAAAC,EACA,SAAUV,EACV,aAAcE,CAAA,CAAA,CAChB,CACF,EACAC,EAAA,kBAAA,IAACU,EAAA,OAAA,CACC,UAAU,YACV,QAAQ,OACR,KAAK,eACL,QAAUC,GAAM,CACdA,EAAE,gBAAgB,EAClB,MAAMC,EACJR,GAAkD,GACpCS,EAAAA,gBAAAD,EAAe,SAAS,EAAG,EAAI,CAAA,CACjD,CAAA,CACF,CAAA,EA5BYhB,EAAM,IA6BpB,CAEH,CAAA,EACL,CAEJ"}
+{"version":3,"file":"DetailsPanelAttributesEditor.cjs.js","sources":["../../../../../src/components/DetailsPanelAttributes/DetailsPanelAttributesEditor.tsx"],"sourcesContent":["import type { AttributeModel } from '@shared/api'\nimport { copyToClipboard } from '@shared/util'\nimport { FC, useState } from 'react'\nimport styled from 'styled-components'\nimport { CellValue } from '@shared/containers/ProjectTreeTable/widgets/CellWidget'\nimport clsx from 'clsx'\nimport { Button } from '@ynput/ayon-react-components'\nimport RenderFieldWidget from './components/RenderFieldWidget'\n\nconst StyledForm = styled.div`\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  height: 100%;\n\n  padding: var(--padding-l);\n  border-radius: var(--border-radius-xxl);\n  border: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin: 0;\n    padding: 4px 0;\n  }\n`\n\nconst FormRow = styled.div`\n  display: grid;\n  grid-template-columns: 150px 1fr auto;\n  gap: 0px;\n  align-items: center;\n  min-height: 37px;\n  position: relative;\n\n  .copy-icon {\n    opacity: 0;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n\n  &:hover .copy-icon {\n    opacity: 1;\n  }\n`\n\nconst FieldLabel = styled.div`\n  color: var(--md-sys-color-outline);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: 4px;\n`\n\nconst FieldValue = styled.div`\n  height: 32px;\n  overflow: hidden;\n  width: fit-content;\n  min-width: 160px;\n  max-width: 100%;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  border-radius: 4px;\n  padding: 0 4px;\n\n  &:not(.readonly) {\n    cursor: pointer;\n  }\n\n  &:hover:not(.readonly) {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n\n  .dropdown .button {\n    background-color: unset;\n  }\n\n  &.editing {\n    background-color: var(--md-sys-color-surface-container);\n    cursor: default;\n  }\n`\n\nconst ShimmerRow = styled(FormRow)`\n  &.loading {\n    width: 100%;\n    height: 33px;\n    min-height: unset;\n    border-radius: 4px;\n    margin-bottom: 4px;\n  }\n`\n\n// TODO: move styles to a separate file\n\nexport type AttributeField = Omit<AttributeModel, 'position' | 'scope' | 'builtin'> & {\n  readonly?: boolean\n  hidden?: boolean\n  enableCustomValues?: boolean // Allow custom values in enum fields\n  enableSearch?: boolean // Enable search functionality in enum fields\n  allowNone?: boolean // Allow \"None\" option for enum fields that can be cleared\n}\n\nexport interface DetailsPanelAttributesEditorProps {\n  title?: string\n  isLoading?: boolean // show loading shimmer for 20 placeholder items\n  enableEditing?: boolean // if this is false, everything is readonly\n  fields: AttributeField[] // the schema for the form\n  form: Record<\n    string,\n    string | number | boolean | Date | any[] | Record<string, any> | undefined | null\n  > // the form data\n  mixedFields?: string[] // when multiple entities are selected, this is a list of fields that are mixed\n  onChange?: (key: string, value: any) => void\n}\n\nexport const DetailsPanelAttributesEditor: FC<DetailsPanelAttributesEditorProps> = ({\n  title,\n  isLoading,\n  form,\n  fields,\n  enableEditing,\n  mixedFields,\n  onChange,\n}) => {\n  const [editingField, setEditingField] = useState<string | null>(null)\n\n  // Handler for starting to edit a field\n  const handleStartEditing = (fieldName: string) => {\n    if (enableEditing && !fields.find((field) => field.name === fieldName)?.readonly) {\n      setEditingField(fieldName)\n    }\n  }\n\n  // Handler for field value changes\n  const handleValueChange = (fieldName: string, value: CellValue | CellValue[]) => {\n    setEditingField(null)\n    onChange?.(fieldName, value)\n  }\n\n  const handleCancelEdit = () => {\n    setEditingField(null)\n  }\n\n  if (isLoading) {\n    return (\n      <StyledForm>\n        {title && <h3>{title}</h3>}\n        {Array.from({ length: fields.length ?? 10 }).map((_, index) => (\n          <ShimmerRow key={index} className=\"loading\"></ShimmerRow>\n        ))}\n      </StyledForm>\n    )\n  }\n\n  return (\n    <StyledForm>\n      {title && <h3>{title}</h3>}\n      {fields\n        .filter((f) => !f.hidden)\n        .map((field) => {\n          const fieldValue = form[field.name]\n          const isEditing = editingField === field.name\n          const isReadOnly = field.readonly || !enableEditing\n          const isMixed = mixedFields?.includes(field.name) || false\n\n          return (\n            <FormRow key={field.name}>\n              <FieldLabel title={field.data.description || field.data.title || field.name}>\n                {field.data.title || field.name}\n              </FieldLabel>\n              <FieldValue\n                className={clsx({ editing: isEditing, readonly: isReadOnly })}\n                onClick={() => !isEditing && handleStartEditing(field.name)}\n              >\n                <RenderFieldWidget\n                  field={field}\n                  value={fieldValue}\n                  isEditing={isEditing}\n                  isReadOnly={isReadOnly}\n                  isMixed={isMixed}\n                  onChange={handleValueChange}\n                  onCancelEdit={handleCancelEdit}\n                />\n              </FieldValue>\n              <Button\n                className=\"copy-icon\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  const valueToDisplay =\n                    fieldValue === null || fieldValue === undefined ? '' : fieldValue\n                  copyToClipboard(valueToDisplay.toString(), true)\n                }}\n              />\n            </FormRow>\n          )\n        })}\n    </StyledForm>\n  )\n}\n"],"names":["StyledForm","styled","FormRow","FieldLabel","FieldValue","ShimmerRow","DetailsPanelAttributesEditor","title","isLoading","form","fields","enableEditing","mixedFields","onChange","editingField","setEditingField","useState","handleStartEditing","fieldName","_a","field","handleValueChange","value","handleCancelEdit","jsx","_","index","f","fieldValue","isEditing","isReadOnly","isMixed","clsx","RenderFieldWidget","Button","e","valueToDisplay","copyToClipboard"],"mappings":"ucASMA,EAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBpBC,EAAUD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBjBE,EAAaF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpBG,EAAaH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+BpBI,EAAaJ,EAAOC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiCpBI,EAAsE,CAAC,CAClF,MAAAC,EACA,UAAAC,EACA,KAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAwB,IAAI,EAG9DC,EAAsBC,GAAsB,OAC5CP,GAAiB,GAACQ,EAAAT,EAAO,KAAMU,GAAUA,EAAM,OAASF,CAAS,IAA/C,MAAAC,EAAkD,WACtEJ,EAAgBG,CAAS,CAE7B,EAGMG,EAAoB,CAACH,EAAmBI,IAAmC,CAC/EP,EAAgB,IAAI,EACpBF,GAAA,MAAAA,EAAWK,EAAWI,EACxB,EAEMC,EAAmB,IAAM,CAC7BR,EAAgB,IAAI,CACtB,EAEA,OAAIP,2BAECR,EACE,CAAA,SAAA,CAASO,GAAAiB,EAAAA,kBAAAA,IAAC,MAAI,SAAMjB,CAAA,CAAA,EACpB,MAAM,KAAK,CAAE,OAAQG,EAAO,QAAU,GAAI,EAAE,IAAI,CAACe,EAAGC,IACnDF,wBAACnB,GAAuB,UAAU,SAAA,EAAjBqB,CAA2B,CAC7C,CAAA,EACH,2BAKD1B,EACE,CAAA,SAAA,CAASO,GAAAiB,EAAAA,kBAAAA,IAAC,MAAI,SAAMjB,CAAA,CAAA,EACpBG,EACE,OAAQiB,GAAM,CAACA,EAAE,MAAM,EACvB,IAAKP,GAAU,CACR,MAAAQ,EAAanB,EAAKW,EAAM,IAAI,EAC5BS,EAAYf,IAAiBM,EAAM,KACnCU,EAAaV,EAAM,UAAY,CAACT,EAChCoB,GAAUnB,GAAA,YAAAA,EAAa,SAASQ,EAAM,QAAS,GAErD,gCACGlB,EACC,CAAA,SAAA,CAAAsB,EAAA,kBAAA,IAACrB,EAAW,CAAA,MAAOiB,EAAM,KAAK,aAAeA,EAAM,KAAK,OAASA,EAAM,KACpE,SAAAA,EAAM,KAAK,OAASA,EAAM,KAC7B,EACAI,EAAA,kBAAA,IAACpB,EAAA,CACC,UAAW4B,EAAK,CAAE,QAASH,EAAW,SAAUC,EAAY,EAC5D,QAAS,IAAM,CAACD,GAAaZ,EAAmBG,EAAM,IAAI,EAE1D,SAAAI,EAAA,kBAAA,IAACS,EAAA,CACC,MAAAb,EACA,MAAOQ,EACP,UAAAC,EACA,WAAAC,EACA,QAAAC,EACA,SAAUV,EACV,aAAcE,CAAA,CAAA,CAChB,CACF,EACAC,EAAA,kBAAA,IAACU,EAAA,OAAA,CACC,UAAU,YACV,QAAQ,OACR,KAAK,eACL,QAAUC,GAAM,CACdA,EAAE,gBAAgB,EAClB,MAAMC,EACJR,GAAkD,GACpCS,EAAAA,gBAAAD,EAAe,SAAS,EAAG,EAAI,CAAA,CACjD,CAAA,CACF,CAAA,EA5BYhB,EAAM,IA6BpB,CAEH,CAAA,CAAA,EACL,CAEJ"}

package/dist/shared/src/components/DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js

@@ -1,27 +1,35 @@
-import { j as r } from "../../../../_virtual/jsx-runtime.es.js";
+import { j as t } from "../../../../_virtual/jsx-runtime.es.js";
 import "lodash";
 import "react-toastify";
-import { copyToClipboard as j } from "../../util/copyToClipboard.es.js";
+import { copyToClipboard as b } from "../../util/copyToClipboard.es.js";
 import "uuid";
 import "../../util/pubsub.es.js";
-import { useState as b } from "react";
-import e from "styled-components";
-import k from "clsx";
-import { Button as E } from "@ynput/ayon-react-components";
-import R from "./components/RenderFieldWidget.es.js";
-const p = e.div`
+import { useState as k } from "react";
+import i from "styled-components";
+import E from "clsx";
+import { Button as R } from "@ynput/ayon-react-components";
+import S from "./components/RenderFieldWidget.es.js";
+const m = i.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   height: 100%;
-`, m = e.div`
+
+  padding: var(--padding-l);
+  border-radius: var(--border-radius-xxl);
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  h3 {
+    margin: 0;
+    padding: 4px 0;
+  }
+`, u = i.div`
   display: grid;
   grid-template-columns: 150px 1fr auto;
   gap: 0px;
   align-items: center;
   min-height: 37px;
   position: relative;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 
   .copy-icon {
     opacity: 0;
@@ -34,13 +42,13 @@ const p = e.div`
   &:hover .copy-icon {
     opacity: 1;
   }
-`, S = e.div`
-  color: var(--md-sys-color-on-surface-variant);
+`, C = i.div`
+  color: var(--md-sys-color-outline);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-left: 4px;
-`, C = e.div`
+`, D = i.div`
   height: 32px;
   overflow: hidden;
   width: fit-content;
@@ -69,69 +77,75 @@ const p = e.div`
     background-color: var(--md-sys-color-surface-container);
     cursor: default;
   }
-`, D = e(m)`
-  .shimmer {
+`, F = i(u)`
+  &.loading {
     width: 100%;
-    height: 24px;
+    height: 33px;
+    min-height: unset;
     border-radius: 4px;
+    margin-bottom: 4px;
   }
-`, q = ({
-  isLoading: u,
-  form: h,
-  fields: l,
+`, z = ({
+  title: e,
+  isLoading: h,
+  form: x,
+  fields: a,
   enableEditing: c,
-  mixedFields: i,
-  onChange: a
+  mixedFields: s,
+  onChange: l
 }) => {
-  const [x, s] = b(null), y = (o) => {
-    var t;
-    c && !((t = l.find((n) => n.name === o)) != null && t.readonly) && s(o);
-  }, v = (o, t) => {
-    s(null), a == null || a(o, t);
-  }, g = () => {
-    s(null);
+  const [g, d] = k(null), y = (o) => {
+    var r;
+    c && !((r = a.find((n) => n.name === o)) != null && r.readonly) && d(o);
+  }, v = (o, r) => {
+    d(null), l == null || l(o, r);
+  }, f = () => {
+    d(null);
   };
-  return u ? /* @__PURE__ */ r.jsx(p, { children: Array.from({ length: 10 }).map((o, t) => /* @__PURE__ */ r.jsxs(D, { children: [
-    /* @__PURE__ */ r.jsx("div", { className: "loading" }),
-    /* @__PURE__ */ r.jsx("div", { className: "loading" })
-  ] }, t)) }) : /* @__PURE__ */ r.jsx(p, { children: l.filter((o) => !o.hidden).map((o) => {
-    const t = h[o.name], n = x === o.name, d = o.readonly || !c, f = (i == null ? void 0 : i.includes(o.name)) || !1;
-    return /* @__PURE__ */ r.jsxs(m, { children: [
-      /* @__PURE__ */ r.jsx(S, { title: o.data.description || o.data.title || o.name, children: o.data.title || o.name }),
-      /* @__PURE__ */ r.jsx(
-        C,
-        {
-          className: k({ editing: n, readonly: d }),
-          onClick: () => !n && y(o.name),
-          children: /* @__PURE__ */ r.jsx(
-            R,
-            {
-              field: o,
-              value: t,
-              isEditing: n,
-              isReadOnly: d,
-              isMixed: f,
-              onChange: v,
-              onCancelEdit: g
+  return h ? /* @__PURE__ */ t.jsxs(m, { children: [
+    e && /* @__PURE__ */ t.jsx("h3", { children: e }),
+    Array.from({ length: a.length ?? 10 }).map((o, r) => /* @__PURE__ */ t.jsx(F, { className: "loading" }, r))
+  ] }) : /* @__PURE__ */ t.jsxs(m, { children: [
+    e && /* @__PURE__ */ t.jsx("h3", { children: e }),
+    a.filter((o) => !o.hidden).map((o) => {
+      const r = x[o.name], n = g === o.name, p = o.readonly || !c, w = (s == null ? void 0 : s.includes(o.name)) || !1;
+      return /* @__PURE__ */ t.jsxs(u, { children: [
+        /* @__PURE__ */ t.jsx(C, { title: o.data.description || o.data.title || o.name, children: o.data.title || o.name }),
+        /* @__PURE__ */ t.jsx(
+          D,
+          {
+            className: E({ editing: n, readonly: p }),
+            onClick: () => !n && y(o.name),
+            children: /* @__PURE__ */ t.jsx(
+              S,
+              {
+                field: o,
+                value: r,
+                isEditing: n,
+                isReadOnly: p,
+                isMixed: w,
+                onChange: v,
+                onCancelEdit: f
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          R,
+          {
+            className: "copy-icon",
+            variant: "text",
+            icon: "content_copy",
+            onClick: (j) => {
+              j.stopPropagation(), b((r ?? "").toString(), !0);
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ r.jsx(
-        E,
-        {
-          className: "copy-icon",
-          variant: "text",
-          icon: "content_copy",
-          onClick: (w) => {
-            w.stopPropagation(), j((t ?? "").toString(), !0);
           }
-        }
-      )
-    ] }, o.name);
-  }) });
+        )
+      ] }, o.name);
+    })
+  ] });
 };
 export {
-  q as DetailsPanelAttributesEditor
+  z as DetailsPanelAttributesEditor
 };
 //# sourceMappingURL=DetailsPanelAttributesEditor.es.js.map

package/dist/shared/src/components/DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelAttributesEditor.es.js","sources":["../../../../../src/components/DetailsPanelAttributes/DetailsPanelAttributesEditor.tsx"],"sourcesContent":["import type { AttributeModel } from '@shared/api'\nimport { copyToClipboard } from '@shared/util'\nimport { FC, useState } from 'react'\nimport styled from 'styled-components'\nimport { CellValue } from '@shared/containers/ProjectTreeTable/widgets/CellWidget'\nimport clsx from 'clsx'\nimport { Button } from '@ynput/ayon-react-components'\nimport RenderFieldWidget from './components/RenderFieldWidget'\n\nconst StyledForm = styled.div`\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  height: 100%;\n`\n\nconst FormRow = styled.div`\n  display: grid;\n  grid-template-columns: 150px 1fr auto;\n  gap: 0px;\n  align-items: center;\n  min-height: 37px;\n  position: relative;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  .copy-icon {\n    opacity: 0;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n\n  &:hover .copy-icon {\n    opacity: 1;\n  }\n`\n\nconst FieldLabel = styled.div`\n  color: var(--md-sys-color-on-surface-variant);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: 4px;\n`\n\nconst FieldValue = styled.div`\n  height: 32px;\n  overflow: hidden;\n  width: fit-content;\n  min-width: 160px;\n  max-width: 100%;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  border-radius: 4px;\n  padding: 0 4px;\n\n  &:not(.readonly) {\n    cursor: pointer;\n  }\n\n  &:hover:not(.readonly) {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n\n  .dropdown .button {\n    background-color: unset;\n  }\n\n  &.editing {\n    background-color: var(--md-sys-color-surface-container);\n    cursor: default;\n  }\n`\n\nconst ShimmerRow = styled(FormRow)`\n  .shimmer {\n    width: 100%;\n    height: 24px;\n    border-radius: 4px;\n  }\n`\n\n// TODO: move styles to a separate file\n\nexport type AttributeField = Omit<AttributeModel, 'position' | 'scope' | 'builtin'> & {\n  readonly?: boolean\n  hidden?: boolean\n}\n\nexport interface DetailsPanelAttributesEditorProps {\n  isLoading?: boolean // show loading shimmer for 20 placeholder items\n  enableEditing?: boolean // if this is false, everything is readonly\n  fields: AttributeField[] // the schema for the form\n  form: Record<\n    string,\n    string | number | boolean | Date | any[] | Record<string, any> | undefined | null\n  > // the form data\n  mixedFields?: string[] // when multiple entities are selected, this is a list of fields that are mixed\n  onChange?: (key: string, value: any) => void\n}\n\nexport const DetailsPanelAttributesEditor: FC<DetailsPanelAttributesEditorProps> = ({\n  isLoading,\n  form,\n  fields,\n  enableEditing,\n  mixedFields,\n  onChange,\n}) => {\n  const [editingField, setEditingField] = useState<string | null>(null)\n\n  // Handler for starting to edit a field\n  const handleStartEditing = (fieldName: string) => {\n    if (enableEditing && !fields.find((field) => field.name === fieldName)?.readonly) {\n      setEditingField(fieldName)\n    }\n  }\n\n  // Handler for field value changes\n  const handleValueChange = (fieldName: string, value: CellValue | CellValue[]) => {\n    setEditingField(null)\n    onChange?.(fieldName, value)\n  }\n\n  const handleCancelEdit = () => {\n    setEditingField(null)\n  }\n\n  if (isLoading) {\n    return (\n      <StyledForm>\n        {Array.from({ length: 10 }).map((_, index) => (\n          <ShimmerRow key={index}>\n            <div className=\"loading\"></div>\n            <div className=\"loading\"></div>\n          </ShimmerRow>\n        ))}\n      </StyledForm>\n    )\n  }\n\n  return (\n    <StyledForm>\n      {fields\n        .filter((f) => !f.hidden)\n        .map((field) => {\n          const fieldValue = form[field.name]\n          const isEditing = editingField === field.name\n          const isReadOnly = field.readonly || !enableEditing\n          const isMixed = mixedFields?.includes(field.name) || false\n\n          return (\n            <FormRow key={field.name}>\n              <FieldLabel title={field.data.description || field.data.title || field.name}>\n                {field.data.title || field.name}\n              </FieldLabel>\n              <FieldValue\n                className={clsx({ editing: isEditing, readonly: isReadOnly })}\n                onClick={() => !isEditing && handleStartEditing(field.name)}\n              >\n                <RenderFieldWidget\n                  field={field}\n                  value={fieldValue}\n                  isEditing={isEditing}\n                  isReadOnly={isReadOnly}\n                  isMixed={isMixed}\n                  onChange={handleValueChange}\n                  onCancelEdit={handleCancelEdit}\n                />\n              </FieldValue>\n              <Button\n                className=\"copy-icon\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  const valueToDisplay =\n                    fieldValue === null || fieldValue === undefined ? '' : fieldValue\n                  copyToClipboard(valueToDisplay.toString(), true)\n                }}\n              />\n            </FormRow>\n          )\n        })}\n    </StyledForm>\n  )\n}\n"],"names":["StyledForm","styled","FormRow","FieldLabel","FieldValue","ShimmerRow","DetailsPanelAttributesEditor","isLoading","form","fields","enableEditing","mixedFields","onChange","editingField","setEditingField","useState","handleStartEditing","fieldName","_a","field","handleValueChange","value","handleCancelEdit","jsx","_","index","f","fieldValue","isEditing","isReadOnly","isMixed","clsx","RenderFieldWidget","Button","e","copyToClipboard"],"mappings":"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"}
+{"version":3,"file":"DetailsPanelAttributesEditor.es.js","sources":["../../../../../src/components/DetailsPanelAttributes/DetailsPanelAttributesEditor.tsx"],"sourcesContent":["import type { AttributeModel } from '@shared/api'\nimport { copyToClipboard } from '@shared/util'\nimport { FC, useState } from 'react'\nimport styled from 'styled-components'\nimport { CellValue } from '@shared/containers/ProjectTreeTable/widgets/CellWidget'\nimport clsx from 'clsx'\nimport { Button } from '@ynput/ayon-react-components'\nimport RenderFieldWidget from './components/RenderFieldWidget'\n\nconst StyledForm = styled.div`\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  height: 100%;\n\n  padding: var(--padding-l);\n  border-radius: var(--border-radius-xxl);\n  border: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin: 0;\n    padding: 4px 0;\n  }\n`\n\nconst FormRow = styled.div`\n  display: grid;\n  grid-template-columns: 150px 1fr auto;\n  gap: 0px;\n  align-items: center;\n  min-height: 37px;\n  position: relative;\n\n  .copy-icon {\n    opacity: 0;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n\n  &:hover .copy-icon {\n    opacity: 1;\n  }\n`\n\nconst FieldLabel = styled.div`\n  color: var(--md-sys-color-outline);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: 4px;\n`\n\nconst FieldValue = styled.div`\n  height: 32px;\n  overflow: hidden;\n  width: fit-content;\n  min-width: 160px;\n  max-width: 100%;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  border-radius: 4px;\n  padding: 0 4px;\n\n  &:not(.readonly) {\n    cursor: pointer;\n  }\n\n  &:hover:not(.readonly) {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n\n  .dropdown .button {\n    background-color: unset;\n  }\n\n  &.editing {\n    background-color: var(--md-sys-color-surface-container);\n    cursor: default;\n  }\n`\n\nconst ShimmerRow = styled(FormRow)`\n  &.loading {\n    width: 100%;\n    height: 33px;\n    min-height: unset;\n    border-radius: 4px;\n    margin-bottom: 4px;\n  }\n`\n\n// TODO: move styles to a separate file\n\nexport type AttributeField = Omit<AttributeModel, 'position' | 'scope' | 'builtin'> & {\n  readonly?: boolean\n  hidden?: boolean\n  enableCustomValues?: boolean // Allow custom values in enum fields\n  enableSearch?: boolean // Enable search functionality in enum fields\n  allowNone?: boolean // Allow \"None\" option for enum fields that can be cleared\n}\n\nexport interface DetailsPanelAttributesEditorProps {\n  title?: string\n  isLoading?: boolean // show loading shimmer for 20 placeholder items\n  enableEditing?: boolean // if this is false, everything is readonly\n  fields: AttributeField[] // the schema for the form\n  form: Record<\n    string,\n    string | number | boolean | Date | any[] | Record<string, any> | undefined | null\n  > // the form data\n  mixedFields?: string[] // when multiple entities are selected, this is a list of fields that are mixed\n  onChange?: (key: string, value: any) => void\n}\n\nexport const DetailsPanelAttributesEditor: FC<DetailsPanelAttributesEditorProps> = ({\n  title,\n  isLoading,\n  form,\n  fields,\n  enableEditing,\n  mixedFields,\n  onChange,\n}) => {\n  const [editingField, setEditingField] = useState<string | null>(null)\n\n  // Handler for starting to edit a field\n  const handleStartEditing = (fieldName: string) => {\n    if (enableEditing && !fields.find((field) => field.name === fieldName)?.readonly) {\n      setEditingField(fieldName)\n    }\n  }\n\n  // Handler for field value changes\n  const handleValueChange = (fieldName: string, value: CellValue | CellValue[]) => {\n    setEditingField(null)\n    onChange?.(fieldName, value)\n  }\n\n  const handleCancelEdit = () => {\n    setEditingField(null)\n  }\n\n  if (isLoading) {\n    return (\n      <StyledForm>\n        {title && <h3>{title}</h3>}\n        {Array.from({ length: fields.length ?? 10 }).map((_, index) => (\n          <ShimmerRow key={index} className=\"loading\"></ShimmerRow>\n        ))}\n      </StyledForm>\n    )\n  }\n\n  return (\n    <StyledForm>\n      {title && <h3>{title}</h3>}\n      {fields\n        .filter((f) => !f.hidden)\n        .map((field) => {\n          const fieldValue = form[field.name]\n          const isEditing = editingField === field.name\n          const isReadOnly = field.readonly || !enableEditing\n          const isMixed = mixedFields?.includes(field.name) || false\n\n          return (\n            <FormRow key={field.name}>\n              <FieldLabel title={field.data.description || field.data.title || field.name}>\n                {field.data.title || field.name}\n              </FieldLabel>\n              <FieldValue\n                className={clsx({ editing: isEditing, readonly: isReadOnly })}\n                onClick={() => !isEditing && handleStartEditing(field.name)}\n              >\n                <RenderFieldWidget\n                  field={field}\n                  value={fieldValue}\n                  isEditing={isEditing}\n                  isReadOnly={isReadOnly}\n                  isMixed={isMixed}\n                  onChange={handleValueChange}\n                  onCancelEdit={handleCancelEdit}\n                />\n              </FieldValue>\n              <Button\n                className=\"copy-icon\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  const valueToDisplay =\n                    fieldValue === null || fieldValue === undefined ? '' : fieldValue\n                  copyToClipboard(valueToDisplay.toString(), true)\n                }}\n              />\n            </FormRow>\n          )\n        })}\n    </StyledForm>\n  )\n}\n"],"names":["StyledForm","styled","FormRow","FieldLabel","FieldValue","ShimmerRow","DetailsPanelAttributesEditor","title","isLoading","form","fields","enableEditing","mixedFields","onChange","editingField","setEditingField","useState","handleStartEditing","fieldName","_a","field","handleValueChange","value","handleCancelEdit","jsx","_","index","f","fieldValue","isEditing","isReadOnly","isMixed","clsx","RenderFieldWidget","Button","e","copyToClipboard"],"mappings":"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"}