@ynput/ayon-frontend-shared 0.2.2 → 0.2.4

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

@@ -0,0 +1,194 @@
+"use strict";
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const clsx = require("clsx");
+const lodash = require("lodash");
+const React = require("react");
+const sortable = require("@dnd-kit/sortable");
+const utilities_esm = require("../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const EnumEditor_styled = require("./EnumEditor.styled.cjs.js");
+const DraggableEnumEditorItem = ({
+  item,
+  isBeingDragged,
+  onChange,
+  onRemove,
+  onDuplicate
+}) => {
+  var _a;
+  const { id, label, value, icon, color, isExpanded, isNewAttribute } = item;
+  const labelRef = React.useRef(null);
+  const valueRef = React.useRef(null);
+  const colorPickerRef = React.useRef(null);
+  const iconSelectRef = React.useRef(null);
+  const focusLabelIfExpanded = () => {
+    if (!isExpanded) {
+      setTimeout(() => labelRef.current.focus(), 250);
+    }
+  };
+  React.useEffect(() => {
+    if (item.isNewAttribute) {
+      labelRef.current.select();
+    }
+  }, []);
+  const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({
+    id,
+    animateLayoutChanges: () => false
+  });
+  const style = {
+    transition,
+    transform: utilities_esm.CSS.Translate.toString(transform)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    EnumEditor_styled.EnumItemWrapper,
+    {
+      ref: setNodeRef,
+      style,
+      className: clsx({ dragged: isBeingDragged }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+          EnumEditor_styled.EnumItemHeader,
+          {
+            className: clsx({ expanded: isExpanded }),
+            onClick: () => {
+              onChange && onChange(["isExpanded"], [!isExpanded]);
+              focusLabelIfExpanded();
+            },
+            children: [
+              color && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.LabelColor, { style: { backgroundColor: color } }),
+              icon && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { className: "icon", icon }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { children: [
+                " ",
+                label,
+                " "
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "spacer" }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { className: "icon toggle-expand", icon: isExpanded ? "collapse_all" : "expand_all" }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                ayonReactComponents.Icon,
+                {
+                  ...listeners,
+                  ...attributes,
+                  className: "icon draggable",
+                  icon: "drag_indicator",
+                  id: "icon"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.EnumItemBodyExpander, { className: clsx({ expanded: isExpanded }), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.EnumItemBody, { className: clsx(isExpanded ? "expanded" : "collapsed"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.Row, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.Label, { children: " Label " }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              EnumEditor_styled.InputText,
+              {
+                ref: labelRef,
+                value: label,
+                autoFocus: isNewAttribute,
+                onChange: (event) => {
+                  if (!isNewAttribute) {
+                    return onChange && onChange(["label"], [event.target.value]);
+                  }
+                  valueRef.current.value = lodash.kebabCase(event.target.value);
+                  onChange && onChange(["label", "value"], [event.target.value, lodash.kebabCase(event.target.value)]);
+                }
+              }
+            )
+          ] }, "label"),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.Row, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.Label, { children: " Value " }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              EnumEditor_styled.InputText,
+              {
+                ref: valueRef,
+                value: ((_a = valueRef.current) == null ? void 0 : _a.value) || value,
+                onChange: (event) => onChange && onChange(["value"], [event.target.value])
+              }
+            )
+          ] }, "value"),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.Row, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.Label, { children: " Icon " }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.PlaceholderWrapper, { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                EnumEditor_styled.Placeholder,
+                {
+                  style: { display: icon ? "none" : "flex" },
+                  onClick: () => {
+                    iconSelectRef.current.open();
+                  },
+                  children: "Pick an icon..."
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                EnumEditor_styled.IconSelect,
+                {
+                  ref: iconSelectRef,
+                  value: [icon || "question_mark"],
+                  widthExpand: true,
+                  style: {
+                    position: icon ? "relative" : "absolute",
+                    visibility: icon ? "visible" : "hidden"
+                  },
+                  onChange: (value2) => {
+                    return onChange && onChange(["icon"], [value2[0]]);
+                  }
+                }
+              ),
+              icon && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                EnumEditor_styled.Button,
+                {
+                  icon: "close",
+                  variant: "text",
+                  onClick: () => {
+                    onChange && onChange(["icon"], [void 0]);
+                  }
+                }
+              )
+            ] })
+          ] }, "icon"),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.Row, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.Label, { children: " Color " }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.PlaceholderWrapper, { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+                EnumEditor_styled.ColorPicker,
+                {
+                  className: clsx({ active: color }),
+                  style: { backgroundColor: color || void 0 },
+                  onClick: () => colorPickerRef.current.click(),
+                  children: [
+                    !color ? "Pick a color..." : "",
+                    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                      "input",
+                      {
+                        type: "color",
+                        ref: colorPickerRef,
+                        value: color || "#000000",
+                        onChange: (event) => onChange && onChange(["color"], [event == null ? void 0 : event.target.value.toString()])
+                      }
+                    )
+                  ]
+                }
+              ),
+              color && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                EnumEditor_styled.Button,
+                {
+                  icon: "close",
+                  variant: "text",
+                  onClick: () => {
+                    onChange && onChange(["color"], [void 0]);
+                  }
+                }
+              )
+            ] })
+          ] }, "color"),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.Row, { className: "footer", children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.ActionWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.Button, { icon: "close", variant: "text", onClick: onRemove, children: "Remove" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.ActionWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EnumEditor_styled.Button, { icon: "content_copy", variant: "text", onClick: onDuplicate, children: "Duplicate" }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+};
+module.exports = DraggableEnumEditorItem;
+//# sourceMappingURL=DraggableEnumEditorItem.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableEnumEditorItem.cjs.js","sources":["../../../../../src/components/EnumEditor/DraggableEnumEditorItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { kebabCase } from 'lodash'\nimport { useEffect, useRef } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\n\ntype Props = {\n  item: AttributeData\n  isBeingDragged?: boolean\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n}\n\nconst DraggableEnumEditorItem = ({\n  item,\n  isBeingDragged,\n  onChange,\n  onRemove,\n  onDuplicate,\n}: Props) => {\n  const { id, label, value, icon, color, isExpanded, 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  const focusLabelIfExpanded = () => {\n    if (!isExpanded) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current!.focus(), 250)\n    }\n  }\n\n  useEffect(() => {\n    if (item.isNewAttribute) {\n      labelRef.current!.select()\n    }\n  }, [])\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n    id: id,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transition,\n    transform: CSS.Translate.toString(transform),\n  }\n\n  return (\n    <Styled.EnumItemWrapper\n      ref={setNodeRef}\n      style={style}\n      className={clsx({ dragged: isBeingDragged })}\n    >\n      <Styled.EnumItemHeader\n        className={clsx({ expanded: isExpanded })}\n        onClick={() => {\n          onChange && onChange(['isExpanded'], [!isExpanded])\n          focusLabelIfExpanded()\n        }}\n      >\n        {color && <Styled.LabelColor style={{ backgroundColor: color }} />}\n        {icon && <Icon className=\"icon\" icon={icon} />}\n        <span> {label} </span>\n        <span className=\"spacer\" />\n\n        <Icon className=\"icon toggle-expand\" icon={isExpanded ? 'collapse_all' : 'expand_all'} />\n        <Icon\n          {...listeners}\n          {...attributes}\n          className=\"icon draggable\"\n          icon=\"drag_indicator\"\n          id=\"icon\"\n        />\n      </Styled.EnumItemHeader>\n\n      <Styled.EnumItemBodyExpander className={clsx({ expanded: isExpanded })}>\n        <Styled.EnumItemBody className={clsx(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={isNewAttribute}\n              onChange={(event) => {\n                if (!isNewAttribute) {\n                  return onChange && onChange(['label'], [event.target.value])\n                }\n                valueRef.current!.value = kebabCase(event.target.value)\n                onChange &&\n                  onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n              }}\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            />\n          </Styled.Row>\n\n          <Styled.Row key=\"icon\">\n            <Styled.Label> Icon </Styled.Label>\n\n            <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n              {\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\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={clsx({ active: color })}\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          <Styled.Row className=\"footer\">\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          </Styled.Row>\n        </Styled.EnumItemBody>\n      </Styled.EnumItemBodyExpander>\n    </Styled.EnumItemWrapper>\n  )\n}\n\nexport default DraggableEnumEditorItem\n"],"names":["useRef","useEffect","useSortable","CSS","jsxs","Styled.EnumItemWrapper","Styled.EnumItemHeader","jsx","Styled.LabelColor","Icon","Styled.EnumItemBodyExpander","Styled.EnumItemBody","Styled.Row","Styled.Label","Styled.InputText","kebabCase","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","value","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}

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

@@ -0,0 +1,195 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import clsx from "clsx";
+import { kebabCase } from "lodash";
+import { useRef, useEffect } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.es.js";
+import { Icon } from "@ynput/ayon-react-components";
+import { EnumItemWrapper, EnumItemHeader, LabelColor, EnumItemBodyExpander, EnumItemBody, Row, Label, InputText, PlaceholderWrapper, Placeholder, IconSelect, Button, ColorPicker, ActionWrapper } from "./EnumEditor.styled.es.js";
+const DraggableEnumEditorItem = ({
+  item,
+  isBeingDragged,
+  onChange,
+  onRemove,
+  onDuplicate
+}) => {
+  var _a;
+  const { id, label, value, icon, color, isExpanded, isNewAttribute } = item;
+  const labelRef = useRef(null);
+  const valueRef = useRef(null);
+  const colorPickerRef = useRef(null);
+  const iconSelectRef = useRef(null);
+  const focusLabelIfExpanded = () => {
+    if (!isExpanded) {
+      setTimeout(() => labelRef.current.focus(), 250);
+    }
+  };
+  useEffect(() => {
+    if (item.isNewAttribute) {
+      labelRef.current.select();
+    }
+  }, []);
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id,
+    animateLayoutChanges: () => false
+  });
+  const style = {
+    transition,
+    transform: CSS.Translate.toString(transform)
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    EnumItemWrapper,
+    {
+      ref: setNodeRef,
+      style,
+      className: clsx({ dragged: isBeingDragged }),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          EnumItemHeader,
+          {
+            className: clsx({ expanded: isExpanded }),
+            onClick: () => {
+              onChange && onChange(["isExpanded"], [!isExpanded]);
+              focusLabelIfExpanded();
+            },
+            children: [
+              color && /* @__PURE__ */ jsxRuntimeExports.jsx(LabelColor, { style: { backgroundColor: color } }),
+              icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "icon", icon }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                " ",
+                label,
+                " "
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "spacer" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "icon toggle-expand", icon: isExpanded ? "collapse_all" : "expand_all" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Icon,
+                {
+                  ...listeners,
+                  ...attributes,
+                  className: "icon draggable",
+                  icon: "drag_indicator",
+                  id: "icon"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EnumItemBodyExpander, { className: clsx({ expanded: isExpanded }), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(EnumItemBody, { className: clsx(isExpanded ? "expanded" : "collapsed"), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { children: " Label " }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputText,
+              {
+                ref: labelRef,
+                value: label,
+                autoFocus: isNewAttribute,
+                onChange: (event) => {
+                  if (!isNewAttribute) {
+                    return onChange && onChange(["label"], [event.target.value]);
+                  }
+                  valueRef.current.value = kebabCase(event.target.value);
+                  onChange && onChange(["label", "value"], [event.target.value, kebabCase(event.target.value)]);
+                }
+              }
+            )
+          ] }, "label"),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { children: " Value " }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputText,
+              {
+                ref: valueRef,
+                value: ((_a = valueRef.current) == null ? void 0 : _a.value) || value,
+                onChange: (event) => onChange && onChange(["value"], [event.target.value])
+              }
+            )
+          ] }, "value"),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { children: " Icon " }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(PlaceholderWrapper, { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Placeholder,
+                {
+                  style: { display: icon ? "none" : "flex" },
+                  onClick: () => {
+                    iconSelectRef.current.open();
+                  },
+                  children: "Pick an icon..."
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                IconSelect,
+                {
+                  ref: iconSelectRef,
+                  value: [icon || "question_mark"],
+                  widthExpand: true,
+                  style: {
+                    position: icon ? "relative" : "absolute",
+                    visibility: icon ? "visible" : "hidden"
+                  },
+                  onChange: (value2) => {
+                    return onChange && onChange(["icon"], [value2[0]]);
+                  }
+                }
+              ),
+              icon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  icon: "close",
+                  variant: "text",
+                  onClick: () => {
+                    onChange && onChange(["icon"], [void 0]);
+                  }
+                }
+              )
+            ] })
+          ] }, "icon"),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { children: " Color " }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(PlaceholderWrapper, { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                ColorPicker,
+                {
+                  className: clsx({ active: color }),
+                  style: { backgroundColor: color || void 0 },
+                  onClick: () => colorPickerRef.current.click(),
+                  children: [
+                    !color ? "Pick a color..." : "",
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "input",
+                      {
+                        type: "color",
+                        ref: colorPickerRef,
+                        value: color || "#000000",
+                        onChange: (event) => onChange && onChange(["color"], [event == null ? void 0 : event.target.value.toString()])
+                      }
+                    )
+                  ]
+                }
+              ),
+              color && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  icon: "close",
+                  variant: "text",
+                  onClick: () => {
+                    onChange && onChange(["color"], [void 0]);
+                  }
+                }
+              )
+            ] })
+          ] }, "color"),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { className: "footer", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ActionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { icon: "close", variant: "text", onClick: onRemove, children: "Remove" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ActionWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { icon: "content_copy", variant: "text", onClick: onDuplicate, children: "Duplicate" }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  DraggableEnumEditorItem as default
+};
+//# sourceMappingURL=DraggableEnumEditorItem.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableEnumEditorItem.es.js","sources":["../../../../../src/components/EnumEditor/DraggableEnumEditorItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { kebabCase } from 'lodash'\nimport { useEffect, useRef } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\n\ntype Props = {\n  item: AttributeData\n  isBeingDragged?: boolean\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n}\n\nconst DraggableEnumEditorItem = ({\n  item,\n  isBeingDragged,\n  onChange,\n  onRemove,\n  onDuplicate,\n}: Props) => {\n  const { id, label, value, icon, color, isExpanded, 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  const focusLabelIfExpanded = () => {\n    if (!isExpanded) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current!.focus(), 250)\n    }\n  }\n\n  useEffect(() => {\n    if (item.isNewAttribute) {\n      labelRef.current!.select()\n    }\n  }, [])\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n    id: id,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transition,\n    transform: CSS.Translate.toString(transform),\n  }\n\n  return (\n    <Styled.EnumItemWrapper\n      ref={setNodeRef}\n      style={style}\n      className={clsx({ dragged: isBeingDragged })}\n    >\n      <Styled.EnumItemHeader\n        className={clsx({ expanded: isExpanded })}\n        onClick={() => {\n          onChange && onChange(['isExpanded'], [!isExpanded])\n          focusLabelIfExpanded()\n        }}\n      >\n        {color && <Styled.LabelColor style={{ backgroundColor: color }} />}\n        {icon && <Icon className=\"icon\" icon={icon} />}\n        <span> {label} </span>\n        <span className=\"spacer\" />\n\n        <Icon className=\"icon toggle-expand\" icon={isExpanded ? 'collapse_all' : 'expand_all'} />\n        <Icon\n          {...listeners}\n          {...attributes}\n          className=\"icon draggable\"\n          icon=\"drag_indicator\"\n          id=\"icon\"\n        />\n      </Styled.EnumItemHeader>\n\n      <Styled.EnumItemBodyExpander className={clsx({ expanded: isExpanded })}>\n        <Styled.EnumItemBody className={clsx(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={isNewAttribute}\n              onChange={(event) => {\n                if (!isNewAttribute) {\n                  return onChange && onChange(['label'], [event.target.value])\n                }\n                valueRef.current!.value = kebabCase(event.target.value)\n                onChange &&\n                  onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n              }}\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            />\n          </Styled.Row>\n\n          <Styled.Row key=\"icon\">\n            <Styled.Label> Icon </Styled.Label>\n\n            <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n              {\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\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={clsx({ active: color })}\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          <Styled.Row className=\"footer\">\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          </Styled.Row>\n        </Styled.EnumItemBody>\n      </Styled.EnumItemBodyExpander>\n    </Styled.EnumItemWrapper>\n  )\n}\n\nexport default DraggableEnumEditorItem\n"],"names":["jsxs","Styled.EnumItemWrapper","Styled.EnumItemHeader","jsx","Styled.LabelColor","Styled.EnumItemBodyExpander","Styled.EnumItemBody","Styled.Row","Styled.Label","Styled.InputText","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","value","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}

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

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const ReactDOM = require("react-dom");
+const lodash = require("lodash");
+const core = require("@dnd-kit/core");
+const sortable = require("@dnd-kit/sortable");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const DraggableEnumEditorItem = require("./DraggableEnumEditorItem.cjs.js");
+const EnumEditor_styled = require("./EnumEditor.styled.cjs.js");
+const useDraggable = require("./hooks/useDraggable.cjs.js");
+const index = require("./util/index.cjs.js");
+const creator = () => ({
+  id: lodash.uniqueId(),
+  isExpanded: true,
+  label: "",
+  value: "",
+  isLabelFocused: true,
+  isNewAttribute: false
+});
+const normalize = (data) => {
+  return data.filter((item) => item.label !== "" && item.value !== "").map(({ label, value, icon, color }) => {
+    let normalizedValue = value;
+    return {
+      label,
+      value: normalizedValue,
+      icon: icon || void 0,
+      color: color || void 0
+    };
+  });
+};
+const denormalize = (data) => {
+  return data.map(({ label, value, icon, color }) => {
+    return {
+      id: lodash.uniqueId(),
+      isExpanded: false,
+      label,
+      value: value.toString(),
+      icon,
+      color,
+      isLabelFocused: false,
+      isNewAttribute: false
+    };
+  });
+};
+const EnumEditor = ({ values, onChange }) => {
+  if (!values) {
+    return null;
+  }
+  const {
+    items,
+    handleAddItem,
+    handleRemoveItem,
+    handleChangeItem,
+    handleDuplicateItem,
+    handleDraggableEnd
+  } = useDraggable({
+    creator,
+    initialData: denormalize(values),
+    onChange,
+    normalizer: normalize
+  });
+  const handleDragStart = (event) => {
+    setDraggedItemId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    setDraggedItemId(null);
+    handleDraggableEnd(event);
+  };
+  const [draggedItemId, setDraggedItemId] = React.useState();
+  let draggedItem;
+  if (draggedItemId) {
+    draggedItem = items.find((item) => item.id === draggedItemId);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EnumEditor_styled.EnumListWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+      core.DndContext,
+      {
+        collisionDetection: core.closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(sortable.SortableContext, { items, strategy: sortable.verticalListSortingStrategy, children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            DraggableEnumEditorItem,
+            {
+              item,
+              isBeingDragged: item.id === draggedItemId,
+              onChange: handleChangeItem(idx),
+              onRemove: handleRemoveItem(idx),
+              onDuplicate: () => handleDuplicateItem(idx, {
+                isLabelFocused: true,
+                isNewAttribute: true,
+                label: index.appendOrUpdateNumericSuffix(
+                  items[idx].label,
+                  items.map((e) => e.label),
+                  " "
+                ),
+                value: index.appendOrUpdateNumericSuffix(
+                  items[idx].value,
+                  items.map((el) => el.value),
+                  "-"
+                )
+              })
+            },
+            `DraggableAttributeEnum_${item.id}`
+          )) }),
+          ReactDOM.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(core.DragOverlay, { style: {}, children: draggedItem && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(DraggableEnumEditorItem, { item: draggedItem }) }),
+            document.body
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      ayonReactComponents.Button,
+      {
+        icon: "add",
+        variant: "text",
+        onClick: () => handleAddItem({ isNewAttribute: true }),
+        style: { display: "flex", justifyContent: "start" },
+        children: "Add new item"
+      }
+    )
+  ] }) });
+};
+exports.EnumEditor = EnumEditor;
+//# sourceMappingURL=EnumEditor.cjs.js.map

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

@@ -0,0 +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":["uniqueId","useState","jsx","Fragment","jsxs","Styled.EnumListWrapper","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","appendOrUpdateNumericSuffix","createPortal","DragOverlay","Button"],"mappings":"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"}