@ynput/ayon-frontend-shared 0.3.18 → 0.3.21

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  pt?: EnumEditorPt\n}\nexport const EnumEditor = ({ values, onChange, pt, ...props }: EnumEditorProps) => {\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    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                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","pt","props","items","handleAddItem","handleRemoveItem","handleChangeItem","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,72 +1,82 @@
-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 I } from "react";
+import { createPortal as j } 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 { DndContext as A, closestCenter as N, DragOverlay as y } from "@dnd-kit/core";
+import { SortableContext as S, verticalListSortingStrategy as w } from "@dnd-kit/sortable";
 import { Button as C } 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 L } from "./EnumEditor.styled.es.js";
+import F from "./hooks/useDraggable.es.js";
 import { appendOrUpdateNumericSuffix as p } from "./util/index.es.js";
-const L = () => ({
+const z = () => ({
   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 }) => ({
+}), B = (i) => i.filter((r) => r.label !== "" && r.value !== "").map(({ label: r, value: t, icon: o, color: e }) => ({
+  label: r,
+  value: t,
+  icon: o || void 0,
+  color: e || void 0
+})), R = (i) => i.map(({ label: r, value: t, icon: o, color: e }) => ({
   id: f(),
   isExpanded: !1,
-  label: a,
-  value: e.toString(),
-  icon: i,
-  color: o,
+  label: r,
+  value: t.toString(),
+  icon: o,
+  color: e,
   isLabelFocused: !1,
   isNewAttribute: !1
-})), G = ({ values: n, onChange: a }) => {
-  if (!n)
+})), O = (i, r) => r.map((t, o) => {
+  const e = i[o];
+  return e ? {
+    ...t,
+    id: e.id,
+    isExpanded: e.isExpanded,
+    isLabelFocused: e.isLabelFocused,
+    isNewAttribute: e.isNewAttribute
+  } : t;
+}), K = ({ values: i, onChange: r, pt: t, ...o }) => {
+  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,
+    handleAddItem: u,
+    handleRemoveItem: b,
+    handleChangeItem: D,
+    handleDuplicateItem: x,
+    handleDraggableEnd: h
+  } = F({
+    creator: z,
+    initialData: R(i),
+    onChange: r,
+    normalizer: B,
+    mergeIncomingData: O
+  }), v = (a) => {
+    c(a.active.id);
+  }, E = (a) => {
+    c(null), h(a);
+  }, [s, c] = I();
+  let d;
+  return s && (d = e.find((a) => a.id === s)), /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsxs(L, { ...o, children: [
+    /* @__PURE__ */ n.jsxs(
+      A,
       {
-        collisionDetection: I,
-        onDragStart: h,
-        onDragEnd: v,
+        collisionDetection: N,
+        onDragStart: v,
+        onDragEnd: E,
         children: [
-          /* @__PURE__ */ r.jsx(S, { items: e, strategy: A, children: e.map((t, l) => /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ n.jsx(S, { items: e, strategy: w, children: e.map((a, l) => /* @__PURE__ */ n.jsx(
             g,
             {
-              item: t,
-              isBeingDragged: t.id === d,
-              onChange: u(l),
-              onRemove: o(l),
-              onDuplicate: () => b(l, {
+              item: a,
+              isBeingDragged: a.id === s,
+              onChange: D(l),
+              onRemove: b(l),
+              onDuplicate: () => x(l, {
                 isLabelFocused: !0,
                 isNewAttribute: !0,
                 label: p(
@@ -79,23 +89,26 @@ const L = () => ({
                   e.map((m) => m.value),
                   "-"
                 )
-              })
+              }),
+              ...t?.item
             },
-            `DraggableAttributeEnum_${t.id}`
+            `DraggableAttributeEnum_${a.id}`
           )) }),
-          E(
-            /* @__PURE__ */ r.jsx(y, { style: {}, children: s && /* @__PURE__ */ r.jsx(g, { item: s }) }),
+          j(
+            /* @__PURE__ */ n.jsx(y, { style: {}, children: d && /* @__PURE__ */ n.jsx(g, { item: d, ...t?.item }) }),
             document.body
           )
         ]
       }
     ),
-    /* @__PURE__ */ r.jsx(
+    /* @__PURE__ */ n.jsx(
       C,
       {
+        ...t?.addButton,
         icon: "add",
         variant: "text",
-        onClick: () => i({ isNewAttribute: !0 }),
+        onClick: () => u({ isNewAttribute: !0 }),
+        className: t?.addButton?.className,
         style: { display: "flex", justifyContent: "start" },
         children: "Add new item"
       }
@@ -103,6 +116,6 @@ const L = () => ({
   ] }) });
 };
 export {
-  G as EnumEditor
+  K 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":";;;;;;;;;;;AA+BA,MAAMA,IAAU,OAAsB;AAAA,EACpC,IAAIC,EAAA;AAAA,EACJ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,gBAAgB;AAClB,IAEMC,IAAY,CAACC,MACVA,EACJ,OAAO,CAACC,MAASA,EAAK,UAAU,MAAMA,EAAK,UAAU,EAAE,EACvD,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,OAAAC,SAEnB;AAAA,EACL,OAAAH;AAAA,EACA,OAHoBC;AAAA,EAIpB,MAAMC,KAAQ;AAAA,EACd,OAAOC,KAAS;AAAA,EAEnB,GAGCC,IAAc,CAACN,MACZA,EAAK,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,GAAO,MAAAC,GAAM,OAAAC,SAC9B;AAAA,EACL,IAAIP,EAAA;AAAA,EACJ,YAAY;AAAA,EACZ,OAAAI;AAAA,EACA,OAAOC,EAAM,SAAA;AAAA,EACb,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAEnB,GAOUE,IAAa,CAAC,EAAE,QAAAC,GAAQ,UAAAC,QAAsB;AACzD,MAAI,CAACD;AACH,WAAO;AAGT,QAAM;AAAA,IACJ,OAAAE;AAAA,IACA,eAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,IACEC,EAA4C;AAAA,IAC9C,SAAAnB;AAAA,IACA,aAAaS,EAAYE,CAAM;AAAA,IAC/B,UAAAC;AAAA,IACA,YAAYV;AAAA,EAAA,CACb,GAEKkB,IAAkB,CAACC,MAA0B;AACjD,IAAAC,EAAiBD,EAAM,OAAO,EAAY;AAAA,EAC5C,GAEME,IAAgB,CAACF,MAAwB;AAC7C,IAAAC,EAAiB,IAAI,GACrBJ,EAAmBG,CAAK;AAAA,EAC1B,GAEM,CAACG,GAAeF,CAAgB,IAAIG,EAAA;AAC1C,MAAIC;AACJ,SAAIF,MACFE,IAAcb,EAAM,KAAK,CAACT,MAASA,EAAK,OAAOoB,CAAa,IAI5DG,gBAAAA,EAAAA,IAAAC,EAAAA,UAAA,EACE,UAAAC,gBAAAA,EAAAA,KAACC,GAAA,EACC,UAAA;AAAA,IAAAD,gBAAAA,EAAAA;AAAAA,MAACE;AAAA,MAAA;AAAA,QACC,oBAAoBC;AAAA,QACpB,aAAaZ;AAAA,QACb,WAAWG;AAAA,QAEX,UAAA;AAAA,UAAAI,gBAAAA,EAAAA,IAACM,GAAA,EAAgB,OAAApB,GAAc,UAAUqB,GACtC,YAAM,IAAI,CAAC9B,GAAM+B,MAChBR,gBAAAA,EAAAA;AAAAA,YAACS;AAAA,YAAA;AAAA,cAEC,MAAAhC;AAAA,cACA,gBAAgBA,EAAK,OAAOoB;AAAA,cAC5B,UAAUR,EAAiBmB,CAAG;AAAA,cAC9B,UAAUpB,EAAiBoB,CAAG;AAAA,cAC9B,aAAa,MACXlB,EAAoBkB,GAAK;AAAA,gBACvB,gBAAgB;AAAA,gBAChB,gBAAgB;AAAA,gBAChB,OAAOE;AAAA,kBACLxB,EAAMsB,CAAG,EAAE;AAAA,kBACXtB,EAAM,IAAI,CAACyB,MAAMA,EAAE,KAAK;AAAA,kBACxB;AAAA,gBAAA;AAAA,gBAEF,OAAOD;AAAA,kBACLxB,EAAMsB,CAAG,EAAE;AAAA,kBACXtB,EAAM,IAAI,CAAC0B,MAAOA,EAAG,KAAK;AAAA,kBAC1B;AAAA,gBAAA;AAAA,cACF,CACD;AAAA,YAAA;AAAA,YAnBE,0BAA0BnC,EAAK,EAAE;AAAA,UAAA,CAsBzC,GACH;AAAA,UAECoC;AAAA,YACCb,gBAAAA,EAAAA,IAACc,GAAA,EAAY,OAAO,CAAA,GACjB,eAAed,gBAAAA,EAAAA,IAACS,GAAA,EAAwB,MAAMV,EAAA,CAAa,EAAA,CAC9D;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MAAA;AAAA,IAAA;AAAA,IAGFC,gBAAAA,EAAAA;AAAAA,MAACe;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS,MAAM5B,EAAc,EAAE,gBAAgB,IAAM;AAAA,QACrD,OAAO,EAAE,SAAS,QAAQ,gBAAgB,QAAA;AAAA,QAC3C,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"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  pt?: EnumEditorPt\n}\nexport const EnumEditor = ({ values, onChange, pt, ...props }: EnumEditorProps) => {\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    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                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","pt","props","items","handleAddItem","handleRemoveItem","handleChangeItem","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 e=require("../../../../_virtual/jsx-runtime.cjs.js"),i=require("react"),E=require("lodash"),l=require("./EnumEditor.styled.cjs.js"),o=require("clsx"),A=({item:c,onChange:r,onRemove:f,onDuplicate:N,showRemoveButton:m=!0,showDuplicateButton:R=!0,autoFocus:n=!1,isExpanded:x=!0,className:h,pt:s,...k})=>{const{label:w,value:y,icon:a,color:u,isNewAttribute:d}=c,p=i.useRef(null),j=i.useRef(null),b=i.useRef(null),v=i.useRef(null);return i.useEffect(()=>{(n||c.isNewAttribute)&&p.current?.select()},[n,c.isNewAttribute]),i.useEffect(()=>{x&&!n&&!c.isNewAttribute&&setTimeout(()=>p.current?.focus(),250)},[x,n,c.isNewAttribute]),e.jsxRuntimeExports.jsxs(l.EnumItemBody,{...s?.wrapper,...k,className:o(h,s?.wrapper?.className,{expanded:x,collapsed:!x}),children:[e.jsxRuntimeExports.jsxs(l.Row,{...s?.label?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.label?.label,children:"Label"}),e.jsxRuntimeExports.jsx(l.InputText,{ref:p,value:w,autoFocus:n||d,...s?.label?.input,className:o(s?.label?.input?.className),onChange:t=>{if(!d)return r&&r(["label"],[t.target.value]);j.current&&(j.current.value=E.kebabCase(t.target.value)),r&&r(["label","value"],[t.target.value,E.kebabCase(t.target.value)])},placeholder:"Enter label"})]},"label"),e.jsxRuntimeExports.jsxs(l.Row,{...s?.value?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.value?.label,children:"Value"}),e.jsxRuntimeExports.jsx(l.InputText,{ref:j,value:j.current?.value||y,...s?.value?.input,className:o(s?.value?.input?.className),onChange:t=>r&&r(["value"],[t.target.value]),placeholder:"Enter value"})]},"value"),e.jsxRuntimeExports.jsxs(l.Row,{...s?.icon?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.icon?.label,children:"Icon"}),e.jsxRuntimeExports.jsxs(l.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsx(l.Placeholder,{style:{display:a?"none":"flex"},onClick:()=>{v.current?.open()},children:"Pick an icon..."}),e.jsxRuntimeExports.jsx(l.IconSelect,{ref:v,value:[a||"question_mark"],widthExpand:!0,...s?.icon?.input,className:o(s?.icon?.input?.className),style:{position:a?"relative":"absolute",visibility:a?"visible":"hidden",...s?.icon?.input?.style},onChange:t=>r&&r(["icon"],[t[0]])}),a&&e.jsxRuntimeExports.jsx(l.Button,{icon:"close",variant:"text",onClick:()=>{r&&r(["icon"],[void 0])}})]})]},"icon"),e.jsxRuntimeExports.jsxs(l.Row,{...s?.color?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.color?.label,children:"Color"}),e.jsxRuntimeExports.jsxs(l.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsxs(l.ColorPicker,{className:u?"active":"",style:{backgroundColor:u||void 0},onClick:()=>b.current?.click(),children:[u?"":"Pick a color...",e.jsxRuntimeExports.jsx("input",{type:"color",ref:b,value:u||"#000000",...s?.color?.input,className:o(s?.color?.input?.className),onChange:t=>r&&r(["color"],[t?.target.value.toString()])})]}),u&&e.jsxRuntimeExports.jsx(l.Button,{icon:"close",variant:"text",onClick:()=>{r&&r(["color"],[void 0])}})]})]},"color"),(m||R)&&e.jsxRuntimeExports.jsxs(l.Row,{...s?.footer,className:o("footer",s?.footer?.className),children:[m&&e.jsxRuntimeExports.jsx(l.ActionWrapper,{children:e.jsxRuntimeExports.jsx(l.Button,{icon:"close",variant:"text",onClick:f,children:"Remove"})}),R&&e.jsxRuntimeExports.jsx(l.ActionWrapper,{children:e.jsxRuntimeExports.jsx(l.Button,{icon:"content_copy",variant:"text",onClick:N,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  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  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          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          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              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\" {...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              }\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","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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"}

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

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