@ynput/ayon-frontend-shared 0.2.28 → 0.2.29

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

@@ -1,68 +1,56 @@
-import { j as t } from "../../../../_virtual/jsx-runtime.es.js";
+import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
 import "lodash";
 import "react-toastify";
-import { copyToClipboard as b } from "../../util/copyToClipboard.es.js";
+import { copyToClipboard as E } from "../../util/copyToClipboard.es.js";
 import "uuid";
 import "../../util/pubsub.es.js";
-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%;
-
-  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`
+import { useState as D, useMemo as R, useEffect as S } from "react";
+import m from "styled-components";
+import P from "clsx";
+import { Button as A } from "@ynput/ayon-react-components";
+import T from "./components/RenderFieldWidget.es.js";
+import { BorderedSection as u } from "../DetailsPanelDetails/BorderedSection.es.js";
+import { FieldLabel as C } from "../DetailsPanelDetails/FieldLabel.es.js";
+const g = m.div`
   display: grid;
-  grid-template-columns: 150px 1fr auto;
-  gap: 0px;
+  grid-template-columns: minmax(200px, 1fr) 1fr 32px;
+  row-gap: 2px;
+  column-gap: 4px;
   align-items: center;
-  min-height: 37px;
+  min-height: 32px;
   position: relative;
 
   .copy-icon {
     opacity: 0;
+    width: 32px;
+    height: 32px;
+    padding: 2px;
 
     &:hover {
-      background-color: var(--md-sys-color-surface-container-low-hover);
+      background-color: transparent !important;
     }
   }
 
   &:hover .copy-icon {
     opacity: 1;
   }
-`, C = i.div`
-  color: var(--md-sys-color-outline);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: 4px;
-`, D = i.div`
+`, V = m.div`
   height: 32px;
   overflow: hidden;
-  width: fit-content;
-  min-width: 160px;
-  max-width: 100%;
-  justify-self: end;
+  width: 100%;
+  justify-self: start;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   border-radius: 4px;
   padding: 0 4px;
+  text-align: left;
+  position: relative;
+  z-index: 1;
 
   &:not(.readonly) {
     cursor: pointer;
+    pointer-events: auto;
   }
 
   &:hover:not(.readonly) {
@@ -76,76 +64,91 @@ const m = i.div`
   &.editing {
     background-color: var(--md-sys-color-surface-container);
     cursor: default;
+    justify-content: flex-start;
+  }
+
+  &.readonly {
+    pointer-events: none;
   }
-`, F = i(u)`
-  &.loading {
+`, B = m(g)`
+  .shimmer {
     width: 100%;
-    height: 33px;
-    min-height: unset;
+    height: 24px;
     border-radius: 4px;
-    margin-bottom: 4px;
   }
-`, z = ({
-  title: e,
+`, Q = ({
   isLoading: h,
   form: x,
-  fields: a,
-  enableEditing: c,
-  mixedFields: s,
-  onChange: l
+  fields: s,
+  enableEditing: l,
+  mixedFields: d,
+  onChange: c,
+  entities: p = [],
+  entityType: y = "task"
 }) => {
-  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);
+  const [f, i] = D(null), v = R(
+    () => p.map((t) => t == null ? void 0 : t.id).join("|"),
+    [p]
+  );
+  S(() => {
+    i(null);
+  }, [v]);
+  const j = (t) => {
+    var o, n;
+    l && !((o = s.find((r) => r.name === t)) != null && o.readonly) ? i(t) : console.log("Editing not allowed:", {
+      enableEditing: l,
+      fieldReadonly: (n = s.find((r) => r.name === t)) == null ? void 0 : n.readonly
+    });
+  }, w = (t, o) => {
+    i(null), c == null || c(t, o);
+  }, b = () => {
+    i(null);
   };
-  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);
+  return h ? /* @__PURE__ */ e.jsx(u, { title: "Attributes", withPadding: !0, children: Array.from({ length: 10 }).map((t, o) => /* @__PURE__ */ e.jsxs(B, { children: [
+    /* @__PURE__ */ e.jsx("div", { className: "loading" }),
+    /* @__PURE__ */ e.jsx("div", { className: "loading" })
+  ] }, o)) }) : /* @__PURE__ */ e.jsx(u, { title: "Attributes", autoHeight: !0, showHeader: !0, withPadding: !0, children: s.filter((t) => !t.hidden).map((t) => {
+    const o = x[t.name], n = f === t.name, r = t.readonly || !l, k = (d == null ? void 0 : d.includes(t.name)) || !1;
+    return /* @__PURE__ */ e.jsxs(g, { children: [
+      /* @__PURE__ */ e.jsx(C, { name: t.name, data: t.data, showDetailedTooltip: !0 }),
+      /* @__PURE__ */ e.jsx(
+        V,
+        {
+          className: P({ editing: n, readonly: r }),
+          onClick: (a) => {
+            a.preventDefault(), a.stopPropagation(), !n && !r && t.data.type !== "boolean" && j(t.name);
+          },
+          children: /* @__PURE__ */ e.jsx(
+            T,
+            {
+              field: t,
+              value: o,
+              isEditing: n,
+              isReadOnly: r,
+              isMixed: k,
+              onChange: w,
+              onCancelEdit: b,
+              entities: p,
+              entityType: y
             }
+          )
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        A,
+        {
+          className: "copy-icon",
+          variant: "text",
+          icon: "content_copy",
+          onClick: (a) => {
+            a.preventDefault(), a.stopPropagation(), E((o ?? "").toString(), !0);
           }
-        )
-      ] }, o.name);
-    })
-  ] });
+        }
+      )
+    ] }, t.name);
+  }) });
 };
 export {
-  z as DetailsPanelAttributesEditor
+  Q 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  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":";;;;;;;;;;;AASA,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBpBC,IAAUD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBjBE,IAAaF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQpBG,IAAaH,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,GA+BpBI,IAAaJ,EAAOC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiCpBI,IAAsE,CAAC;AAAA,EAClF,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAwB,IAAI,GAG9DC,IAAqB,CAACC,MAAsB;;AAC5C,IAAAP,KAAiB,GAACQ,IAAAT,EAAO,KAAK,CAACU,MAAUA,EAAM,SAASF,CAAS,MAA/C,QAAAC,EAAkD,aACtEJ,EAAgBG,CAAS;AAAA,EAE7B,GAGMG,IAAoB,CAACH,GAAmBI,MAAmC;AAC/E,IAAAP,EAAgB,IAAI,GACpBF,KAAA,QAAAA,EAAWK,GAAWI;AAAA,EACxB,GAEMC,IAAmB,MAAM;AAC7B,IAAAR,EAAgB,IAAI;AAAA,EACtB;AAEA,SAAIP,2BAECR,GACE,EAAA,UAAA;AAAA,IAASO,KAAAiB,gBAAAA,EAAAA,IAAC,QAAI,UAAMjB,EAAA,CAAA;AAAA,IACpB,MAAM,KAAK,EAAE,QAAQG,EAAO,UAAU,IAAI,EAAE,IAAI,CAACe,GAAGC,MACnDF,gBAAAA,MAACnB,KAAuB,WAAU,UAAA,GAAjBqB,CAA2B,CAC7C;AAAA,EAAA,GACH,2BAKD1B,GACE,EAAA,UAAA;AAAA,IAASO,KAAAiB,gBAAAA,EAAAA,IAAC,QAAI,UAAMjB,EAAA,CAAA;AAAA,IACpBG,EACE,OAAO,CAACiB,MAAM,CAACA,EAAE,MAAM,EACvB,IAAI,CAACP,MAAU;AACR,YAAAQ,IAAanB,EAAKW,EAAM,IAAI,GAC5BS,IAAYf,MAAiBM,EAAM,MACnCU,IAAaV,EAAM,YAAY,CAACT,GAChCoB,KAAUnB,KAAA,gBAAAA,EAAa,SAASQ,EAAM,UAAS;AAErD,oCACGlB,GACC,EAAA,UAAA;AAAA,QAAAsB,gBAAAA,EAAA,IAACrB,GAAW,EAAA,OAAOiB,EAAM,KAAK,eAAeA,EAAM,KAAK,SAASA,EAAM,MACpE,UAAAA,EAAM,KAAK,SAASA,EAAM,MAC7B;AAAA,QACAI,gBAAAA,EAAA;AAAA,UAACpB;AAAA,UAAA;AAAA,YACC,WAAW4B,EAAK,EAAE,SAASH,GAAW,UAAUC,GAAY;AAAA,YAC5D,SAAS,MAAM,CAACD,KAAaZ,EAAmBG,EAAM,IAAI;AAAA,YAE1D,UAAAI,gBAAAA,EAAA;AAAA,cAACS;AAAA,cAAA;AAAA,gBACC,OAAAb;AAAA,gBACA,OAAOQ;AAAA,gBACP,WAAAC;AAAA,gBACA,YAAAC;AAAA,gBACA,SAAAC;AAAA,gBACA,UAAUV;AAAA,gBACV,cAAcE;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QACF;AAAA,QACAC,gBAAAA,EAAA;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,CAACC,MAAM;AACd,cAAAA,EAAE,gBAAgB,GAGFC,GADdR,KAAkD,IACrB,SAAS,GAAG,EAAI;AAAA,YAAA;AAAA,UACjD;AAAA,QAAA;AAAA,MACF,EAAA,GA5BYR,EAAM,IA6BpB;AAAA,IAEH,CAAA;AAAA,EAAA,GACL;AAEJ;"}
+{"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, useMemo, useEffect } 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'\nimport { BorderedSection } from '../DetailsPanelDetails/BorderedSection'\nimport { FieldLabel } from '../DetailsPanelDetails/FieldLabel'\n\nconst FormRow = styled.div`\n  display: grid;\n  grid-template-columns: minmax(200px, 1fr) 1fr 32px;\n  row-gap: 2px;\n  column-gap: 4px;\n  align-items: center;\n  min-height: 32px;\n  position: relative;\n\n  .copy-icon {\n    opacity: 0;\n    width: 32px;\n    height: 32px;\n    padding: 2px;\n\n    &:hover {\n      background-color: transparent !important;\n    }\n  }\n\n  &:hover .copy-icon {\n    opacity: 1;\n  }\n`\n\nconst FieldValue = styled.div`\n  height: 32px;\n  overflow: hidden;\n  width: 100%;\n  justify-self: start;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 4px;\n  padding: 0 4px;\n  text-align: left;\n  position: relative;\n  z-index: 1;\n\n  &:not(.readonly) {\n    cursor: pointer;\n    pointer-events: auto;\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    justify-content: flex-start;\n  }\n\n  &.readonly {\n    pointer-events: none;\n  }\n`\n\nconst ShimmerRow = styled(FormRow)`\n  .shimmer {\n    width: 100%;\n    height: 24px;\n    border-radius: 4px;\n  }\n`\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  entities?: any[] // entities data for scoped statuses\n  entityType?: string // entity type for scoped statuses\n}\n\nexport const DetailsPanelAttributesEditor: FC<DetailsPanelAttributesEditorProps> = ({\n  isLoading,\n  form,\n  fields,\n  enableEditing,\n  mixedFields,\n  onChange,\n  entities = [],\n  entityType = 'task',\n}) => {\n  const [editingField, setEditingField] = useState<string | null>(null)\n\n  const entitySelectionKey = useMemo(\n    () => entities.map((entity) => entity?.id).join('|'),\n    [entities],\n  )\n\n  useEffect(() => {\n    setEditingField(null)\n  }, [entitySelectionKey])\n\n  const handleStartEditing = (fieldName: string) => {\n    if (enableEditing && !fields.find((field) => field.name === fieldName)?.readonly) {\n      setEditingField(fieldName)\n    } else {\n      console.log('Editing not allowed:', {\n        enableEditing,\n        fieldReadonly: fields.find((field) => field.name === fieldName)?.readonly,\n      })\n    }\n  }\n\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      <BorderedSection title=\"Attributes\" withPadding>\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      </BorderedSection>\n    )\n  }\n\n  return (\n    <BorderedSection title=\"Attributes\" autoHeight showHeader withPadding>\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 name={field.name} data={field.data} showDetailedTooltip />\n              <FieldValue\n                className={clsx({ editing: isEditing, readonly: isReadOnly })}\n                onClick={(e) => {\n                  e.preventDefault()\n                  e.stopPropagation()\n                  if (!isEditing && !isReadOnly && field.data.type !== 'boolean') {\n                    handleStartEditing(field.name)\n                  }\n                }}\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                  entities={entities}\n                  entityType={entityType}\n                />\n              </FieldValue>\n              <Button\n                className=\"copy-icon\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  e.stopPropagation()\n                  const valueToDisplay =\n                    fieldValue === null || fieldValue === undefined ? '' : fieldValue\n                  copyToClipboard(valueToDisplay.toString(), true)\n                }}\n              />\n            </FormRow>\n          )\n        })}\n    </BorderedSection>\n  )\n}\n"],"names":["FormRow","styled","FieldValue","ShimmerRow","DetailsPanelAttributesEditor","isLoading","form","fields","enableEditing","mixedFields","onChange","entities","entityType","editingField","setEditingField","useState","entitySelectionKey","useMemo","entity","useEffect","handleStartEditing","fieldName","_a","field","_b","handleValueChange","value","handleCancelEdit","BorderedSection","_","index","jsx","f","fieldValue","isEditing","isReadOnly","isMixed","FieldLabel","clsx","e","RenderFieldWidget","Button","copyToClipboard"],"mappings":";;;;;;;;;;;;;AAWA,MAAMA,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyBjBC,IAAaD,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,GAsCpBE,IAAaF,EAAOD,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BpBI,IAAsE,CAAC;AAAA,EAClF,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW,CAAC;AAAA,EACZ,YAAAC,IAAa;AACf,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAwB,IAAI,GAE9DC,IAAqBC;AAAA,IACzB,MAAMN,EAAS,IAAI,CAACO,MAAWA,KAAA,gBAAAA,EAAQ,EAAE,EAAE,KAAK,GAAG;AAAA,IACnD,CAACP,CAAQ;AAAA,EACX;AAEA,EAAAQ,EAAU,MAAM;AACd,IAAAL,EAAgB,IAAI;AAAA,EAAA,GACnB,CAACE,CAAkB,CAAC;AAEjB,QAAAI,IAAqB,CAACC,MAAsB;;AAC5C,IAAAb,KAAiB,GAACc,IAAAf,EAAO,KAAK,CAACgB,MAAUA,EAAM,SAASF,CAAS,MAA/C,QAAAC,EAAkD,YACtER,EAAgBO,CAAS,IAEzB,QAAQ,IAAI,wBAAwB;AAAA,MAClC,eAAAb;AAAA,MACA,gBAAegB,IAAAjB,EAAO,KAAK,CAACgB,MAAUA,EAAM,SAASF,CAAS,MAA/C,gBAAAG,EAAkD;AAAA,IAAA,CAClE;AAAA,EAEL,GAEMC,IAAoB,CAACJ,GAAmBK,MAAmC;AAC/E,IAAAZ,EAAgB,IAAI,GACpBJ,KAAA,QAAAA,EAAWW,GAAWK;AAAA,EACxB,GAEMC,IAAmB,MAAM;AAC7B,IAAAb,EAAgB,IAAI;AAAA,EACtB;AAEA,SAAIT,0BAECuB,GAAgB,EAAA,OAAM,cAAa,aAAW,IAC5C,gBAAM,KAAK,EAAE,QAAQ,GAAA,CAAI,EAAE,IAAI,CAACC,GAAGC,6BACjC3B,GACC,EAAA,UAAA;AAAA,IAAC4B,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,UAAU,CAAA;AAAA,IACzBA,gBAAAA,EAAAA,IAAC,OAAI,EAAA,WAAU,UAAU,CAAA;AAAA,EAAA,KAFVD,CAGjB,CACD,GACH,IAKFC,gBAAAA,EAAA,IAACH,KAAgB,OAAM,cAAa,YAAU,IAAC,YAAU,IAAC,aAAW,IAClE,YACE,OAAO,CAACI,MAAM,CAACA,EAAE,MAAM,EACvB,IAAI,CAACT,MAAU;AACR,UAAAU,IAAa3B,EAAKiB,EAAM,IAAI,GAC5BW,IAAYrB,MAAiBU,EAAM,MACnCY,IAAaZ,EAAM,YAAY,CAACf,GAChC4B,KAAU3B,KAAA,gBAAAA,EAAa,SAASc,EAAM,UAAS;AAErD,kCACGvB,GACC,EAAA,UAAA;AAAA,MAAC+B,gBAAAA,EAAAA,IAAAM,GAAA,EAAW,MAAMd,EAAM,MAAM,MAAMA,EAAM,MAAM,qBAAmB,GAAC,CAAA;AAAA,MACpEQ,gBAAAA,EAAA;AAAA,QAAC7B;AAAA,QAAA;AAAA,UACC,WAAWoC,EAAK,EAAE,SAASJ,GAAW,UAAUC,GAAY;AAAA,UAC5D,SAAS,CAACI,MAAM;AACd,YAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GACd,CAACL,KAAa,CAACC,KAAcZ,EAAM,KAAK,SAAS,aACnDH,EAAmBG,EAAM,IAAI;AAAA,UAEjC;AAAA,UAEA,UAAAQ,gBAAAA,EAAA;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,OAAAjB;AAAA,cACA,OAAOU;AAAA,cACP,WAAAC;AAAA,cACA,YAAAC;AAAA,cACA,SAAAC;AAAA,cACA,UAAUX;AAAA,cACV,cAAcE;AAAA,cACd,UAAAhB;AAAA,cACA,YAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,MACAmB,gBAAAA,EAAA;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,CAACF,MAAM;AACd,YAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAGFG,GADdT,KAAkD,IACrB,SAAS,GAAG,EAAI;AAAA,UAAA;AAAA,QACjD;AAAA,MAAA;AAAA,IACF,EAAA,GAnCYV,EAAM,IAoCpB;AAAA,EAEH,CAAA,GACL;AAEJ;"}

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

@@ -1,4 +1,4 @@
-"use strict";const a=require("../../../../../_virtual/jsx-runtime.cjs.js"),x=require("styled-components"),p=require("../../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js"),j=require("../../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js"),W=require("../../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js"),v=require("../../../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js"),y=x.div`
+"use strict";const t=require("../../../../../_virtual/jsx-runtime.cjs.js"),h=require("styled-components"),y=require("../../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js"),w=require("../../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js"),E=require("../../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js"),S=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 f=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/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/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/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/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("../../../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("react-redux");require("custom-protocol-check");require("lodash");const b=h.div`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -6,10 +6,11 @@
   text-align: right;
 
   input {
-    text-align: right;
+    text-align: left;
   }
-`,w=x(v.EnumWidget)`
-  .enum {
+`,R=h(S.EnumWidget)`
+  .enum,
+  .edit-trigger {
     &:hover {
       background-color: unset;
     }
@@ -17,5 +18,5 @@
   &:hover {
     background-color: unset;
   }
-`,b=({field:e,value:l,isEditing:h,isReadOnly:u,isMixed:g,onChange:m,onCancelEdit:c})=>{const{type:s}=e.data,o={isEditing:h&&!u,isInherited:!1,onChange:r=>m(e.name,r)};let t=l??"";const d=e.data.title||e.name;switch(!0){case s==="boolean":return a.jsxRuntimeExports.jsx(j.BooleanWidget,{value:!!t,...o,style:{margin:0},onClick:()=>m(e.name,!t),isReadOnly:u});case s==="datetime":return a.jsxRuntimeExports.jsx(W.DateWidget,{value:t,...o,isEditing:!0,onCancelEdit:c,style:{width:"fit-content"},autoFocus:!1});case!!e.data.enum:{const r=s.includes("list");let n=[];r?n=Array.isArray(t)?t:[]:g?n=[]:n=[t];let i=e.data.enum||[];return e.allowNone&&n.length&&!r&&t&&t!==""&&(i=[{value:"",label:`No ${e.data.title||e.name}`},...i]),a.jsxRuntimeExports.jsx(w,{value:n,options:i,type:s,pt:{template:{style:{height:32},className:"enum"}},placeholder:g?`Mixed ${d}`:`Select ${d}...`,onClose:c,align:"right",isReadOnly:u,enableCustomValues:e.enableCustomValues??!1,search:e.enableSearch??!1,sortBySelected:!i,...o})}case(s==="string"||s==="integer"||s==="float"):default:return a.jsxRuntimeExports.jsx(y,{children:a.jsxRuntimeExports.jsx(p.TextWidget,{value:t.toString(),onCancelEdit:c,...o})})}};module.exports=b;
+`,T=({field:r,value:n,isEditing:j,isReadOnly:o,isMixed:d,onChange:v,onCancelEdit:a,entities:g=[],entityType:W="task"})=>{var p;const{type:e}=r.data,q={isEditing:j&&!o,isInherited:!1,onChange:l=>v(r.name,l)};let i=n??"";const m=r.data.title||r.name;switch(!0){case e==="boolean":return t.jsxRuntimeExports.jsx(w.BooleanWidget,{value:!!i,...q,style:{margin:0},isReadOnly:o});case e==="datetime":return t.jsxRuntimeExports.jsx(E.DateWidget,{value:i,...q,isEditing:!0,onCancelEdit:a,style:{width:"fit-content"},autoFocus:!1});case!!((p=r.data.enum)!=null&&p.length):{const l=e.includes("list");let s=[];l?s=Array.isArray(i)?i:[]:d?s=[]:s=[i];let x=r.data.enum||[];if(r.name==="status"&&g.length>0){const c=f.useScopedStatuses(g.map(u=>u.projectName),[W]);c&&c.length>0&&(x=c.map(u=>({value:u.name,label:u.name,icon:u.icon,color:u.color})))}return t.jsxRuntimeExports.jsx(R,{value:s,options:x,type:e,pt:{template:{style:{height:32},className:"enum"}},placeholder:d?`Mixed ${m}`:`Select ${m}...`,onCancelEdit:a,align:"right",isReadOnly:o,...q})}case(e==="string"||e==="integer"||e==="float"):default:return t.jsxRuntimeExports.jsx(b,{children:t.jsxRuntimeExports.jsx(y.TextWidget,{value:i.toString(),onCancelEdit:a,type:e,...q})})}};module.exports=T;
 //# sourceMappingURL=RenderFieldWidget.cjs.js.map

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'\n// Import AttributeField as a type to avoid runtime circular dependency with DetailsPanelAttributesEditor\nimport type { AttributeField } from '../DetailsPanelAttributesEditor'\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: right;\n  }\n`\n\nconst StyledEnumWidget = styled(EnumWidget)`\n  .enum {\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}\n\nconst RenderFieldWidget: FC<RenderFieldWidgetProps> = ({\n  field,\n  value,\n  isEditing,\n  isReadOnly,\n  isMixed,\n  onChange,\n  onCancelEdit,\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          onClick={() => onChange(field.name, !Boolean(displayValue))}\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      // Determine the value array based on type and state\n      let valueArray = []\n\n      if (isListType) {\n        // If it's a list type attribute\n        valueArray = Array.isArray(displayValue) ? displayValue : []\n      } else if (isMixed) {\n        // If this field has mixed values (multiple selection)\n        valueArray = []\n      } else {\n        // For single values, wrap in array for EnumWidget\n        valueArray = [displayValue]\n      }\n\n      // Add \"None\" option if allowNone is enabled and current value exists\n      let optionsWithNone = field.data.enum || []\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          optionsWithNone = [\n            { value: '', label: `No ${field.data.title || field.name}` },\n            ...optionsWithNone,\n          ]\n        }\n      }\n\n      return (\n        <StyledEnumWidget\n          value={valueArray}\n          options={optionsWithNone}\n          type={type}\n          pt={{\n            template: {\n              style: { height: 32 },\n              className: 'enum',\n            },\n          }}\n          placeholder={isMixed ? `Mixed ${labelValue}` : `Select ${labelValue}...`}\n          onClose={onCancelEdit}\n          align=\"right\"\n          isReadOnly={isReadOnly}\n          enableCustomValues={field.enableCustomValues ?? false}\n          search={field.enableSearch ?? false}\n          sortBySelected={!optionsWithNone}\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            {...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","type","widgetCommonProps","newValue","displayValue","labelValue","jsx","BooleanWidget","DateWidget","isListType","valueArray","optionsWithNone","TextWidget"],"mappings":"6ZAUMA,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,EAqBpCC,EAAgD,CAAC,CACrD,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,WAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,CACF,IAAM,CACE,KAAA,CAAE,KAAAC,GAASP,EAAM,KACjBQ,EAAoB,CACxB,UAAWN,GAAa,CAACC,EACzB,YAAa,GACb,SAAWM,GAAsCJ,EAASL,EAAM,KAAMS,CAAQ,CAChF,EAGA,IAAIC,EAAeT,GAAwC,GAC3D,MAAMU,EAAaX,EAAM,KAAK,OAASA,EAAM,KAG7C,OAAQ,GAAM,CACZ,KAAKO,IAAS,UAEV,OAAAK,EAAA,kBAAA,IAACC,EAAA,cAAA,CACC,MAAO,EAAQH,EACd,GAAGF,EACJ,MAAO,CAAE,OAAQ,CAAE,EACnB,QAAS,IAAMH,EAASL,EAAM,KAAM,CAASU,CAAa,EAC1D,WAAAP,CAAA,CACF,EAGJ,KAAKI,IAAS,WAEV,OAAAK,EAAA,kBAAA,IAACE,EAAA,WAAA,CACC,MAAOJ,EACN,GAAGF,EACJ,UAAS,GACT,aAAAF,EACA,MAAO,CAAE,MAAO,aAAc,EAC9B,UAAW,EAAA,CACb,EAGJ,IAAK,CAAC,CAACN,EAAM,KAAK,KAAM,CAChB,MAAAe,EAAaR,EAAK,SAAS,MAAM,EAEvC,IAAIS,EAAa,CAAC,EAEdD,EAEFC,EAAa,MAAM,QAAQN,CAAY,EAAIA,EAAe,CAAC,EAClDN,EAETY,EAAa,CAAC,EAGdA,EAAa,CAACN,CAAY,EAI5B,IAAIO,EAAkBjB,EAAM,KAAK,MAAQ,CAAC,EAC1C,OAAIA,EAAM,WAAegB,EAAW,QAAU,CAACD,GAErBL,GAAgBA,IAAiB,KAErCO,EAAA,CAChB,CAAE,MAAO,GAAI,MAAO,MAAMjB,EAAM,KAAK,OAASA,EAAM,IAAI,EAAG,EAC3D,GAAGiB,CACL,GAKFL,EAAA,kBAAA,IAACf,EAAA,CACC,MAAOmB,EACP,QAASC,EACT,KAAAV,EACA,GAAI,CACF,SAAU,CACR,MAAO,CAAE,OAAQ,EAAG,EACpB,UAAW,MAAA,CAEf,EACA,YAAaH,EAAU,SAASO,CAAU,GAAK,UAAUA,CAAU,MACnE,QAASL,EACT,MAAM,QACN,WAAAH,EACA,mBAAoBH,EAAM,oBAAsB,GAChD,OAAQA,EAAM,cAAgB,GAC9B,eAAgB,CAACiB,EAChB,GAAGT,CAAA,CACN,CAAA,CAIJ,KAAKD,IAAS,UAAYA,IAAS,WAAaA,IAAS,SACzD,QACE,+BACGZ,EACC,CAAA,SAAAiB,EAAA,kBAAA,IAACM,EAAA,WAAA,CACC,MAAOR,EAAa,SAAS,EAC7B,aAAAJ,EACC,GAAGE,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?.length: {\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      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          {...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","_a","isListType","valueArray","enumOptions","scopedStatuses","useScopedStatuses","entity","status","TextWidget"],"mappings":"k8KAYA,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,OACE,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,GAACW,EAAAjB,EAAM,KAAK,OAAX,MAAAiB,EAAiB,QAAQ,CACxB,MAAAC,EAAaT,EAAK,SAAS,MAAM,EACvC,IAAIU,EAAa,CAAC,EAEdD,EACFC,EAAa,MAAM,QAAQP,CAAY,EAAIA,EAAe,CAAC,EAClDR,EACTe,EAAa,CAAC,EAEdA,EAAa,CAACP,CAAY,EAI5B,IAAIQ,EAAcpB,EAAM,KAAK,MAAQ,CAAC,EACtC,GAAIA,EAAM,OAAS,UAAYO,EAAS,OAAS,EAAG,CAClD,MAAMc,EAAiBC,EAAA,kBACrBf,EAAS,IAAKgB,GAAWA,EAAO,WAAW,EAC3C,CAACf,CAAU,CACb,EACIa,GAAkBA,EAAe,OAAS,IAC9BD,EAAAC,EAAe,IAAKG,IAAY,CAC5C,MAAOA,EAAO,KACd,MAAOA,EAAO,KACd,KAAMA,EAAO,KACb,MAAOA,EAAO,KAAA,EACd,EACJ,CAIA,OAAAV,EAAA,kBAAA,IAACjB,EAAA,CACC,MAAOsB,EACP,QAASC,EACT,KAAAX,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,EACC,GAAGO,CAAA,CACN,CAAA,CAIJ,KAAKD,IAAS,UAAYA,IAAS,WAAaA,IAAS,SACzD,QACE,+BACGd,EACC,CAAA,SAAAmB,EAAA,kBAAA,IAACW,EAAA,WAAA,CACC,MAAOb,EAAa,SAAS,EAC7B,aAAAN,EACA,KAAAG,EACC,GAAGC,CAAA,CAAA,EAER,CAAA,CAGR"}