@ynput/ayon-frontend-shared 0.3.19 → 0.3.22

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

@@ -1 +1 @@
-{"version":3,"file":"EnumEditor.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { uniqueId } from 'lodash'\nimport { closestCenter, DndContext, DragEndEvent, DragOverlay, DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'\n\nimport { Button } from '@ynput/ayon-react-components'\n\nimport DraggableEnumEditorItem from './DraggableEnumEditorItem'\nimport * as Styled from './EnumEditor.styled'\nimport useDraggable from './hooks/useDraggable'\nimport { appendOrUpdateNumericSuffix } from './util'\n\nexport type AttributeData = {\n  id: string\n  isExpanded: boolean\n  label: string\n  value: string\n  color?: string\n  icon?: string\n  isLabelFocused: boolean\n  isNewAttribute: boolean\n}\n\nexport type NormalizedData = {\n  label: string\n  value: string | number | boolean\n  color?: string\n  icon?: string\n}\n\nconst creator = (): AttributeData => ({\n  id: uniqueId(),\n  isExpanded: true,\n  label: '',\n  value: '',\n  isLabelFocused: true,\n  isNewAttribute: false,\n})\n\nconst normalize = (data: AttributeData[]): NormalizedData[] => {\n  return data\n    .filter((item) => item.label !== '' && item.value !== '')\n    .map(({ label, value, icon, color }) => {\n      let normalizedValue = value\n      return {\n        label,\n        value: normalizedValue,\n        icon: icon || undefined,\n        color: color || undefined,\n      }\n    })\n}\n\nconst denormalize = (data: NormalizedData[]): AttributeData[] => {\n  return data.map(({ label, value, icon, color }) => {\n    return {\n      id: uniqueId(),\n      isExpanded: false,\n      label,\n      value: value.toString(),\n      icon: icon,\n      color: color,\n      isLabelFocused: false,\n      isNewAttribute: false,\n    }\n  })\n}\n\ntype Props = {\n  values: NormalizedData[]\n  onChange: (data: NormalizedData[]) => void\n}\nexport const EnumEditor = ({ values, onChange }: Props) => {\n  if (!values) {\n    return null\n  }\n\n  const {\n    items,\n    handleAddItem,\n    handleRemoveItem,\n    handleChangeItem,\n    handleDuplicateItem,\n    handleDraggableEnd,\n  } = useDraggable<AttributeData, NormalizedData>({\n    creator,\n    initialData: denormalize(values),\n    onChange,\n    normalizer: normalize,\n  })\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setDraggedItemId(event.active.id as string)\n  }\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    setDraggedItemId(null)\n    handleDraggableEnd(event)\n  }\n\n  const [draggedItemId, setDraggedItemId] = useState<string | null>()\n  let draggedItem\n  if (draggedItemId) {\n    draggedItem = items.find((item) => item.id === draggedItemId)\n  }\n\n  return (\n    <>\n      <Styled.EnumListWrapper>\n        <DndContext\n          collisionDetection={closestCenter}\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n        >\n          <SortableContext items={items} strategy={verticalListSortingStrategy}>\n            {items.map((item, idx) => (\n              <DraggableEnumEditorItem\n                key={`DraggableAttributeEnum_${item.id}`}\n                item={item}\n                isBeingDragged={item.id === draggedItemId}\n                onChange={handleChangeItem(idx)}\n                onRemove={handleRemoveItem(idx)}\n                onDuplicate={() =>\n                  handleDuplicateItem(idx, {\n                    isLabelFocused: true,\n                    isNewAttribute: true,\n                    label: appendOrUpdateNumericSuffix(\n                      items[idx].label,\n                      items.map((e) => e.label),\n                      ' ',\n                    ),\n                    value: appendOrUpdateNumericSuffix(\n                      items[idx].value,\n                      items.map((el) => el.value),\n                      '-',\n                    ),\n                  })\n                }\n              />\n            ))}\n          </SortableContext>\n\n          {createPortal(\n            <DragOverlay style={{}}>\n              {draggedItem && <DraggableEnumEditorItem item={draggedItem} />}\n            </DragOverlay>,\n            document.body,\n          )}\n        </DndContext>\n\n        <Button\n          icon=\"add\"\n          variant=\"text\"\n          onClick={() => handleAddItem({ isNewAttribute: true })}\n          style={{ display: 'flex', justifyContent: 'start' }}\n        >\n          Add new item\n        </Button>\n      </Styled.EnumListWrapper>\n    </>\n  )\n}\n"],"names":["creator","uniqueId","normalize","data","item","label","value","icon","color","denormalize","EnumEditor","values","onChange","items","handleAddItem","handleRemoveItem","handleChangeItem","handleDuplicateItem","handleDraggableEnd","useDraggable","handleDragStart","event","setDraggedItemId","handleDragEnd","draggedItemId","useState","draggedItem","jsx","Fragment","jsxs","Styled.EnumListWrapper","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","idx","DraggableEnumEditorItem","appendOrUpdateNumericSuffix","e","el","createPortal","DragOverlay","Button"],"mappings":"6cA+BMA,EAAU,KAAsB,CACpC,GAAIC,EAAAA,SAAA,EACJ,WAAY,GACZ,MAAO,GACP,MAAO,GACP,eAAgB,GAChB,eAAgB,EAClB,GAEMC,EAAaC,GACVA,EACJ,OAAQC,GAASA,EAAK,QAAU,IAAMA,EAAK,QAAU,EAAE,EACvD,IAAI,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAM,MAAAC,MAEnB,CACL,MAAAH,EACA,MAHoBC,EAIpB,KAAMC,GAAQ,OACd,MAAOC,GAAS,MAAA,EAEnB,EAGCC,EAAeN,GACZA,EAAK,IAAI,CAAC,CAAE,MAAAE,EAAO,MAAAC,EAAO,KAAAC,EAAM,MAAAC,MAC9B,CACL,GAAIP,EAAAA,SAAA,EACJ,WAAY,GACZ,MAAAI,EACA,MAAOC,EAAM,SAAA,EACb,KAAAC,EACA,MAAAC,EACA,eAAgB,GAChB,eAAgB,EAAA,EAEnB,EAOUE,EAAa,CAAC,CAAE,OAAAC,EAAQ,SAAAC,KAAsB,CACzD,GAAI,CAACD,EACH,OAAO,KAGT,KAAM,CACJ,MAAAE,EACA,cAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,oBAAAC,EACA,mBAAAC,CAAA,EACEC,EAA4C,CAC9C,QAAAnB,EACA,YAAaS,EAAYE,CAAM,EAC/B,SAAAC,EACA,WAAYV,CAAA,CACb,EAEKkB,EAAmBC,GAA0B,CACjDC,EAAiBD,EAAM,OAAO,EAAY,CAC5C,EAEME,EAAiBF,GAAwB,CAC7CC,EAAiB,IAAI,EACrBJ,EAAmBG,CAAK,CAC1B,EAEM,CAACG,EAAeF,CAAgB,EAAIG,WAAA,EAC1C,IAAIC,EACJ,OAAIF,IACFE,EAAcb,EAAM,KAAMT,GAASA,EAAK,KAAOoB,CAAa,GAI5DG,EAAAA,kBAAAA,IAAAC,EAAAA,kBAAAA,SAAA,CACE,SAAAC,EAAAA,kBAAAA,KAACC,EAAAA,gBAAA,CACC,SAAA,CAAAD,EAAAA,kBAAAA,KAACE,EAAAA,WAAA,CACC,mBAAoBC,EAAAA,cACpB,YAAaZ,EACb,UAAWG,EAEX,SAAA,CAAAI,EAAAA,kBAAAA,IAACM,EAAAA,gBAAA,CAAgB,MAAApB,EAAc,SAAUqB,EAAAA,4BACtC,WAAM,IAAI,CAAC9B,EAAM+B,IAChBR,EAAAA,kBAAAA,IAACS,EAAA,CAEC,KAAAhC,EACA,eAAgBA,EAAK,KAAOoB,EAC5B,SAAUR,EAAiBmB,CAAG,EAC9B,SAAUpB,EAAiBoB,CAAG,EAC9B,YAAa,IACXlB,EAAoBkB,EAAK,CACvB,eAAgB,GAChB,eAAgB,GAChB,MAAOE,EAAAA,4BACLxB,EAAMsB,CAAG,EAAE,MACXtB,EAAM,IAAKyB,GAAMA,EAAE,KAAK,EACxB,GAAA,EAEF,MAAOD,EAAAA,4BACLxB,EAAMsB,CAAG,EAAE,MACXtB,EAAM,IAAK0B,GAAOA,EAAG,KAAK,EAC1B,GAAA,CACF,CACD,CAAA,EAnBE,0BAA0BnC,EAAK,EAAE,EAAA,CAsBzC,EACH,EAECoC,EAAAA,aACCb,EAAAA,kBAAAA,IAACc,EAAAA,YAAA,CAAY,MAAO,CAAA,EACjB,YAAed,EAAAA,kBAAAA,IAACS,EAAA,CAAwB,KAAMV,CAAA,CAAa,CAAA,CAC9D,EACA,SAAS,IAAA,CACX,CAAA,CAAA,EAGFC,EAAAA,kBAAAA,IAACe,EAAAA,OAAA,CACC,KAAK,MACL,QAAQ,OACR,QAAS,IAAM5B,EAAc,CAAE,eAAgB,GAAM,EACrD,MAAO,CAAE,QAAS,OAAQ,eAAgB,OAAA,EAC3C,SAAA,cAAA,CAAA,CAED,CAAA,CACF,CAAA,CACF,CAEJ"}
+{"version":3,"file":"EnumEditor.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { uniqueId } from 'lodash'\nimport { closestCenter, DndContext, DragEndEvent, DragOverlay, DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'\n\nimport { Button } from '@ynput/ayon-react-components'\n\nimport DraggableEnumEditorItem, { DraggableEnumEditorItemProps } from './DraggableEnumEditorItem'\nimport * as Styled from './EnumEditor.styled'\nimport useDraggable from './hooks/useDraggable'\nimport { appendOrUpdateNumericSuffix } from './util'\n\nexport interface EnumEditorPt {\n  item?: DraggableEnumEditorItemProps\n  addButton?: Partial<React.ComponentProps<typeof Button>>\n}\n\nexport type AttributeData = {\n  id: string\n  isExpanded: boolean\n  label: string\n  value: string\n  color?: string\n  icon?: string\n  isLabelFocused: boolean\n  isNewAttribute: boolean\n}\n\nexport type NormalizedData = {\n  label: string\n  value: string | number | boolean\n  color?: string\n  icon?: string\n}\n\nconst creator = (): AttributeData => ({\n  id: uniqueId(),\n  isExpanded: true,\n  label: '',\n  value: '',\n  isLabelFocused: true,\n  isNewAttribute: false,\n})\n\nconst normalize = (data: AttributeData[]): NormalizedData[] => {\n  return data\n    .filter((item) => item.label !== '' && item.value !== '')\n    .map(({ label, value, icon, color }) => {\n      let normalizedValue = value\n      return {\n        label,\n        value: normalizedValue,\n        icon: icon || undefined,\n        color: color || undefined,\n      }\n    })\n}\n\nconst denormalize = (data: NormalizedData[]): AttributeData[] => {\n  return data.map(({ label, value, icon, color }) => {\n    return {\n      id: uniqueId(),\n      isExpanded: false,\n      label,\n      value: value.toString(),\n      icon: icon,\n      color: color,\n      isLabelFocused: false,\n      isNewAttribute: false,\n    }\n  })\n}\n\nconst mergeIncomingItems = (\n  currentItems: AttributeData[],\n  incomingItems: AttributeData[],\n): AttributeData[] => {\n  return incomingItems.map((incomingItem, index) => {\n    const currentItem = currentItems[index]\n\n    if (!currentItem) {\n      return incomingItem\n    }\n\n    return {\n      ...incomingItem,\n      id: currentItem.id,\n      isExpanded: currentItem.isExpanded,\n      isLabelFocused: currentItem.isLabelFocused,\n      isNewAttribute: currentItem.isNewAttribute,\n    }\n  })\n}\n\ninterface EnumEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  values: NormalizedData[]\n  onChange: (data: NormalizedData[]) => void\n  onCommit?: (data: NormalizedData[]) => void\n  pt?: EnumEditorPt\n}\nexport const EnumEditor = ({ values, onChange, onCommit, pt, ...props }: EnumEditorProps) => {\n  if (!values) {\n    return null\n  }\n\n  const {\n    items,\n    handleAddItem,\n    handleRemoveItem,\n    handleChangeItem,\n    handleCommitItem,\n    handleDuplicateItem,\n    handleDraggableEnd,\n  } = useDraggable<AttributeData, NormalizedData>({\n    creator,\n    initialData: denormalize(values),\n    onChange,\n    onCommit,\n    normalizer: normalize,\n    mergeIncomingData: mergeIncomingItems,\n  })\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setDraggedItemId(event.active.id as string)\n  }\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    setDraggedItemId(null)\n    handleDraggableEnd(event)\n  }\n\n  const [draggedItemId, setDraggedItemId] = useState<string | null>()\n  let draggedItem\n  if (draggedItemId) {\n    draggedItem = items.find((item) => item.id === draggedItemId)\n  }\n\n  return (\n    <>\n      <Styled.EnumListWrapper {...props}>\n        <DndContext\n          collisionDetection={closestCenter}\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n        >\n          <SortableContext items={items} strategy={verticalListSortingStrategy}>\n            {items.map((item, idx) => (\n              <DraggableEnumEditorItem\n                key={`DraggableAttributeEnum_${item.id}`}\n                item={item}\n                isBeingDragged={item.id === draggedItemId}\n                onChange={handleChangeItem(idx)}\n                onCommit={handleCommitItem(idx)}\n                onRemove={handleRemoveItem(idx)}\n                onDuplicate={() =>\n                  handleDuplicateItem(idx, {\n                    isLabelFocused: true,\n                    isNewAttribute: true,\n                    label: appendOrUpdateNumericSuffix(\n                      items[idx].label,\n                      items.map((e) => e.label),\n                      ' ',\n                    ),\n                    value: appendOrUpdateNumericSuffix(\n                      items[idx].value,\n                      items.map((el) => el.value),\n                      '-',\n                    ),\n                  })\n                }\n                {...pt?.item}\n              />\n            ))}\n          </SortableContext>\n\n          {createPortal(\n            <DragOverlay style={{}}>\n              {draggedItem && <DraggableEnumEditorItem item={draggedItem} {...pt?.item} />}\n            </DragOverlay>,\n            document.body,\n          )}\n        </DndContext>\n\n        <Button\n          {...pt?.addButton}\n          icon=\"add\"\n          variant=\"text\"\n          onClick={() => handleAddItem({ isNewAttribute: true })}\n          className={pt?.addButton?.className}\n          style={{ display: 'flex', justifyContent: 'start' }}\n        >\n          Add new item\n        </Button>\n      </Styled.EnumListWrapper>\n    </>\n  )\n}\n"],"names":["creator","uniqueId","normalize","data","item","label","value","icon","color","denormalize","mergeIncomingItems","currentItems","incomingItems","incomingItem","index","currentItem","EnumEditor","values","onChange","onCommit","pt","props","items","handleAddItem","handleRemoveItem","handleChangeItem","handleCommitItem","handleDuplicateItem","handleDraggableEnd","useDraggable","handleDragStart","event","setDraggedItemId","handleDragEnd","draggedItemId","useState","draggedItem","jsxs","Styled.EnumListWrapper","DndContext","closestCenter","jsx","SortableContext","verticalListSortingStrategy","idx","DraggableEnumEditorItem","appendOrUpdateNumericSuffix","e","el","createPortal","DragOverlay","Button"],"mappings":"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"}

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

@@ -1,101 +1,117 @@
-import { j as r } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as x } from "react";
-import { createPortal as E } from "react-dom";
+import { j as n } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as A } from "react";
+import { createPortal as C } from "react-dom";
 import { uniqueId as f } from "lodash";
-import { DndContext as j, closestCenter as I, DragOverlay as y } from "@dnd-kit/core";
-import { SortableContext as S, verticalListSortingStrategy as A } from "@dnd-kit/sortable";
-import { Button as C } from "@ynput/ayon-react-components";
+import { DndContext as N, closestCenter as y, DragOverlay as S } from "@dnd-kit/core";
+import { SortableContext as w, verticalListSortingStrategy as L } from "@dnd-kit/sortable";
+import { Button as F } from "@ynput/ayon-react-components";
 import g from "./DraggableEnumEditorItem.es.js";
-import { EnumListWrapper as w } from "./EnumEditor.styled.es.js";
-import z from "./hooks/useDraggable.es.js";
+import { EnumListWrapper as z } from "./EnumEditor.styled.es.js";
+import B from "./hooks/useDraggable.es.js";
 import { appendOrUpdateNumericSuffix as p } from "./util/index.es.js";
-const L = () => ({
+const R = () => ({
   id: f(),
   isExpanded: !0,
   label: "",
   value: "",
   isLabelFocused: !0,
   isNewAttribute: !1
-}), N = (n) => n.filter((a) => a.label !== "" && a.value !== "").map(({ label: a, value: e, icon: i, color: o }) => ({
-  label: a,
-  value: e,
-  icon: i || void 0,
-  color: o || void 0
-})), F = (n) => n.map(({ label: a, value: e, icon: i, color: o }) => ({
+}), O = (i) => i.filter((t) => t.label !== "" && t.value !== "").map(({ label: t, value: o, icon: r, color: e }) => ({
+  label: t,
+  value: o,
+  icon: r || void 0,
+  color: e || void 0
+})), V = (i) => i.map(({ label: t, value: o, icon: r, color: e }) => ({
   id: f(),
   isExpanded: !1,
-  label: a,
-  value: e.toString(),
-  icon: i,
-  color: o,
+  label: t,
+  value: o.toString(),
+  icon: r,
+  color: e,
   isLabelFocused: !1,
   isNewAttribute: !1
-})), G = ({ values: n, onChange: a }) => {
-  if (!n)
+})), k = (i, t) => t.map((o, r) => {
+  const e = i[r];
+  return e ? {
+    ...o,
+    id: e.id,
+    isExpanded: e.isExpanded,
+    isLabelFocused: e.isLabelFocused,
+    isNewAttribute: e.isNewAttribute
+  } : o;
+}), Q = ({ values: i, onChange: t, onCommit: o, pt: r, ...e }) => {
+  if (!i)
     return null;
   const {
-    items: e,
-    handleAddItem: i,
-    handleRemoveItem: o,
-    handleChangeItem: u,
-    handleDuplicateItem: b,
-    handleDraggableEnd: D
-  } = z({
-    creator: L,
-    initialData: F(n),
-    onChange: a,
-    normalizer: N
-  }), h = (t) => {
-    c(t.active.id);
-  }, v = (t) => {
-    c(null), D(t);
-  }, [d, c] = x();
-  let s;
-  return d && (s = e.find((t) => t.id === d)), /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsxs(w, { children: [
-    /* @__PURE__ */ r.jsxs(
-      j,
+    items: l,
+    handleAddItem: b,
+    handleRemoveItem: D,
+    handleChangeItem: h,
+    handleCommitItem: x,
+    handleDuplicateItem: I,
+    handleDraggableEnd: v
+  } = B({
+    creator: R,
+    initialData: V(i),
+    onChange: t,
+    onCommit: o,
+    normalizer: O,
+    mergeIncomingData: k
+  }), E = (a) => {
+    c(a.active.id);
+  }, j = (a) => {
+    c(null), v(a);
+  }, [d, c] = A();
+  let m;
+  return d && (m = l.find((a) => a.id === d)), /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsxs(z, { ...e, children: [
+    /* @__PURE__ */ n.jsxs(
+      N,
       {
-        collisionDetection: I,
-        onDragStart: h,
-        onDragEnd: v,
+        collisionDetection: y,
+        onDragStart: E,
+        onDragEnd: j,
         children: [
-          /* @__PURE__ */ r.jsx(S, { items: e, strategy: A, children: e.map((t, l) => /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ n.jsx(w, { items: l, strategy: L, children: l.map((a, s) => /* @__PURE__ */ n.jsx(
             g,
             {
-              item: t,
-              isBeingDragged: t.id === d,
-              onChange: u(l),
-              onRemove: o(l),
-              onDuplicate: () => b(l, {
+              item: a,
+              isBeingDragged: a.id === d,
+              onChange: h(s),
+              onCommit: x(s),
+              onRemove: D(s),
+              onDuplicate: () => I(s, {
                 isLabelFocused: !0,
                 isNewAttribute: !0,
                 label: p(
-                  e[l].label,
-                  e.map((m) => m.label),
+                  l[s].label,
+                  l.map((u) => u.label),
                   " "
                 ),
                 value: p(
-                  e[l].value,
-                  e.map((m) => m.value),
+                  l[s].value,
+                  l.map((u) => u.value),
                   "-"
                 )
-              })
+              }),
+              ...r?.item
             },
-            `DraggableAttributeEnum_${t.id}`
+            `DraggableAttributeEnum_${a.id}`
           )) }),
-          E(
-            /* @__PURE__ */ r.jsx(y, { style: {}, children: s && /* @__PURE__ */ r.jsx(g, { item: s }) }),
+          C(
+            /* @__PURE__ */ n.jsx(S, { style: {}, children: m && /* @__PURE__ */ n.jsx(g, { item: m, ...r?.item }) }),
             document.body
           )
         ]
       }
     ),
-    /* @__PURE__ */ r.jsx(
-      C,
+    /* @__PURE__ */ n.jsx(
+      F,
       {
+        ...r?.addButton,
         icon: "add",
         variant: "text",
-        onClick: () => i({ isNewAttribute: !0 }),
+        onClick: () => b({ isNewAttribute: !0 }),
+        className: r?.addButton?.className,
         style: { display: "flex", justifyContent: "start" },
         children: "Add new item"
       }
@@ -103,6 +119,6 @@ const L = () => ({
   ] }) });
 };
 export {
-  G as EnumEditor
+  Q as EnumEditor
 };
 //# sourceMappingURL=EnumEditor.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EnumEditor.es.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { uniqueId } from 'lodash'\nimport { closestCenter, DndContext, DragEndEvent, DragOverlay, DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'\n\nimport { Button } from '@ynput/ayon-react-components'\n\nimport DraggableEnumEditorItem from './DraggableEnumEditorItem'\nimport * as Styled from './EnumEditor.styled'\nimport useDraggable from './hooks/useDraggable'\nimport { appendOrUpdateNumericSuffix } from './util'\n\nexport type AttributeData = {\n  id: string\n  isExpanded: boolean\n  label: string\n  value: string\n  color?: string\n  icon?: string\n  isLabelFocused: boolean\n  isNewAttribute: boolean\n}\n\nexport type NormalizedData = {\n  label: string\n  value: string | number | boolean\n  color?: string\n  icon?: string\n}\n\nconst creator = (): AttributeData => ({\n  id: uniqueId(),\n  isExpanded: true,\n  label: '',\n  value: '',\n  isLabelFocused: true,\n  isNewAttribute: false,\n})\n\nconst normalize = (data: AttributeData[]): NormalizedData[] => {\n  return data\n    .filter((item) => item.label !== '' && item.value !== '')\n    .map(({ label, value, icon, color }) => {\n      let normalizedValue = value\n      return {\n        label,\n        value: normalizedValue,\n        icon: icon || undefined,\n        color: color || undefined,\n      }\n    })\n}\n\nconst denormalize = (data: NormalizedData[]): AttributeData[] => {\n  return data.map(({ label, value, icon, color }) => {\n    return {\n      id: uniqueId(),\n      isExpanded: false,\n      label,\n      value: value.toString(),\n      icon: icon,\n      color: color,\n      isLabelFocused: false,\n      isNewAttribute: false,\n    }\n  })\n}\n\ntype Props = {\n  values: NormalizedData[]\n  onChange: (data: NormalizedData[]) => void\n}\nexport const EnumEditor = ({ values, onChange }: Props) => {\n  if (!values) {\n    return null\n  }\n\n  const {\n    items,\n    handleAddItem,\n    handleRemoveItem,\n    handleChangeItem,\n    handleDuplicateItem,\n    handleDraggableEnd,\n  } = useDraggable<AttributeData, NormalizedData>({\n    creator,\n    initialData: denormalize(values),\n    onChange,\n    normalizer: normalize,\n  })\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setDraggedItemId(event.active.id as string)\n  }\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    setDraggedItemId(null)\n    handleDraggableEnd(event)\n  }\n\n  const [draggedItemId, setDraggedItemId] = useState<string | null>()\n  let draggedItem\n  if (draggedItemId) {\n    draggedItem = items.find((item) => item.id === draggedItemId)\n  }\n\n  return (\n    <>\n      <Styled.EnumListWrapper>\n        <DndContext\n          collisionDetection={closestCenter}\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n        >\n          <SortableContext items={items} strategy={verticalListSortingStrategy}>\n            {items.map((item, idx) => (\n              <DraggableEnumEditorItem\n                key={`DraggableAttributeEnum_${item.id}`}\n                item={item}\n                isBeingDragged={item.id === draggedItemId}\n                onChange={handleChangeItem(idx)}\n                onRemove={handleRemoveItem(idx)}\n                onDuplicate={() =>\n                  handleDuplicateItem(idx, {\n                    isLabelFocused: true,\n                    isNewAttribute: true,\n                    label: appendOrUpdateNumericSuffix(\n                      items[idx].label,\n                      items.map((e) => e.label),\n                      ' ',\n                    ),\n                    value: appendOrUpdateNumericSuffix(\n                      items[idx].value,\n                      items.map((el) => el.value),\n                      '-',\n                    ),\n                  })\n                }\n              />\n            ))}\n          </SortableContext>\n\n          {createPortal(\n            <DragOverlay style={{}}>\n              {draggedItem && <DraggableEnumEditorItem item={draggedItem} />}\n            </DragOverlay>,\n            document.body,\n          )}\n        </DndContext>\n\n        <Button\n          icon=\"add\"\n          variant=\"text\"\n          onClick={() => handleAddItem({ isNewAttribute: true })}\n          style={{ display: 'flex', justifyContent: 'start' }}\n        >\n          Add new item\n        </Button>\n      </Styled.EnumListWrapper>\n    </>\n  )\n}\n"],"names":["creator","uniqueId","normalize","data","item","label","value","icon","color","denormalize","EnumEditor","values","onChange","items","handleAddItem","handleRemoveItem","handleChangeItem","handleDuplicateItem","handleDraggableEnd","useDraggable","handleDragStart","event","setDraggedItemId","handleDragEnd","draggedItemId","useState","draggedItem","jsx","Fragment","jsxs","Styled.EnumListWrapper","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","idx","DraggableEnumEditorItem","appendOrUpdateNumericSuffix","e","el","createPortal","DragOverlay","Button"],"mappings":"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"}
+{"version":3,"file":"EnumEditor.es.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { uniqueId } from 'lodash'\nimport { closestCenter, DndContext, DragEndEvent, DragOverlay, DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'\n\nimport { Button } from '@ynput/ayon-react-components'\n\nimport DraggableEnumEditorItem, { DraggableEnumEditorItemProps } from './DraggableEnumEditorItem'\nimport * as Styled from './EnumEditor.styled'\nimport useDraggable from './hooks/useDraggable'\nimport { appendOrUpdateNumericSuffix } from './util'\n\nexport interface EnumEditorPt {\n  item?: DraggableEnumEditorItemProps\n  addButton?: Partial<React.ComponentProps<typeof Button>>\n}\n\nexport type AttributeData = {\n  id: string\n  isExpanded: boolean\n  label: string\n  value: string\n  color?: string\n  icon?: string\n  isLabelFocused: boolean\n  isNewAttribute: boolean\n}\n\nexport type NormalizedData = {\n  label: string\n  value: string | number | boolean\n  color?: string\n  icon?: string\n}\n\nconst creator = (): AttributeData => ({\n  id: uniqueId(),\n  isExpanded: true,\n  label: '',\n  value: '',\n  isLabelFocused: true,\n  isNewAttribute: false,\n})\n\nconst normalize = (data: AttributeData[]): NormalizedData[] => {\n  return data\n    .filter((item) => item.label !== '' && item.value !== '')\n    .map(({ label, value, icon, color }) => {\n      let normalizedValue = value\n      return {\n        label,\n        value: normalizedValue,\n        icon: icon || undefined,\n        color: color || undefined,\n      }\n    })\n}\n\nconst denormalize = (data: NormalizedData[]): AttributeData[] => {\n  return data.map(({ label, value, icon, color }) => {\n    return {\n      id: uniqueId(),\n      isExpanded: false,\n      label,\n      value: value.toString(),\n      icon: icon,\n      color: color,\n      isLabelFocused: false,\n      isNewAttribute: false,\n    }\n  })\n}\n\nconst mergeIncomingItems = (\n  currentItems: AttributeData[],\n  incomingItems: AttributeData[],\n): AttributeData[] => {\n  return incomingItems.map((incomingItem, index) => {\n    const currentItem = currentItems[index]\n\n    if (!currentItem) {\n      return incomingItem\n    }\n\n    return {\n      ...incomingItem,\n      id: currentItem.id,\n      isExpanded: currentItem.isExpanded,\n      isLabelFocused: currentItem.isLabelFocused,\n      isNewAttribute: currentItem.isNewAttribute,\n    }\n  })\n}\n\ninterface EnumEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  values: NormalizedData[]\n  onChange: (data: NormalizedData[]) => void\n  onCommit?: (data: NormalizedData[]) => void\n  pt?: EnumEditorPt\n}\nexport const EnumEditor = ({ values, onChange, onCommit, pt, ...props }: EnumEditorProps) => {\n  if (!values) {\n    return null\n  }\n\n  const {\n    items,\n    handleAddItem,\n    handleRemoveItem,\n    handleChangeItem,\n    handleCommitItem,\n    handleDuplicateItem,\n    handleDraggableEnd,\n  } = useDraggable<AttributeData, NormalizedData>({\n    creator,\n    initialData: denormalize(values),\n    onChange,\n    onCommit,\n    normalizer: normalize,\n    mergeIncomingData: mergeIncomingItems,\n  })\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setDraggedItemId(event.active.id as string)\n  }\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    setDraggedItemId(null)\n    handleDraggableEnd(event)\n  }\n\n  const [draggedItemId, setDraggedItemId] = useState<string | null>()\n  let draggedItem\n  if (draggedItemId) {\n    draggedItem = items.find((item) => item.id === draggedItemId)\n  }\n\n  return (\n    <>\n      <Styled.EnumListWrapper {...props}>\n        <DndContext\n          collisionDetection={closestCenter}\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n        >\n          <SortableContext items={items} strategy={verticalListSortingStrategy}>\n            {items.map((item, idx) => (\n              <DraggableEnumEditorItem\n                key={`DraggableAttributeEnum_${item.id}`}\n                item={item}\n                isBeingDragged={item.id === draggedItemId}\n                onChange={handleChangeItem(idx)}\n                onCommit={handleCommitItem(idx)}\n                onRemove={handleRemoveItem(idx)}\n                onDuplicate={() =>\n                  handleDuplicateItem(idx, {\n                    isLabelFocused: true,\n                    isNewAttribute: true,\n                    label: appendOrUpdateNumericSuffix(\n                      items[idx].label,\n                      items.map((e) => e.label),\n                      ' ',\n                    ),\n                    value: appendOrUpdateNumericSuffix(\n                      items[idx].value,\n                      items.map((el) => el.value),\n                      '-',\n                    ),\n                  })\n                }\n                {...pt?.item}\n              />\n            ))}\n          </SortableContext>\n\n          {createPortal(\n            <DragOverlay style={{}}>\n              {draggedItem && <DraggableEnumEditorItem item={draggedItem} {...pt?.item} />}\n            </DragOverlay>,\n            document.body,\n          )}\n        </DndContext>\n\n        <Button\n          {...pt?.addButton}\n          icon=\"add\"\n          variant=\"text\"\n          onClick={() => handleAddItem({ isNewAttribute: true })}\n          className={pt?.addButton?.className}\n          style={{ display: 'flex', justifyContent: 'start' }}\n        >\n          Add new item\n        </Button>\n      </Styled.EnumListWrapper>\n    </>\n  )\n}\n"],"names":["creator","uniqueId","normalize","data","item","label","value","icon","color","denormalize","mergeIncomingItems","currentItems","incomingItems","incomingItem","index","currentItem","EnumEditor","values","onChange","onCommit","pt","props","items","handleAddItem","handleRemoveItem","handleChangeItem","handleCommitItem","handleDuplicateItem","handleDraggableEnd","useDraggable","handleDragStart","event","setDraggedItemId","handleDragEnd","draggedItemId","useState","draggedItem","jsxs","Styled.EnumListWrapper","DndContext","closestCenter","jsx","SortableContext","verticalListSortingStrategy","idx","DraggableEnumEditorItem","appendOrUpdateNumericSuffix","e","el","createPortal","DragOverlay","Button"],"mappings":"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"}

package/dist/shared/src/components/EnumEditor/EnumEditorItem.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),m=require("lodash"),t=require("./EnumEditor.styled.cjs.js"),k=({item:i,onChange:r,onRemove:v,onDuplicate:b,showRemoveButton:j=!0,showDuplicateButton:p=!0,autoFocus:o=!1,isExpanded:x=!0})=>{const{label:f,value:h,icon:n,color:c,isNewAttribute:R}=i,a=l.useRef(null),u=l.useRef(null),d=l.useRef(null),E=l.useRef(null);return l.useEffect(()=>{(o||i.isNewAttribute)&&a.current?.select()},[o,i.isNewAttribute]),l.useEffect(()=>{x&&!o&&!i.isNewAttribute&&setTimeout(()=>a.current?.focus(),250)},[x,o,i.isNewAttribute]),e.jsxRuntimeExports.jsxs(t.EnumItemBody,{className:x?"expanded":"collapsed",children:[e.jsxRuntimeExports.jsxs(t.Row,{children:[e.jsxRuntimeExports.jsx(t.Label,{children:"Label"}),e.jsxRuntimeExports.jsx(t.InputText,{ref:a,value:f,autoFocus:o||R,onChange:s=>{if(!R)return r&&r(["label"],[s.target.value]);u.current&&(u.current.value=m.kebabCase(s.target.value)),r&&r(["label","value"],[s.target.value,m.kebabCase(s.target.value)])},placeholder:"Enter label"})]},"label"),e.jsxRuntimeExports.jsxs(t.Row,{children:[e.jsxRuntimeExports.jsx(t.Label,{children:"Value"}),e.jsxRuntimeExports.jsx(t.InputText,{ref:u,value:u.current?.value||h,onChange:s=>r&&r(["value"],[s.target.value]),placeholder:"Enter value"})]},"value"),e.jsxRuntimeExports.jsxs(t.Row,{children:[e.jsxRuntimeExports.jsx(t.Label,{children:"Icon"}),e.jsxRuntimeExports.jsxs(t.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsx(t.Placeholder,{style:{display:n?"none":"flex"},onClick:()=>{E.current?.open()},children:"Pick an icon..."}),e.jsxRuntimeExports.jsx(t.IconSelect,{ref:E,value:[n||"question_mark"],widthExpand:!0,style:{position:n?"relative":"absolute",visibility:n?"visible":"hidden"},onChange:s=>r&&r(["icon"],[s[0]])}),n&&e.jsxRuntimeExports.jsx(t.Button,{icon:"close",variant:"text",onClick:()=>{r&&r(["icon"],[void 0])}})]})]},"icon"),e.jsxRuntimeExports.jsxs(t.Row,{children:[e.jsxRuntimeExports.jsx(t.Label,{children:"Color"}),e.jsxRuntimeExports.jsxs(t.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsxs(t.ColorPicker,{className:c?"active":"",style:{backgroundColor:c||void 0},onClick:()=>d.current?.click(),children:[c?"":"Pick a color...",e.jsxRuntimeExports.jsx("input",{type:"color",ref:d,value:c||"#000000",onChange:s=>r&&r(["color"],[s?.target.value.toString()])})]}),c&&e.jsxRuntimeExports.jsx(t.Button,{icon:"close",variant:"text",onClick:()=>{r&&r(["color"],[void 0])}})]})]},"color"),(j||p)&&e.jsxRuntimeExports.jsxs(t.Row,{className:"footer",children:[j&&e.jsxRuntimeExports.jsx(t.ActionWrapper,{children:e.jsxRuntimeExports.jsx(t.Button,{icon:"close",variant:"text",onClick:v,children:"Remove"})}),p&&e.jsxRuntimeExports.jsx(t.ActionWrapper,{children:e.jsxRuntimeExports.jsx(t.Button,{icon:"content_copy",variant:"text",onClick:b,children:"Duplicate"})})]})]})};module.exports=k;
+"use strict";const l=require("../../../../_virtual/jsx-runtime.cjs.js"),i=require("react"),R=require("lodash"),r=require("./EnumEditor.styled.cjs.js"),c=require("clsx"),A=({item:u,onChange:a,onCommit:t,onRemove:N,onDuplicate:w,showRemoveButton:d=!0,showDuplicateButton:E=!0,autoFocus:o=!1,isExpanded:j=!0,className:y,pt:s,...h})=>{const{label:m,value:g,icon:n,color:x,isNewAttribute:p}=u,v=i.useRef(null),b=i.useRef(null),f=i.useRef(null),k=i.useRef(null);return i.useEffect(()=>{(o||u.isNewAttribute)&&v.current?.select()},[o,u.isNewAttribute]),i.useEffect(()=>{j&&!o&&!u.isNewAttribute&&setTimeout(()=>v.current?.focus(),250)},[j,o,u.isNewAttribute]),l.jsxRuntimeExports.jsxs(r.EnumItemBody,{...s?.wrapper,...h,className:c(y,s?.wrapper?.className,{expanded:j,collapsed:!j}),children:[l.jsxRuntimeExports.jsxs(r.Row,{...s?.label?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.label?.label,children:"Label"}),l.jsxRuntimeExports.jsx(r.InputText,{ref:v,value:m,autoFocus:o||p,...s?.label?.input,className:c(s?.label?.input?.className),onChange:e=>{if(!p)return a&&a(["label"],[e.target.value]);b.current&&(b.current.value=R.kebabCase(e.target.value)),a&&a(["label","value"],[e.target.value,R.kebabCase(e.target.value)])},onBlur:e=>{p?t&&t(["label","value"],[e.target.value,R.kebabCase(e.target.value)]):t&&t(["label"],[e.target.value])},onKeyDown:e=>{e.key==="Enter"&&(p?t&&t(["label","value"],[e.target.value,R.kebabCase(e.target.value)]):t&&t(["label"],[e.target.value]))},placeholder:"Enter label"})]},"label"),l.jsxRuntimeExports.jsxs(r.Row,{...s?.value?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.value?.label,children:"Value"}),l.jsxRuntimeExports.jsx(r.InputText,{ref:b,value:b.current?.value||g,...s?.value?.input,className:c(s?.value?.input?.className),onChange:e=>a&&a(["value"],[e.target.value]),onBlur:e=>t&&t(["value"],[e.target.value]),onKeyDown:e=>{e.key==="Enter"&&t&&t(["value"],[e.target.value])},placeholder:"Enter value"})]},"value"),l.jsxRuntimeExports.jsxs(r.Row,{...s?.icon?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.icon?.label,children:"Icon"}),l.jsxRuntimeExports.jsxs(r.PlaceholderWrapper,{style:{position:"relative"},children:[l.jsxRuntimeExports.jsx(r.Placeholder,{style:{display:n?"none":"flex"},onClick:()=>{k.current?.open()},children:"Pick an icon..."}),l.jsxRuntimeExports.jsx(r.IconSelect,{ref:k,value:[n||"question_mark"],widthExpand:!0,...s?.icon?.input,className:c(s?.icon?.input?.className),style:{position:n?"relative":"absolute",visibility:n?"visible":"hidden",...s?.icon?.input?.style},onChange:e=>{a&&a(["icon"],[e[0]]),t&&t(["icon"],[e[0]])}}),n&&l.jsxRuntimeExports.jsx(r.Button,{icon:"close",variant:"text",onClick:()=>{a&&a(["icon"],[void 0])}})]})]},"icon"),l.jsxRuntimeExports.jsxs(r.Row,{...s?.color?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.color?.label,children:"Color"}),l.jsxRuntimeExports.jsxs(r.PlaceholderWrapper,{style:{position:"relative"},children:[l.jsxRuntimeExports.jsxs(r.ColorPicker,{className:x?"active":"",style:{backgroundColor:x||void 0},onClick:()=>f.current?.click(),children:[x?"":"Pick a color...",l.jsxRuntimeExports.jsx("input",{type:"color",ref:f,value:x||"#000000",...s?.color?.input,className:c(s?.color?.input?.className),onChange:e=>{a&&a(["color"],[e?.target.value.toString()]),t&&t(["color"],[e?.target.value.toString()])}})]}),x&&l.jsxRuntimeExports.jsx(r.Button,{icon:"close",variant:"text",onClick:()=>{a&&a(["color"],[void 0])}})]})]},"color"),(d||E)&&l.jsxRuntimeExports.jsxs(r.Row,{...s?.footer,className:c("footer",s?.footer?.className),children:[d&&l.jsxRuntimeExports.jsx(r.ActionWrapper,{children:l.jsxRuntimeExports.jsx(r.Button,{icon:"close",variant:"text",onClick:N,children:"Remove"})}),E&&l.jsxRuntimeExports.jsx(r.ActionWrapper,{children:l.jsxRuntimeExports.jsx(r.Button,{icon:"content_copy",variant:"text",onClick:w,children:"Duplicate"})})]})]})};module.exports=A;
 //# sourceMappingURL=EnumEditorItem.cjs.js.map

package/dist/shared/src/components/EnumEditor/EnumEditorItem.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumEditorItem.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditorItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { kebabCase } from 'lodash'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\n\ninterface EnumEditorItemProps {\n  item: AttributeData\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n  showRemoveButton?: boolean\n  showDuplicateButton?: boolean\n  autoFocus?: boolean\n  isExpanded?: boolean\n}\n\nconst EnumEditorItem = ({\n  item,\n  onChange,\n  onRemove,\n  onDuplicate,\n  showRemoveButton = true,\n  showDuplicateButton = true,\n  autoFocus = false,\n  isExpanded = true,\n}: EnumEditorItemProps) => {\n  const { label, value, icon, color, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  useEffect(() => {\n    if (autoFocus || item.isNewAttribute) {\n      labelRef.current?.select()\n    }\n  }, [autoFocus, item.isNewAttribute])\n\n  // Handle focus when item becomes expanded\n  useEffect(() => {\n    if (isExpanded && !autoFocus && !item.isNewAttribute) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current?.focus(), 250)\n    }\n  }, [isExpanded, autoFocus, item.isNewAttribute])\n\n  return (\n    <Styled.EnumItemBody className={isExpanded ? 'expanded' : 'collapsed'}>\n      <Styled.Row key=\"label\">\n        <Styled.Label>Label</Styled.Label>\n        <Styled.InputText\n          ref={labelRef}\n          value={label}\n          autoFocus={autoFocus || isNewAttribute}\n          onChange={(event) => {\n            if (!isNewAttribute) {\n              return onChange && onChange(['label'], [event.target.value])\n            }\n            if (valueRef.current) {\n              valueRef.current.value = kebabCase(event.target.value)\n            }\n            onChange &&\n              onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n          }}\n          placeholder=\"Enter label\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"value\">\n        <Styled.Label>Value</Styled.Label>\n        <Styled.InputText\n          ref={valueRef}\n          value={valueRef.current?.value || value}\n          onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n          placeholder=\"Enter value\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"icon\">\n        <Styled.Label>Icon</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.Placeholder\n            style={{ display: icon ? 'none' : 'flex' }}\n            onClick={() => {\n              iconSelectRef.current?.open()\n            }}\n          >\n            Pick an icon...\n          </Styled.Placeholder>\n\n          <Styled.IconSelect\n            ref={iconSelectRef}\n            value={[icon || 'question_mark']}\n            widthExpand\n            style={{\n              position: icon ? 'relative' : 'absolute',\n              visibility: icon ? 'visible' : 'hidden',\n            }}\n            onChange={(value) => {\n              return onChange && onChange(['icon'], [value[0]])\n            }}\n          />\n          {icon && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['icon'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      <Styled.Row key=\"color\">\n        <Styled.Label>Color</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.ColorPicker\n            className={color ? 'active' : ''}\n            style={{ backgroundColor: color || undefined }}\n            onClick={() => colorPickerRef.current?.click()}\n          >\n            {!color ? 'Pick a color...' : ''}\n            <input\n              type=\"color\"\n              ref={colorPickerRef}\n              value={color || '#000000'}\n              onChange={(event) =>\n                onChange && onChange(['color'], [event?.target.value.toString()])\n              }\n            />\n          </Styled.ColorPicker>\n          {color && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['color'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      {(showRemoveButton || showDuplicateButton) && (\n        <Styled.Row className=\"footer\">\n          {showRemoveButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n          {showDuplicateButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n        </Styled.Row>\n      )}\n    </Styled.EnumItemBody>\n  )\n}\n\nexport default EnumEditorItem\n"],"names":["EnumEditorItem","item","onChange","onRemove","onDuplicate","showRemoveButton","showDuplicateButton","autoFocus","isExpanded","label","value","icon","color","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","useEffect","Styled.EnumItemBody","jsxs","Styled.Row","jsx","Styled.Label","Styled.InputText","event","kebabCase","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}
+{"version":3,"file":"EnumEditorItem.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditorItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { kebabCase } from 'lodash'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\nimport clsx from 'clsx'\n\ntype DivPt = Partial<React.HTMLAttributes<HTMLDivElement>>\n\ntype TextInputPt = Partial<React.ComponentProps<typeof Styled.InputText>>\ntype IconInputPt = Partial<React.ComponentProps<typeof Styled.IconSelect>>\ntype ColorInputPt = Partial<React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface EnumEditorFieldPt<TInput> {\n  wrapper?: DivPt\n  label?: DivPt\n  input?: Partial<TInput>\n}\n\nexport interface EnumEditorItemPt {\n  wrapper?: DivPt\n  label?: EnumEditorFieldPt<TextInputPt>\n  value?: EnumEditorFieldPt<TextInputPt>\n  icon?: EnumEditorFieldPt<IconInputPt>\n  color?: EnumEditorFieldPt<ColorInputPt>\n  footer?: DivPt\n}\n\nexport interface EnumEditorItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  item: AttributeData\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onCommit?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n  showRemoveButton?: boolean\n  showDuplicateButton?: boolean\n  autoFocus?: boolean\n  isExpanded?: boolean\n  pt?: EnumEditorItemPt\n}\n\nconst EnumEditorItem = ({\n  item,\n  onChange,\n  onCommit,\n  onRemove,\n  onDuplicate,\n  showRemoveButton = true,\n  showDuplicateButton = true,\n  autoFocus = false,\n  isExpanded = true,\n  className,\n  pt,\n  ...props\n}: EnumEditorItemProps) => {\n  const { label, value, icon, color, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  useEffect(() => {\n    if (autoFocus || item.isNewAttribute) {\n      labelRef.current?.select()\n    }\n  }, [autoFocus, item.isNewAttribute])\n\n  // Handle focus when item becomes expanded\n  useEffect(() => {\n    if (isExpanded && !autoFocus && !item.isNewAttribute) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current?.focus(), 250)\n    }\n  }, [isExpanded, autoFocus, item.isNewAttribute])\n\n  return (\n    <Styled.EnumItemBody\n      {...pt?.wrapper}\n      {...props}\n      className={clsx(className, pt?.wrapper?.className, {\n        expanded: isExpanded,\n        collapsed: !isExpanded,\n      })}\n    >\n      <Styled.Row key=\"label\" {...pt?.label?.wrapper}>\n        <Styled.Label {...pt?.label?.label}>Label</Styled.Label>\n        <Styled.InputText\n          ref={labelRef}\n          value={label}\n          autoFocus={autoFocus || isNewAttribute}\n          {...pt?.label?.input}\n          className={clsx(pt?.label?.input?.className)}\n          onChange={(event) => {\n            if (!isNewAttribute) {\n              return onChange && onChange(['label'], [event.target.value])\n            }\n            if (valueRef.current) {\n              valueRef.current.value = kebabCase(event.target.value)\n            }\n            onChange &&\n              onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n          }}\n          onBlur={(event) => {\n            if (!isNewAttribute) {\n              onCommit && onCommit(['label'], [event.target.value])\n            } else {\n              onCommit &&\n                onCommit(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n            }\n          }}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              if (!isNewAttribute) {\n                onCommit && onCommit(['label'], [(event.target as HTMLInputElement).value])\n              } else {\n                onCommit &&\n                  onCommit(\n                    ['label', 'value'],\n                    [\n                      (event.target as HTMLInputElement).value,\n                      kebabCase((event.target as HTMLInputElement).value),\n                    ],\n                  )\n              }\n            }\n          }}\n          placeholder=\"Enter label\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"value\" {...pt?.value?.wrapper}>\n        <Styled.Label {...pt?.value?.label}>Value</Styled.Label>\n        <Styled.InputText\n          ref={valueRef}\n          value={valueRef.current?.value || value}\n          {...pt?.value?.input}\n          className={clsx(pt?.value?.input?.className)}\n          onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n          onBlur={(event) => onCommit && onCommit(['value'], [event.target.value])}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              onCommit && onCommit(['value'], [(event.target as HTMLInputElement).value])\n            }\n          }}\n          placeholder=\"Enter value\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"icon\" {...pt?.icon?.wrapper}>\n        <Styled.Label {...pt?.icon?.label}>Icon</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.Placeholder\n            style={{ display: icon ? 'none' : 'flex' }}\n            onClick={() => {\n              iconSelectRef.current?.open()\n            }}\n          >\n            Pick an icon...\n          </Styled.Placeholder>\n\n          <Styled.IconSelect\n            ref={iconSelectRef}\n            value={[icon || 'question_mark']}\n            widthExpand\n            {...pt?.icon?.input}\n            className={clsx(pt?.icon?.input?.className)}\n            style={{\n              position: icon ? 'relative' : 'absolute',\n              visibility: icon ? 'visible' : 'hidden',\n              ...pt?.icon?.input?.style,\n            }}\n            onChange={(value) => {\n              onChange && onChange(['icon'], [value[0]])\n              onCommit && onCommit(['icon'], [value[0]])\n            }}\n          />\n          {icon && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['icon'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      <Styled.Row key=\"color\" {...pt?.color?.wrapper}>\n        <Styled.Label {...pt?.color?.label}>Color</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.ColorPicker\n            className={color ? 'active' : ''}\n            style={{ backgroundColor: color || undefined }}\n            onClick={() => colorPickerRef.current?.click()}\n          >\n            {!color ? 'Pick a color...' : ''}\n            <input\n              type=\"color\"\n              ref={colorPickerRef}\n              value={color || '#000000'}\n              {...pt?.color?.input}\n              className={clsx(pt?.color?.input?.className)}\n              onChange={(event) => {\n                onChange && onChange(['color'], [event?.target.value.toString()])\n                onCommit && onCommit(['color'], [event?.target.value.toString()])\n              }}\n            />\n          </Styled.ColorPicker>\n          {color && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['color'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      {(showRemoveButton || showDuplicateButton) && (\n        <Styled.Row {...pt?.footer} className={clsx('footer', pt?.footer?.className)}>\n          {showRemoveButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n          {showDuplicateButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n        </Styled.Row>\n      )}\n    </Styled.EnumItemBody>\n  )\n}\n\nexport default EnumEditorItem\n"],"names":["EnumEditorItem","item","onChange","onCommit","onRemove","onDuplicate","showRemoveButton","showDuplicateButton","autoFocus","isExpanded","className","pt","props","label","value","icon","color","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","useEffect","jsxs","Styled.EnumItemBody","clsx","Styled.Row","jsx","Styled.Label","Styled.InputText","event","kebabCase","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}