@ynput/ayon-frontend-shared 0.2.3 → 0.2.4

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

@@ -0,0 +1,128 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { uniqueId } from "lodash";
+import { DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { Button } from "@ynput/ayon-react-components";
+import DraggableEnumEditorItem from "./DraggableEnumEditorItem.es.js";
+import { EnumListWrapper } from "./EnumEditor.styled.es.js";
+import useDraggable from "./hooks/useDraggable.es.js";
+import { appendOrUpdateNumericSuffix } from "./util/index.es.js";
+const creator = () => ({
+  id: 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: 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] = useState();
+  let draggedItem;
+  if (draggedItemId) {
+    draggedItem = items.find((item) => item.id === draggedItemId);
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(EnumListWrapper, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      DndContext,
+      {
+        collisionDetection: closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SortableContext, { items, strategy: verticalListSortingStrategy, children: items.map((item, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DraggableEnumEditorItem,
+            {
+              item,
+              isBeingDragged: item.id === draggedItemId,
+              onChange: handleChangeItem(idx),
+              onRemove: handleRemoveItem(idx),
+              onDuplicate: () => handleDuplicateItem(idx, {
+                isLabelFocused: true,
+                isNewAttribute: true,
+                label: appendOrUpdateNumericSuffix(
+                  items[idx].label,
+                  items.map((e) => e.label),
+                  " "
+                ),
+                value: appendOrUpdateNumericSuffix(
+                  items[idx].value,
+                  items.map((el) => el.value),
+                  "-"
+                )
+              })
+            },
+            `DraggableAttributeEnum_${item.id}`
+          )) }),
+          createPortal(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(DragOverlay, { style: {}, children: draggedItem && /* @__PURE__ */ jsxRuntimeExports.jsx(DraggableEnumEditorItem, { item: draggedItem }) }),
+            document.body
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        icon: "add",
+        variant: "text",
+        onClick: () => handleAddItem({ isNewAttribute: true }),
+        style: { display: "flex", justifyContent: "start" },
+        children: "Add new item"
+      }
+    )
+  ] }) });
+};
+export {
+  EnumEditor
+};
+//# sourceMappingURL=EnumEditor.es.js.map

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

@@ -0,0 +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":["jsx","Fragment","jsxs","Styled.EnumListWrapper"],"mappings":"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"}

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

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+const centeredContentFlexColumn = styled.css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const centeredContentFlexRow = styled.css`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const inputLikeColorsAndBorder = styled.css`
+  min-height: var(--base-input-size);
+  max-height: var(--base-input-size);
+  background-color: var(--md-sys-color-surface-container-low);
+  border-radius: var(--border-radius-m);
+  border: 1px solid;
+  border-color: var(--md-sys-color-outline-variant);
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-low-hover);
+  }
+`;
+const EnumListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  gap: 4px;
+`;
+const EnumItemWrapper = styled.div`
+  justify-content: stretch;
+  border-radius: 4px;
+  overflow: hidden;
+  &.dragged {
+    opacity: 0;
+  }
+`;
+const EnumItemHeader = styled.div`
+  ${centeredContentFlexRow}
+  cursor: pointer;
+  user-select: none;
+  padding: 8px;
+  height: 36px;
+  font-size: 14px;
+  line-height: 17px;
+  background-color: var(--md-sys-color-surface-container-high);
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+    .icon.toggle-expand {
+      visibility: visible;
+    }
+  }
+  .icon {
+    width: 20px;
+    height: 20px;
+    &.draggable {
+      cursor: grab;
+    }
+    &.toggle-expand {
+      visibility: hidden;
+    }
+  }
+  &.collapsed {
+    color: red;
+    height: 0;
+  }
+  &.expanded {
+    background-color: var(--md-sys-color-surface-container-highest);
+    &:hover {
+      background-color: var(--md-sys-color-surface-container-highest-hover);
+    }
+    .icon.toggle-expand {
+      visibility: visible;
+    }
+  }
+  .spacer {
+    flex-grow: 1;
+  }
+`;
+const EnumItemBodyExpander = styled.div`
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.25s;
+  &.expanded {
+    grid-template-rows: 1fr;
+  }
+`;
+const EnumItemBody = styled.div`
+  ${centeredContentFlexColumn}
+  background-color: var(--md-sys-color-surface-container-high);
+  align-items: stretch;
+  padding: 0 8px;
+  min-height: 0;
+  transition: padding 0.25s;
+  &.expanded {
+    padding: 8px;
+  }
+`;
+const Label = styled.div`
+  user-select: none;
+  min-width: 80px;
+`;
+const Row = styled.div`
+  ${centeredContentFlexRow}
+  &.footer {
+    justify-content: space-between;
+    padding: 0 8px;
+  }
+`;
+const ActionWrapper = styled.div`
+  ${centeredContentFlexRow}
+  gap: 4px;
+`;
+const LabelColor = styled.div`
+  border-radius: 4px;
+  width: 14px;
+  height: 14px;
+`;
+const IconSelect = styled(ayonReactComponents.IconSelect)`
+  flex-grow: 1;
+  button div {
+    width: 100%;
+  }
+`;
+const Button = styled(ayonReactComponents.Button)`
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+`;
+const InputText = styled(ayonReactComponents.InputText)`
+  background-color: var(--md-sys-color-surface-container-low);
+  border-color: var(--md-sys-color-outline-variant);
+  flex-grow: 1;
+  padding: 4px 8px;
+`;
+const PlaceholderWrapper = styled.div`
+  display: flex;
+  justify-content: start;
+  flex-grow: 1;
+  gap: var(--base-gap-small);
+`;
+const Placeholder = styled.div`
+  ${inputLikeColorsAndBorder}
+  cursor: pointer;
+  display: flex;
+  justify-content: start;
+  flex-grow: 1;
+  align-items: center;
+  width: 100%;
+  padding-left: 8px;
+  user-select: none;
+`;
+const ColorPicker = styled(Placeholder)`
+  ${inputLikeColorsAndBorder}
+  position: relative;
+  cursor: pointer;
+  &.active:hover {
+    filter: brightness(1.4);
+  }
+  input {
+    position: absolute;
+    visibility: hidden;
+  }
+`;
+exports.ActionWrapper = ActionWrapper;
+exports.Button = Button;
+exports.ColorPicker = ColorPicker;
+exports.EnumItemBody = EnumItemBody;
+exports.EnumItemBodyExpander = EnumItemBodyExpander;
+exports.EnumItemHeader = EnumItemHeader;
+exports.EnumItemWrapper = EnumItemWrapper;
+exports.EnumListWrapper = EnumListWrapper;
+exports.IconSelect = IconSelect;
+exports.InputText = InputText;
+exports.Label = Label;
+exports.LabelColor = LabelColor;
+exports.Placeholder = Placeholder;
+exports.PlaceholderWrapper = PlaceholderWrapper;
+exports.Row = Row;
+//# sourceMappingURL=EnumEditor.styled.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnumEditor.styled.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.styled.ts"],"sourcesContent":["import {\n  InputText as BaseInputText,\n  IconSelect as BaseIconSelect,\n  Button as BaseButton,\n} from '@ynput/ayon-react-components'\nimport styled, { css } from 'styled-components'\n\nconst centeredContentFlexColumn = css`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n`\n\nconst centeredContentFlexRow = css`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\nconst inputLikeColorsAndBorder = css`\n  min-height: var(--base-input-size);\n  max-height: var(--base-input-size);\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: var(--border-radius-m);\n  border: 1px solid;\n  border-color: var(--md-sys-color-outline-variant);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n`\n\nexport const EnumListWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  gap: 4px;\n`\n\nexport const EnumItemWrapper = styled.div`\n  justify-content: stretch;\n  border-radius: 4px;\n  overflow: hidden;\n  &.dragged {\n    opacity: 0;\n  }\n`\n\nexport const EnumItemHeader = styled.div`\n  ${centeredContentFlexRow}\n  cursor: pointer;\n  user-select: none;\n  padding: 8px;\n  height: 36px;\n  font-size: 14px;\n  line-height: 17px;\n  background-color: var(--md-sys-color-surface-container-high);\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .icon {\n    width: 20px;\n    height: 20px;\n    &.draggable {\n      cursor: grab;\n    }\n    &.toggle-expand {\n      visibility: hidden;\n    }\n  }\n  &.collapsed {\n    color: red;\n    height: 0;\n  }\n  &.expanded {\n    background-color: var(--md-sys-color-surface-container-highest);\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .spacer {\n    flex-grow: 1;\n  }\n`\n\nexport const EnumItemBodyExpander = styled.div`\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  transition: grid-template-rows 0.25s;\n  &.expanded {\n    grid-template-rows: 1fr;\n  }\n`\n\nexport const EnumItemBody = styled.div`\n  ${centeredContentFlexColumn}\n  background-color: var(--md-sys-color-surface-container-high);\n  align-items: stretch;\n  padding: 0 8px;\n  min-height: 0;\n  transition: padding 0.25s;\n  &.expanded {\n    padding: 8px;\n  }\n`\n\nexport const Label = styled.div`\n  user-select: none;\n  min-width: 80px;\n`\n\nexport const Row = styled.div`\n  ${centeredContentFlexRow}\n  &.footer {\n    justify-content: space-between;\n    padding: 0 8px;\n  }\n`\n\nexport const ActionWrapper = styled.div`\n  ${centeredContentFlexRow}\n  gap: 4px;\n`\n\nexport const LabelColor = styled.div`\n  border-radius: 4px;\n  width: 14px;\n  height: 14px;\n`\n\nexport const IconSelect = styled(BaseIconSelect)`\n  flex-grow: 1;\n  button div {\n    width: 100%;\n  }\n`\n\nexport const Button = styled(BaseButton)`\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport const InputText = styled(BaseInputText)`\n  background-color: var(--md-sys-color-surface-container-low);\n  border-color: var(--md-sys-color-outline-variant);\n  flex-grow: 1;\n  padding: 4px 8px;\n`\n\nexport const PlaceholderWrapper = styled.div`\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  gap: var(--base-gap-small);\n`\nexport const Placeholder = styled.div`\n  ${inputLikeColorsAndBorder}\n  cursor: pointer;\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  align-items: center;\n  width: 100%;\n  padding-left: 8px;\n  user-select: none;\n`\n\nexport const ColorPicker = styled(Placeholder)`\n  ${inputLikeColorsAndBorder}\n  position: relative;\n  cursor: pointer;\n  &.active:hover {\n    filter: brightness(1.4);\n  }\n  input {\n    position: absolute;\n    visibility: hidden;\n  }\n`\n"],"names":["css","BaseIconSelect","BaseButton","BaseInputText"],"mappings":";;;;AAOA,MAAM,4BAA4BA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,yBAAyBA,OAAA;AAAA;AAAA;AAAA;AAAA;AAK/B,MAAM,2BAA2BA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,MAAM,iBAAiB,OAAO;AAAA,IACjC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CnB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUpC,MAAM,eAAe,OAAO;AAAA,IAC/B,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWtB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,MAAM,OAAO;AAAA,IACtB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnB,MAAM,gBAAgB,OAAO;AAAA,IAChC,sBAAsB;AAAA;AAAA;AAInB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAA,aAAa,OAAOC,8BAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAA,SAAS,OAAOC,0BAAU;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAA,YAAY,OAAOC,6BAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,cAAc,OAAO;AAAA,IAC9B,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWf,MAAA,cAAc,OAAO,WAAW;AAAA,IACzC,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,185 @@
+import { IconSelect as IconSelect$1, Button as Button$1, InputText as InputText$1 } from "@ynput/ayon-react-components";
+import styled, { css } from "styled-components";
+const centeredContentFlexColumn = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const centeredContentFlexRow = css`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const inputLikeColorsAndBorder = css`
+  min-height: var(--base-input-size);
+  max-height: var(--base-input-size);
+  background-color: var(--md-sys-color-surface-container-low);
+  border-radius: var(--border-radius-m);
+  border: 1px solid;
+  border-color: var(--md-sys-color-outline-variant);
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-low-hover);
+  }
+`;
+const EnumListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  gap: 4px;
+`;
+const EnumItemWrapper = styled.div`
+  justify-content: stretch;
+  border-radius: 4px;
+  overflow: hidden;
+  &.dragged {
+    opacity: 0;
+  }
+`;
+const EnumItemHeader = styled.div`
+  ${centeredContentFlexRow}
+  cursor: pointer;
+  user-select: none;
+  padding: 8px;
+  height: 36px;
+  font-size: 14px;
+  line-height: 17px;
+  background-color: var(--md-sys-color-surface-container-high);
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+    .icon.toggle-expand {
+      visibility: visible;
+    }
+  }
+  .icon {
+    width: 20px;
+    height: 20px;
+    &.draggable {
+      cursor: grab;
+    }
+    &.toggle-expand {
+      visibility: hidden;
+    }
+  }
+  &.collapsed {
+    color: red;
+    height: 0;
+  }
+  &.expanded {
+    background-color: var(--md-sys-color-surface-container-highest);
+    &:hover {
+      background-color: var(--md-sys-color-surface-container-highest-hover);
+    }
+    .icon.toggle-expand {
+      visibility: visible;
+    }
+  }
+  .spacer {
+    flex-grow: 1;
+  }
+`;
+const EnumItemBodyExpander = styled.div`
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.25s;
+  &.expanded {
+    grid-template-rows: 1fr;
+  }
+`;
+const EnumItemBody = styled.div`
+  ${centeredContentFlexColumn}
+  background-color: var(--md-sys-color-surface-container-high);
+  align-items: stretch;
+  padding: 0 8px;
+  min-height: 0;
+  transition: padding 0.25s;
+  &.expanded {
+    padding: 8px;
+  }
+`;
+const Label = styled.div`
+  user-select: none;
+  min-width: 80px;
+`;
+const Row = styled.div`
+  ${centeredContentFlexRow}
+  &.footer {
+    justify-content: space-between;
+    padding: 0 8px;
+  }
+`;
+const ActionWrapper = styled.div`
+  ${centeredContentFlexRow}
+  gap: 4px;
+`;
+const LabelColor = styled.div`
+  border-radius: 4px;
+  width: 14px;
+  height: 14px;
+`;
+const IconSelect = styled(IconSelect$1)`
+  flex-grow: 1;
+  button div {
+    width: 100%;
+  }
+`;
+const Button = styled(Button$1)`
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+`;
+const InputText = styled(InputText$1)`
+  background-color: var(--md-sys-color-surface-container-low);
+  border-color: var(--md-sys-color-outline-variant);
+  flex-grow: 1;
+  padding: 4px 8px;
+`;
+const PlaceholderWrapper = styled.div`
+  display: flex;
+  justify-content: start;
+  flex-grow: 1;
+  gap: var(--base-gap-small);
+`;
+const Placeholder = styled.div`
+  ${inputLikeColorsAndBorder}
+  cursor: pointer;
+  display: flex;
+  justify-content: start;
+  flex-grow: 1;
+  align-items: center;
+  width: 100%;
+  padding-left: 8px;
+  user-select: none;
+`;
+const ColorPicker = styled(Placeholder)`
+  ${inputLikeColorsAndBorder}
+  position: relative;
+  cursor: pointer;
+  &.active:hover {
+    filter: brightness(1.4);
+  }
+  input {
+    position: absolute;
+    visibility: hidden;
+  }
+`;
+export {
+  ActionWrapper,
+  Button,
+  ColorPicker,
+  EnumItemBody,
+  EnumItemBodyExpander,
+  EnumItemHeader,
+  EnumItemWrapper,
+  EnumListWrapper,
+  IconSelect,
+  InputText,
+  Label,
+  LabelColor,
+  Placeholder,
+  PlaceholderWrapper,
+  Row
+};
+//# sourceMappingURL=EnumEditor.styled.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnumEditor.styled.es.js","sources":["../../../../../src/components/EnumEditor/EnumEditor.styled.ts"],"sourcesContent":["import {\n  InputText as BaseInputText,\n  IconSelect as BaseIconSelect,\n  Button as BaseButton,\n} from '@ynput/ayon-react-components'\nimport styled, { css } from 'styled-components'\n\nconst centeredContentFlexColumn = css`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n`\n\nconst centeredContentFlexRow = css`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\nconst inputLikeColorsAndBorder = css`\n  min-height: var(--base-input-size);\n  max-height: var(--base-input-size);\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: var(--border-radius-m);\n  border: 1px solid;\n  border-color: var(--md-sys-color-outline-variant);\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n`\n\nexport const EnumListWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  gap: 4px;\n`\n\nexport const EnumItemWrapper = styled.div`\n  justify-content: stretch;\n  border-radius: 4px;\n  overflow: hidden;\n  &.dragged {\n    opacity: 0;\n  }\n`\n\nexport const EnumItemHeader = styled.div`\n  ${centeredContentFlexRow}\n  cursor: pointer;\n  user-select: none;\n  padding: 8px;\n  height: 36px;\n  font-size: 14px;\n  line-height: 17px;\n  background-color: var(--md-sys-color-surface-container-high);\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .icon {\n    width: 20px;\n    height: 20px;\n    &.draggable {\n      cursor: grab;\n    }\n    &.toggle-expand {\n      visibility: hidden;\n    }\n  }\n  &.collapsed {\n    color: red;\n    height: 0;\n  }\n  &.expanded {\n    background-color: var(--md-sys-color-surface-container-highest);\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n    .icon.toggle-expand {\n      visibility: visible;\n    }\n  }\n  .spacer {\n    flex-grow: 1;\n  }\n`\n\nexport const EnumItemBodyExpander = styled.div`\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  transition: grid-template-rows 0.25s;\n  &.expanded {\n    grid-template-rows: 1fr;\n  }\n`\n\nexport const EnumItemBody = styled.div`\n  ${centeredContentFlexColumn}\n  background-color: var(--md-sys-color-surface-container-high);\n  align-items: stretch;\n  padding: 0 8px;\n  min-height: 0;\n  transition: padding 0.25s;\n  &.expanded {\n    padding: 8px;\n  }\n`\n\nexport const Label = styled.div`\n  user-select: none;\n  min-width: 80px;\n`\n\nexport const Row = styled.div`\n  ${centeredContentFlexRow}\n  &.footer {\n    justify-content: space-between;\n    padding: 0 8px;\n  }\n`\n\nexport const ActionWrapper = styled.div`\n  ${centeredContentFlexRow}\n  gap: 4px;\n`\n\nexport const LabelColor = styled.div`\n  border-radius: 4px;\n  width: 14px;\n  height: 14px;\n`\n\nexport const IconSelect = styled(BaseIconSelect)`\n  flex-grow: 1;\n  button div {\n    width: 100%;\n  }\n`\n\nexport const Button = styled(BaseButton)`\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport const InputText = styled(BaseInputText)`\n  background-color: var(--md-sys-color-surface-container-low);\n  border-color: var(--md-sys-color-outline-variant);\n  flex-grow: 1;\n  padding: 4px 8px;\n`\n\nexport const PlaceholderWrapper = styled.div`\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  gap: var(--base-gap-small);\n`\nexport const Placeholder = styled.div`\n  ${inputLikeColorsAndBorder}\n  cursor: pointer;\n  display: flex;\n  justify-content: start;\n  flex-grow: 1;\n  align-items: center;\n  width: 100%;\n  padding-left: 8px;\n  user-select: none;\n`\n\nexport const ColorPicker = styled(Placeholder)`\n  ${inputLikeColorsAndBorder}\n  position: relative;\n  cursor: pointer;\n  &.active:hover {\n    filter: brightness(1.4);\n  }\n  input {\n    position: absolute;\n    visibility: hidden;\n  }\n`\n"],"names":["BaseIconSelect","BaseButton","BaseInputText"],"mappings":";;AAOA,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAK/B,MAAM,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,MAAM,iBAAiB,OAAO;AAAA,IACjC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CnB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUpC,MAAM,eAAe,OAAO;AAAA,IAC/B,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWtB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,MAAM,OAAO;AAAA,IACtB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnB,MAAM,gBAAgB,OAAO;AAAA,IAChC,sBAAsB;AAAA;AAAA;AAInB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAA,aAAa,OAAOA,YAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAA,SAAS,OAAOC,QAAU;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAA,YAAY,OAAOC,WAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,cAAc,OAAO;AAAA,IAC9B,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWf,MAAA,cAAc,OAAO,WAAW;AAAA,IACzC,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,67 @@
+"use strict";
+const lodash = require("lodash");
+const React = require("react");
+const useDraggable = ({
+  creator,
+  initialData,
+  onChange,
+  normalizer
+}) => {
+  const [items, setItems] = React.useState(initialData);
+  const updateAndSync = (data) => {
+    onChange(normalizer(data));
+    setItems(data);
+  };
+  const handleAddItem = (overrides) => {
+    updateAndSync([...items, { ...creator(), ...overrides, id: lodash.uniqueId() }]);
+  };
+  const handleRemoveItem = (idx) => () => {
+    updateAndSync([...items.slice(0, idx), ...items.slice(idx + 1)]);
+  };
+  const handleChangeItem = (idx) => (attrs, values) => {
+    let updatedItem = { ...items[idx] };
+    attrs.map((attr, index) => updatedItem[attr] = values[index]);
+    updateAndSync([...items.slice(0, idx), updatedItem, ...items.slice(idx + 1)]);
+  };
+  const handleDuplicateItem = (idx, overrides) => {
+    updateAndSync([
+      ...items.slice(0, idx + 1),
+      { ...items[idx], id: lodash.uniqueId(), ...overrides },
+      ...items.slice(idx + 1)
+    ]);
+  };
+  const handleDraggableEnd = (event) => {
+    if (!event.over) {
+      return;
+    }
+    const activeItem = items.find((filterItem) => filterItem.id == event.active.id);
+    const activeItemIndex = items.indexOf(activeItem);
+    const overItem = items.find((item) => item.id == event.over.id);
+    const overItemIndex = items.indexOf(overItem);
+    if (activeItemIndex < overItemIndex) {
+      updateAndSync([
+        ...items.slice(0, activeItemIndex),
+        ...items.slice(activeItemIndex + 1, overItemIndex + 1),
+        activeItem,
+        ...items.slice(overItemIndex + 1)
+      ]);
+    } else {
+      updateAndSync([
+        ...items.slice(0, overItemIndex),
+        activeItem,
+        ...items.slice(overItemIndex, activeItemIndex),
+        ...items.slice(activeItemIndex + 1)
+      ]);
+    }
+  };
+  return {
+    items,
+    handleAddItem,
+    handleRemoveItem,
+    handleChangeItem,
+    handleDuplicateItem,
+    handleDraggableEnd
+  };
+};
+module.exports = useDraggable;
+//# sourceMappingURL=useDraggable.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggable.cjs.js","sources":["../../../../../../src/components/EnumEditor/hooks/useDraggable.ts"],"sourcesContent":["import { DragEndEvent } from '@dnd-kit/core';\nimport { uniqueId } from 'lodash'\nimport { useState } from 'react'\n\nconst useDraggable = <T extends { id: string }, U>({\n  creator,\n  initialData,\n  onChange,\n  normalizer,\n}: {\n  creator: () => T\n  initialData: T[]\n  onChange: (data: U[]) => void\n  normalizer: (data: T[]) => U[]\n}) => {\n  const [items, setItems] = useState<T[]>(initialData)\n\n  const updateAndSync = (data: T[]) => {\n    onChange(normalizer(data))\n    setItems(data)\n  }\n\n  const handleAddItem = (overrides: Partial<T>) => {\n    updateAndSync([...items, { ...creator(), ...overrides, id: uniqueId() }])\n  }\n\n  const handleRemoveItem = (idx: number) => () => {\n    updateAndSync([...items.slice(0, idx), ...items.slice(idx + 1)])\n  }\n\n  const handleChangeItem =\n    (idx: number) => (attrs: (keyof T)[], values: (boolean | string | undefined)[]) => {\n      let updatedItem: T = { ...items[idx] }\n      //@ts-ignore\n      attrs.map((attr, index) => (updatedItem[attr] = values[index]))\n      updateAndSync([...items.slice(0, idx), updatedItem, ...items.slice(idx + 1)])\n    }\n\n  const handleDuplicateItem = (idx: number, overrides: Partial<T>) => {\n    updateAndSync([\n      ...items.slice(0, idx + 1),\n      { ...items[idx], id: uniqueId(), ...overrides },\n      ...items.slice(idx + 1),\n    ])\n  }\n\n  const handleDraggableEnd = (event: DragEndEvent) => {\n    if (!event.over) {\n      return\n    }\n\n    const activeItem = items.find((filterItem) => filterItem.id == event.active.id)\n    const activeItemIndex = items.indexOf(activeItem!)\n    const overItem = items.find((item) => item.id == event.over!.id)\n    const overItemIndex = items.indexOf(overItem!)\n\n    if (activeItemIndex < overItemIndex) {\n      updateAndSync([\n        ...items.slice(0, activeItemIndex),\n        ...items.slice(activeItemIndex + 1, overItemIndex + 1),\n        activeItem!,\n        ...items.slice(overItemIndex + 1),\n      ])\n    } else {\n      updateAndSync([\n        ...items.slice(0, overItemIndex),\n        activeItem!,\n        ...items.slice(overItemIndex, activeItemIndex),\n        ...items.slice(activeItemIndex + 1),\n      ])\n    }\n  }\n\n  return {\n    items,\n    handleAddItem,\n    handleRemoveItem,\n    handleChangeItem,\n    handleDuplicateItem,\n    handleDraggableEnd,\n  }\n}\n\nexport default useDraggable\n"],"names":["useState","uniqueId"],"mappings":";;;AAIA,MAAM,eAAe,CAA8B;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAc,WAAW;AAE7C,QAAA,gBAAgB,CAAC,SAAc;AAC1B,aAAA,WAAW,IAAI,CAAC;AACzB,aAAS,IAAI;AAAA,EACf;AAEM,QAAA,gBAAgB,CAAC,cAA0B;AAC/C,kBAAc,CAAC,GAAG,OAAO,EAAE,GAAG,QAAA,GAAW,GAAG,WAAW,IAAIC,gBAAS,EAAA,CAAG,CAAC;AAAA,EAC1E;AAEM,QAAA,mBAAmB,CAAC,QAAgB,MAAM;AAC9C,kBAAc,CAAC,GAAG,MAAM,MAAM,GAAG,GAAG,GAAG,GAAG,MAAM,MAAM,MAAM,CAAC,CAAC,CAAC;AAAA,EACjE;AAEA,QAAM,mBACJ,CAAC,QAAgB,CAAC,OAAoB,WAA6C;AACjF,QAAI,cAAiB,EAAE,GAAG,MAAM,GAAG,EAAE;AAE/B,UAAA,IAAI,CAAC,MAAM,UAAW,YAAY,IAAI,IAAI,OAAO,KAAK,CAAE;AAC9D,kBAAc,CAAC,GAAG,MAAM,MAAM,GAAG,GAAG,GAAG,aAAa,GAAG,MAAM,MAAM,MAAM,CAAC,CAAC,CAAC;AAAA,EAC9E;AAEI,QAAA,sBAAsB,CAAC,KAAa,cAA0B;AACpD,kBAAA;AAAA,MACZ,GAAG,MAAM,MAAM,GAAG,MAAM,CAAC;AAAA,MACzB,EAAE,GAAG,MAAM,GAAG,GAAG,IAAIA,OAAA,SAAA,GAAY,GAAG,UAAU;AAAA,MAC9C,GAAG,MAAM,MAAM,MAAM,CAAC;AAAA,IAAA,CACvB;AAAA,EACH;AAEM,QAAA,qBAAqB,CAAC,UAAwB;AAC9C,QAAA,CAAC,MAAM,MAAM;AACf;AAAA,IAAA;AAGI,UAAA,aAAa,MAAM,KAAK,CAAC,eAAe,WAAW,MAAM,MAAM,OAAO,EAAE;AACxE,UAAA,kBAAkB,MAAM,QAAQ,UAAW;AAC3C,UAAA,WAAW,MAAM,KAAK,CAAC,SAAS,KAAK,MAAM,MAAM,KAAM,EAAE;AACzD,UAAA,gBAAgB,MAAM,QAAQ,QAAS;AAE7C,QAAI,kBAAkB,eAAe;AACrB,oBAAA;AAAA,QACZ,GAAG,MAAM,MAAM,GAAG,eAAe;AAAA,QACjC,GAAG,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAAA,QACrD;AAAA,QACA,GAAG,MAAM,MAAM,gBAAgB,CAAC;AAAA,MAAA,CACjC;AAAA,IAAA,OACI;AACS,oBAAA;AAAA,QACZ,GAAG,MAAM,MAAM,GAAG,aAAa;AAAA,QAC/B;AAAA,QACA,GAAG,MAAM,MAAM,eAAe,eAAe;AAAA,QAC7C,GAAG,MAAM,MAAM,kBAAkB,CAAC;AAAA,MAAA,CACnC;AAAA,IAAA;AAAA,EAEL;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;"}

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

@@ -0,0 +1,68 @@
+import { uniqueId } from "lodash";
+import { useState } from "react";
+const useDraggable = ({
+  creator,
+  initialData,
+  onChange,
+  normalizer
+}) => {
+  const [items, setItems] = useState(initialData);
+  const updateAndSync = (data) => {
+    onChange(normalizer(data));
+    setItems(data);
+  };
+  const handleAddItem = (overrides) => {
+    updateAndSync([...items, { ...creator(), ...overrides, id: uniqueId() }]);
+  };
+  const handleRemoveItem = (idx) => () => {
+    updateAndSync([...items.slice(0, idx), ...items.slice(idx + 1)]);
+  };
+  const handleChangeItem = (idx) => (attrs, values) => {
+    let updatedItem = { ...items[idx] };
+    attrs.map((attr, index) => updatedItem[attr] = values[index]);
+    updateAndSync([...items.slice(0, idx), updatedItem, ...items.slice(idx + 1)]);
+  };
+  const handleDuplicateItem = (idx, overrides) => {
+    updateAndSync([
+      ...items.slice(0, idx + 1),
+      { ...items[idx], id: uniqueId(), ...overrides },
+      ...items.slice(idx + 1)
+    ]);
+  };
+  const handleDraggableEnd = (event) => {
+    if (!event.over) {
+      return;
+    }
+    const activeItem = items.find((filterItem) => filterItem.id == event.active.id);
+    const activeItemIndex = items.indexOf(activeItem);
+    const overItem = items.find((item) => item.id == event.over.id);
+    const overItemIndex = items.indexOf(overItem);
+    if (activeItemIndex < overItemIndex) {
+      updateAndSync([
+        ...items.slice(0, activeItemIndex),
+        ...items.slice(activeItemIndex + 1, overItemIndex + 1),
+        activeItem,
+        ...items.slice(overItemIndex + 1)
+      ]);
+    } else {
+      updateAndSync([
+        ...items.slice(0, overItemIndex),
+        activeItem,
+        ...items.slice(overItemIndex, activeItemIndex),
+        ...items.slice(activeItemIndex + 1)
+      ]);
+    }
+  };
+  return {
+    items,
+    handleAddItem,
+    handleRemoveItem,
+    handleChangeItem,
+    handleDuplicateItem,
+    handleDraggableEnd
+  };
+};
+export {
+  useDraggable as default
+};
+//# sourceMappingURL=useDraggable.es.js.map