@ynput/ayon-frontend-shared 0.2.28 → 0.2.30

package/dist/shared/src/containers/ProjectTreeTable/widgets/CellWidget.es.js

@@ -1,16 +1,16 @@
 import { j as n } from "../../../../../_virtual/jsx-runtime.es.js";
-import { useRef as z, useCallback as D, useMemo as H } from "react";
-import J from "styled-components";
-import { BooleanWidget as K } from "./BooleanWidget.es.js";
-import { CollapsedWidget as P } from "./CollapsedWidget.es.js";
-import { DateWidget as Q } from "./DateWidget.es.js";
-import { EnumWidget as U } from "./EnumWidget.es.js";
-import { TextWidget as X } from "./TextWidget.es.js";
-import { isLinkEditable as Y, LinksWidget as Z } from "./LinksWidget.es.js";
-import { useCellEditing as $ } from "../context/CellEditingContext.es.js";
-import { getCellId as I } from "../utils/cellUtils.es.js";
-import O from "clsx";
-import { useSelectionCellsContext as V } from "../context/SelectionCellsContext.es.js";
+import { useRef as H, useCallback as J, useMemo as K } from "react";
+import P from "styled-components";
+import { BooleanWidget as Q } from "./BooleanWidget.es.js";
+import { CollapsedWidget as U } from "./CollapsedWidget.es.js";
+import { DateWidget as X } from "./DateWidget.es.js";
+import { EnumWidget as Y } from "./EnumWidget.es.js";
+import { TextWidget as Z } from "./TextWidget.es.js";
+import { isLinkEditable as $, LinksWidget as D } from "./LinksWidget.es.js";
+import { useCellEditing as O } from "../context/CellEditingContext.es.js";
+import { getCellId as h } from "../utils/cellUtils.es.js";
+import V from "clsx";
+import { useSelectionCellsContext as tt } from "../context/SelectionCellsContext.es.js";
 import "react-toastify";
 import "lodash";
 import "uuid";
@@ -25,7 +25,7 @@ import "../components/SelectionCell.es.js";
 import "../components/RowSelectionHeader.es.js";
 import "./LoadMoreWidget.es.js";
 import "../context/ProjectTableQueriesContext.es.js";
-import { useProjectTableContext as tt } from "../context/ProjectTableContext.es.js";
+import { useProjectTableContext as ot } from "../context/ProjectTableContext.es.js";
 import "../context/ClipboardContext.es.js";
 import "../ProjectTreeTable.es.js";
 import "../context/ColumnSettingsContext.es.js";
@@ -33,6 +33,7 @@ import "../context/SelectedRowsContext.es.js";
 import "../context/DetailsPanelEntityContext.es.js";
 /* empty css                                    */
 import "../../ContextMenu/ContextMenuContext.es.js";
+import "../context/ProjectDataContext.es.js";
 import "../../../api/base/client.es.js";
 import "../../../api/generated/graphql.es.js";
 import "../../../api/generated/graphqlLinks.es.js";
@@ -89,6 +90,7 @@ import "../../../api/queries/entityLists/getLists.es.js";
 import "../../../api/queries/entityLists/updateLists.es.js";
 import "../../../api/queries/entityLists/getListsAttributes.es.js";
 import "../../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../../api/queries/entityLists/listFolders.es.js";
 import "../../../api/queries/folders/getFolders.es.js";
 import "../../../api/queries/grouping/getGrouping.es.js";
 import "../../../api/queries/links/updateLinks.es.js";
@@ -124,12 +126,13 @@ import "../../../context/AddonProjectContext.es.js";
 import "../../../context/AddonContext.es.js";
 import "../../../context/PowerpackContext.es.js";
 import "../../../context/MoveEntityContext.es.js";
+import "../../../context/MenuContext.es.js";
 import "react-redux";
 import "custom-protocol-check";
 import "../components/GroupSettingsFallback.es.js";
-import "../context/ProjectDataContext.es.js";
-import { EnumCellValue as ot } from "./EnumCellValue.es.js";
-const it = J.div`
+import { EnumCellValue as it } from "./EnumCellValue.es.js";
+import { NameWidget as rt } from "./NameWidget.es.js";
+const mt = P.div`
   position: absolute;
   inset: 0;
   padding: 4px 8px;
@@ -150,64 +153,76 @@ const it = J.div`
     border-radius: 4px;
     opacity: 1;
   }
-`, Ai = "edit-trigger", Mi = ({
-  rowId: E,
-  columnId: j,
+`, Li = "edit-trigger", Ri = ({
+  rowId: j,
+  columnId: x,
   value: i,
-  valueData: W,
-  attributeData: x,
+  valueData: T,
+  attributeData: g,
   options: d = [],
-  isCollapsed: T,
+  isCollapsed: b,
   isInherited: f,
-  isPlaceholder: g,
+  isPlaceholder: C,
   isReadOnly: l,
-  enableCustomValues: h,
+  enableCustomValues: I,
   folderId: A,
-  onChange: C,
-  pt: r,
-  ...b
+  onChange: E,
+  entityType: N,
+  pt: m,
+  ...y
 }) => {
-  const w = z(null), m = x == null ? void 0 : x.type, { projectName: M } = tt(), { isEditing: N, setEditingCellId: s } = $(), { isCellFocused: S, gridMap: y, selectCell: k, focusCell: L } = V(), p = I(E, j), u = N(p), R = S(p), v = D(() => {
-    g || l || s(p);
-  }, [p, s, g]), F = () => {
+  const W = H(null), r = g == null ? void 0 : g.type, { projectName: M } = ot(), { isEditing: S, setEditingCellId: s } = O(), { isCellFocused: k, gridMap: w, selectCell: L, focusCell: R } = tt(), p = h(j, x), u = S(p), F = k(p), G = J(() => {
+    C || l || s(p);
+  }, [p, s, C]), _ = () => {
     u || s(null);
-  }, G = () => {
-    const o = y.rowIdToIndex.get(E);
+  }, B = () => {
+    const o = w.rowIdToIndex.get(j);
     if (o === void 0) return;
-    const e = y.indexToRowId.get(o + 1);
+    const e = w.indexToRowId.get(o + 1);
     if (e) {
-      const t = I(e, j);
-      k(t, !1, !1), L(t), s(t);
+      const t = h(e, x);
+      L(t, !1, !1), R(t), s(t);
     }
-  }, _ = (o, e) => {
-    s(null), !l && (e === "Enter" && G(), (o !== i || e === "Enter") && (C == null || C(o, e)));
-  }, B = () => {
+  }, q = (o, e) => {
+    s(null), !l && (e === "Enter" && B(), (o !== i || e === "Enter") && (E == null || E(o, e)));
+  }, v = () => {
     var e;
     s(null);
-    const o = (e = w.current) == null ? void 0 : e.closest("td");
+    const o = (e = W.current) == null ? void 0 : e.closest("td");
     o && o.focus();
-  }, q = H(() => {
+  }, z = K(() => {
     const o = {
-      onChange: _,
-      onCancelEdit: B,
+      onChange: q,
+      onCancelEdit: v,
       isEditing: u
     }, e = ["string", "integer", "float"];
     switch (!0) {
       // this is showing the collapsed widget (dot)
-      case T: {
-        const t = m != null && m.includes("list") ? d.find(
+      case b: {
+        const t = r != null && r.includes("list") ? d.find(
           (a) => Array.isArray(i) ? i.includes(a.value) : i === a.value
         ) : void 0, c = t == null ? void 0 : t.color;
-        return /* @__PURE__ */ n.jsx(P, { color: c });
+        return /* @__PURE__ */ n.jsx(U, { color: c });
       }
-      case m === "links": {
-        const t = W, c = Y(
+      case r === "name":
+        return /* @__PURE__ */ n.jsx(
+          rt,
+          {
+            value: i,
+            valueData: T,
+            cellId: p,
+            entityType: N || "",
+            ...o
+          }
+        );
+      case r === "links": {
+        const t = T, c = $(
           (t == null ? void 0 : t.direction) || "out",
           (t == null ? void 0 : t.link.linkType) || "",
           (t == null ? void 0 : t.entityType) || ""
         );
         return l = !c, /* @__PURE__ */ n.jsx(
-          Z,
+          D,
           {
             value: t,
             cellId: p,
@@ -223,77 +238,78 @@ const it = J.div`
         if (l) {
           const c = d.filter((a) => t.includes(a.value));
           return /* @__PURE__ */ n.jsx(
-            ot,
+            it,
             {
               selectedOptions: c,
               isReadOnly: !0,
               hasMultipleValues: t.length > 1,
-              isMultiSelect: m == null ? void 0 : m.includes("list")
+              isMultiSelect: r == null ? void 0 : r.includes("list")
             }
           );
         }
         return /* @__PURE__ */ n.jsx(
-          U,
+          Y,
           {
             value: t,
             options: d,
-            type: m,
+            type: r,
             onOpen: () => s(p),
-            enableCustomValues: h,
+            enableCustomValues: I,
             ...o,
-            ...r == null ? void 0 : r.enum
+            ...m == null ? void 0 : m.enum
           }
         );
       }
-      case e.includes(m):
+      case e.includes(r):
         return /* @__PURE__ */ n.jsx(
-          X,
+          Z,
           {
             value: i,
             isInherited: f,
+            columnId: x,
             ...o,
-            ...r == null ? void 0 : r.text
+            ...m == null ? void 0 : m.text
           }
         );
-      case m === "datetime":
+      case r === "datetime":
         return /* @__PURE__ */ n.jsx(
-          Q,
+          X,
           {
             value: i || void 0,
             isInherited: f,
             ...o,
-            ...r == null ? void 0 : r.date
+            ...m == null ? void 0 : m.date
           }
         );
-      case m === "boolean":
-        return /* @__PURE__ */ n.jsx(K, { value: i, ...o, ...r == null ? void 0 : r.boolean });
-      case g:
+      case r === "boolean":
+        return /* @__PURE__ */ n.jsx(Q, { value: i, ...o, ...m == null ? void 0 : m.boolean });
+      case C:
         return null;
       default:
         return null;
     }
-  }, [p, i, m, u, d, T]);
+  }, [p, i, r, u, d, b]);
   return /* @__PURE__ */ n.jsx(
-    it,
+    mt,
     {
-      ...b,
-      className: O(b.className, {
+      ...y,
+      className: V(y.className, {
         inherited: f && !u,
         readonly: l,
         editable: !l
       }),
-      ref: w,
-      onDoubleClick: v,
-      onClick: F,
+      ref: W,
+      onDoubleClick: G,
+      onClick: _,
       id: p,
-      "data-tooltip": f && !u && R ? "Inherited" : void 0,
+      "data-tooltip": f && !u && F ? "Inherited" : void 0,
       "data-tooltip-delay": 200,
-      children: q
+      children: z
     }
   );
 };
 export {
-  Mi as CellWidget,
-  Ai as EDIT_TRIGGER_CLASS
+  Ri as CellWidget,
+  Li as EDIT_TRIGGER_CLASS
 };
 //# sourceMappingURL=CellWidget.es.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/CellWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/CellWidget.tsx"],"sourcesContent":["import { useMemo, useCallback, useRef, FC } from 'react'\nimport styled from 'styled-components'\n\n// Widgets\nimport { BooleanWidget, BooleanWidgetProps } from './BooleanWidget'\nimport { CollapsedWidget } from './CollapsedWidget'\nimport { DateWidget, DateWidgetProps } from './DateWidget'\nimport { EnumWidget, EnumWidgetProps } from './EnumWidget'\nimport { TextWidget, TextWidgetProps, TextWidgetType } from './TextWidget'\nimport { isLinkEditable, LinksWidget, LinkWidgetData } from './LinksWidget'\n\n// Contexts\nimport { useCellEditing } from '../context/CellEditingContext'\n\n// Utils\nimport { getCellId } from '../utils/cellUtils'\nimport clsx from 'clsx'\nimport { useSelectionCellsContext } from '../context/SelectionCellsContext'\nimport { AttributeData, AttributeEnumItem } from '../types'\nimport { useProjectTableContext } from '../context'\nimport { EnumCellValue } from './EnumCellValue'\n\nconst Cell = styled.div`\n  position: absolute;\n  inset: 0;\n  padding: 4px 8px;\n  display: flex;\n  align-items: center;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &.inherited {\n    opacity: 0.6;\n    font-style: italic;\n  }\n\n  &.loading {\n    inset: 4px;\n    border-radius: 4px;\n    opacity: 1;\n  }\n`\n\n// use this class to trigger the editing mode on a single click\nexport const EDIT_TRIGGER_CLASS = 'edit-trigger'\n\ntype WidgetAttributeData = { type: AttributeData['type'] | 'links' }\n\nexport type CellValue = string | number | boolean\nexport type CellValueData = Record<string, any>\n\ninterface EditorCellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  rowId: string\n  columnId: string\n  value: CellValue | CellValue[]\n  valueData?: CellValueData | CellValueData[] // extra data for the value\n  attributeData?: WidgetAttributeData\n  options?: AttributeEnumItem[]\n  isCollapsed?: boolean\n  isInherited?: boolean\n  isPlaceholder?: boolean\n  isFocused?: boolean\n  isReadOnly?: boolean\n  enableCustomValues?: boolean\n  folderId?: string | null\n  onChange?: (value: CellValue | CellValue[], key?: 'Enter' | 'Click' | 'Escape') => void\n  // options passthrough props\n  pt?: {\n    enum?: Partial<EnumWidgetProps>\n    text?: Partial<TextWidgetProps>\n    date?: Partial<DateWidgetProps>\n    boolean?: Partial<BooleanWidgetProps>\n  }\n}\n\nexport interface WidgetBaseProps {\n  isEditing?: boolean\n  onChange: Required<EditorCellProps>['onChange']\n  onCancelEdit?: () => void\n}\n\nexport const CellWidget: FC<EditorCellProps> = ({\n  rowId,\n  columnId,\n  value,\n  valueData,\n  attributeData,\n  options = [],\n  isCollapsed,\n  isInherited,\n  isPlaceholder,\n  isReadOnly,\n  enableCustomValues,\n  folderId,\n  onChange,\n  pt,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const type = attributeData?.type\n\n  const { projectName } = useProjectTableContext()\n  const { isEditing, setEditingCellId } = useCellEditing()\n  const { isCellFocused, gridMap, selectCell, focusCell } = useSelectionCellsContext()\n  const cellId = getCellId(rowId, columnId)\n\n  const isCurrentCellEditing = isEditing(cellId)\n  const isCurrentCellFocused = isCellFocused(cellId)\n\n  const handleDoubleClick = useCallback(() => {\n    if (isPlaceholder || isReadOnly) return\n    setEditingCellId(cellId)\n  }, [cellId, setEditingCellId, isPlaceholder])\n\n  const handleSingleClick = () => {\n    // clicking a cell that is not editing will close the editor on this cell\n    // NOTE: the selection of a cell is handled in ProjectTreeTable.tsx line 1079\n    if (!isCurrentCellEditing) {\n      setEditingCellId(null)\n    }\n  }\n\n  const moveToNextRow = () => {\n    const rowIndex = gridMap.rowIdToIndex.get(rowId)\n    if (rowIndex === undefined) return\n    const newRowId = gridMap.indexToRowId.get(rowIndex + 1)\n    if (newRowId) {\n      const newCellId = getCellId(newRowId, columnId)\n      selectCell(newCellId, false, false)\n      focusCell(newCellId)\n      setEditingCellId(newCellId)\n    }\n  }\n\n  const handleOnChange: WidgetBaseProps['onChange'] = (newValue, key) => {\n    setEditingCellId(null)\n    if (isReadOnly) return\n    // move to the next cell row\n    key === 'Enter' && moveToNextRow()\n    // make change if the value is different or if the key is 'Enter'\n    if (newValue !== value || key === 'Enter') {\n      onChange?.(newValue, key)\n    }\n  }\n\n  const handleCancel = () => {\n    setEditingCellId(null)\n    // ensure the browser focus moves back to the parent <td>\n    const td = ref.current?.closest('td') as HTMLElement | null\n    if (td) td.focus()\n  }\n\n  const widget = useMemo(() => {\n    // Common props shared across all widgets\n    const sharedProps: WidgetBaseProps = {\n      onChange: handleOnChange,\n      onCancelEdit: handleCancel,\n      isEditing: isCurrentCellEditing,\n    }\n\n    const textTypes: TextWidgetType[] = ['string', 'integer', 'float']\n\n    // Determine widget type based on attribute type\n    switch (true) {\n      // this is showing the collapsed widget (dot)\n      case isCollapsed: {\n        // if enum, find the first selected option and get its color\n        const firstSelectedOption = type?.includes('list')\n          ? options.find((option) =>\n              Array.isArray(value) ? value.includes(option.value) : value === option.value,\n            )\n          : undefined\n        const color = firstSelectedOption?.color\n        return <CollapsedWidget color={color} />\n      }\n\n      case type === 'links': {\n        const linksValue = valueData as LinkWidgetData | undefined\n\n        const isEditable = isLinkEditable(\n          linksValue?.direction || 'out',\n          linksValue?.link.linkType || '',\n          linksValue?.entityType || '',\n        )\n\n        // overwrite readonly state if the cell is currently being edited\n        isReadOnly = !isEditable\n        return (\n          <LinksWidget\n            value={linksValue}\n            cellId={cellId}\n            projectName={projectName}\n            disabled={!isEditable}\n            folderId={folderId}\n            {...sharedProps}\n          />\n        )\n      }\n\n      case !!options.length: {\n        const enumValue = Array.isArray(value) ? value : [value]\n        if (isReadOnly) {\n          const selectedOptions = options.filter((option) => enumValue.includes(option.value))\n          return (\n            <EnumCellValue\n              selectedOptions={selectedOptions}\n              isReadOnly\n              hasMultipleValues={enumValue.length > 1}\n              isMultiSelect={type?.includes('list')}\n            />\n          )\n        }\n        return (\n          <EnumWidget\n            value={enumValue}\n            options={options}\n            type={type}\n            onOpen={() => setEditingCellId(cellId)}\n            enableCustomValues={enableCustomValues}\n            {...sharedProps}\n            {...pt?.enum}\n          />\n        )\n      }\n\n      case textTypes.includes(type as TextWidgetType):\n        return (\n          <TextWidget\n            value={value as string}\n            isInherited={isInherited}\n            {...sharedProps}\n            {...pt?.text}\n          />\n        )\n\n      case type === 'datetime':\n        return (\n          <DateWidget\n            value={value ? (value as string) : undefined}\n            isInherited={isInherited}\n            {...sharedProps}\n            {...pt?.date}\n          />\n        )\n\n      case type === 'boolean':\n        return <BooleanWidget value={value as boolean} {...sharedProps} {...pt?.boolean} />\n\n      case isPlaceholder:\n        return null\n\n      default:\n        // TODO: We should not allow editing unrecognized types\n        // At this point, only list_of_strings without proper options is unrecognized\n        // (tags if not tags are specified in anatomy) and in that case, validation\n        // on the server fails with a string value. Unless we have a widget that\n        // accepts a string value AND options at the same time we shouldn't show\n        // any edit widget\n\n        //console.log(`Unrecognized type \"${type}\" for cell ${cellId}.`)\n        return null\n    }\n  }, [cellId, value, type, isCurrentCellEditing, options, isCollapsed])\n\n  return (\n    <Cell\n      {...props}\n      className={clsx(props.className, {\n        inherited: isInherited && !isCurrentCellEditing,\n        readonly: isReadOnly,\n        editable: !isReadOnly,\n      })}\n      ref={ref}\n      onDoubleClick={handleDoubleClick}\n      onClick={handleSingleClick}\n      id={cellId}\n      data-tooltip={\n        isInherited && !isCurrentCellEditing && isCurrentCellFocused ? 'Inherited' : undefined\n      }\n      data-tooltip-delay={200}\n    >\n      {widget}\n    </Cell>\n  )\n}\n"],"names":["Cell","styled","EDIT_TRIGGER_CLASS","CellWidget","rowId","columnId","value","valueData","attributeData","options","isCollapsed","isInherited","isPlaceholder","isReadOnly","enableCustomValues","folderId","onChange","pt","props","ref","useRef","type","projectName","useProjectTableContext","isEditing","setEditingCellId","useCellEditing","isCellFocused","gridMap","selectCell","focusCell","useSelectionCellsContext","cellId","getCellId","isCurrentCellEditing","isCurrentCellFocused","handleDoubleClick","useCallback","handleSingleClick","moveToNextRow","rowIndex","newRowId","newCellId","handleOnChange","newValue","key","handleCancel","td","_a","widget","useMemo","sharedProps","textTypes","firstSelectedOption","option","color","jsx","CollapsedWidget","linksValue","isEditable","isLinkEditable","LinksWidget","enumValue","selectedOptions","EnumCellValue","EnumWidget","TextWidget","DateWidget","BooleanWidget","clsx"],"mappings":"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"}
+{"version":3,"file":"CellWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/CellWidget.tsx"],"sourcesContent":["import { useMemo, useCallback, useRef, FC } from 'react'\nimport styled from 'styled-components'\n\n// Widgets\nimport { BooleanWidget, BooleanWidgetProps } from './BooleanWidget'\nimport { CollapsedWidget } from './CollapsedWidget'\nimport { DateWidget, DateWidgetProps } from './DateWidget'\nimport { EnumWidget, EnumWidgetProps } from './EnumWidget'\nimport { TextWidget, TextWidgetProps, TextWidgetType } from './TextWidget'\nimport { isLinkEditable, LinksWidget, LinkWidgetData } from './LinksWidget'\n\n// Contexts\nimport { useCellEditing } from '../context/CellEditingContext'\n\n// Utils\nimport { getCellId } from '../utils/cellUtils'\nimport clsx from 'clsx'\nimport { useSelectionCellsContext } from '../context/SelectionCellsContext'\nimport { AttributeData, AttributeEnumItem } from '../types'\nimport { useProjectTableContext } from '../context'\nimport { EnumCellValue } from './EnumCellValue'\nimport { NameWidget } from '@shared/containers/ProjectTreeTable/widgets/NameWidget'\nimport { NameWidgetData } from '@shared/components/RenameForm'\n\nconst Cell = styled.div`\n  position: absolute;\n  inset: 0;\n  padding: 4px 8px;\n  display: flex;\n  align-items: center;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &.inherited {\n    opacity: 0.6;\n    font-style: italic;\n  }\n\n  &.loading {\n    inset: 4px;\n    border-radius: 4px;\n    opacity: 1;\n  }\n`\n\n// use this class to trigger the editing mode on a single click\nexport const EDIT_TRIGGER_CLASS = 'edit-trigger'\n\ntype WidgetAttributeData = { type: AttributeData['type'] | 'links' | 'name' }\n\nexport type CellValue = string | number | boolean\nexport type CellValueData = Record<string, any>\n\ninterface EditorCellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  rowId: string\n  columnId: string\n  value: CellValue | CellValue[]\n  valueData?: CellValueData | CellValueData[] // extra data for the value\n  attributeData?: WidgetAttributeData\n  options?: AttributeEnumItem[]\n  isCollapsed?: boolean\n  isInherited?: boolean\n  isPlaceholder?: boolean\n  isFocused?: boolean\n  isReadOnly?: boolean\n  enableCustomValues?: boolean\n  folderId?: string | null\n  onChange?: (value: CellValue | CellValue[], key?: 'Enter' | 'Click' | 'Escape') => void\n  // options passthrough props\n  pt?: {\n    enum?: Partial<EnumWidgetProps>\n    text?: Partial<TextWidgetProps>\n    date?: Partial<DateWidgetProps>\n    boolean?: Partial<BooleanWidgetProps>\n  }\n  entityType?: string\n}\n\nexport interface WidgetBaseProps {\n  isEditing?: boolean\n  onChange: Required<EditorCellProps>['onChange']\n  onCancelEdit?: () => void\n}\n\nexport const CellWidget: FC<EditorCellProps> = ({\n  rowId,\n  columnId,\n  value,\n  valueData,\n  attributeData,\n  options = [],\n  isCollapsed,\n  isInherited,\n  isPlaceholder,\n  isReadOnly,\n  enableCustomValues,\n  folderId,\n  onChange,\n  entityType,\n  pt,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const type = attributeData?.type\n\n  const { projectName } = useProjectTableContext()\n  const { isEditing, setEditingCellId } = useCellEditing()\n  const { isCellFocused, gridMap, selectCell, focusCell } = useSelectionCellsContext()\n  const cellId = getCellId(rowId, columnId)\n\n  const isCurrentCellEditing = isEditing(cellId)\n  const isCurrentCellFocused = isCellFocused(cellId)\n\n  const handleDoubleClick = useCallback(() => {\n    if (isPlaceholder || isReadOnly) return\n    setEditingCellId(cellId)\n  }, [cellId, setEditingCellId, isPlaceholder])\n\n  const handleSingleClick = () => {\n    // clicking a cell that is not editing will close the editor on this cell\n    // NOTE: the selection of a cell is handled in ProjectTreeTable.tsx line 1079\n    if (!isCurrentCellEditing) {\n      setEditingCellId(null)\n    }\n  }\n\n  const moveToNextRow = () => {\n    const rowIndex = gridMap.rowIdToIndex.get(rowId)\n    if (rowIndex === undefined) return\n    const newRowId = gridMap.indexToRowId.get(rowIndex + 1)\n    if (newRowId) {\n      const newCellId = getCellId(newRowId, columnId)\n      selectCell(newCellId, false, false)\n      focusCell(newCellId)\n      setEditingCellId(newCellId)\n    }\n  }\n\n  const handleOnChange: WidgetBaseProps['onChange'] = (newValue, key) => {\n    setEditingCellId(null)\n    if (isReadOnly) return\n    // move to the next cell row\n    key === 'Enter' && moveToNextRow()\n    // make change if the value is different or if the key is 'Enter'\n    if (newValue !== value || key === 'Enter') {\n      onChange?.(newValue, key)\n    }\n  }\n\n  const handleCancel = () => {\n    setEditingCellId(null)\n    // ensure the browser focus moves back to the parent <td>\n    const td = ref.current?.closest('td') as HTMLElement | null\n    if (td) td.focus()\n  }\n\n  const widget = useMemo(() => {\n    // Common props shared across all widgets\n    const sharedProps: WidgetBaseProps = {\n      onChange: handleOnChange,\n      onCancelEdit: handleCancel,\n      isEditing: isCurrentCellEditing,\n    }\n\n    const textTypes: TextWidgetType[] = ['string', 'integer', 'float']\n\n    // Determine widget type based on attribute type\n    switch (true) {\n      // this is showing the collapsed widget (dot)\n      case isCollapsed: {\n        // if enum, find the first selected option and get its color\n        const firstSelectedOption = type?.includes('list')\n          ? options.find((option) =>\n              Array.isArray(value) ? value.includes(option.value) : value === option.value,\n            )\n          : undefined\n        const color = firstSelectedOption?.color\n        return <CollapsedWidget color={color} />\n      }\n      case type === 'name': {\n        return (\n          <NameWidget\n            value={value as CellValue}\n            valueData={valueData as NameWidgetData}\n            cellId={cellId}\n            entityType={entityType || ''}\n            {...sharedProps}\n          />\n        )\n      }\n\n      case type === 'links': {\n        const linksValue = valueData as LinkWidgetData | undefined\n\n        const isEditable = isLinkEditable(\n          linksValue?.direction || 'out',\n          linksValue?.link.linkType || '',\n          linksValue?.entityType || '',\n        )\n\n        // overwrite readonly state if the cell is currently being edited\n        isReadOnly = !isEditable\n        return (\n          <LinksWidget\n            value={linksValue}\n            cellId={cellId}\n            projectName={projectName}\n            disabled={!isEditable}\n            folderId={folderId}\n            {...sharedProps}\n          />\n        )\n      }\n\n      case !!options.length: {\n        const enumValue = Array.isArray(value) ? value : [value]\n        if (isReadOnly) {\n          const selectedOptions = options.filter((option) => enumValue.includes(option.value))\n          return (\n            <EnumCellValue\n              selectedOptions={selectedOptions}\n              isReadOnly\n              hasMultipleValues={enumValue.length > 1}\n              isMultiSelect={type?.includes('list')}\n            />\n          )\n        }\n        return (\n          <EnumWidget\n            value={enumValue}\n            options={options}\n            type={type}\n            onOpen={() => setEditingCellId(cellId)}\n            enableCustomValues={enableCustomValues}\n            {...sharedProps}\n            {...pt?.enum}\n          />\n        )\n      }\n\n      case textTypes.includes(type as TextWidgetType):\n        return (\n          <TextWidget\n            value={value as string}\n            isInherited={isInherited}\n            columnId={columnId}\n            {...sharedProps}\n            {...pt?.text}\n          />\n        )\n\n      case type === 'datetime':\n        return (\n          <DateWidget\n            value={value ? (value as string) : undefined}\n            isInherited={isInherited}\n            {...sharedProps}\n            {...pt?.date}\n          />\n        )\n\n      case type === 'boolean':\n        return <BooleanWidget value={value as boolean} {...sharedProps} {...pt?.boolean} />\n\n      case isPlaceholder:\n        return null\n\n      default:\n        // TODO: We should not allow editing unrecognized types\n        // At this point, only list_of_strings without proper options is unrecognized\n        // (tags if not tags are specified in anatomy) and in that case, validation\n        // on the server fails with a string value. Unless we have a widget that\n        // accepts a string value AND options at the same time we shouldn't show\n        // any edit widget\n\n        //console.log(`Unrecognized type \"${type}\" for cell ${cellId}.`)\n        return null\n    }\n  }, [cellId, value, type, isCurrentCellEditing, options, isCollapsed])\n\n  return (\n    <Cell\n      {...props}\n      className={clsx(props.className, {\n        inherited: isInherited && !isCurrentCellEditing,\n        readonly: isReadOnly,\n        editable: !isReadOnly,\n      })}\n      ref={ref}\n      onDoubleClick={handleDoubleClick}\n      onClick={handleSingleClick}\n      id={cellId}\n      data-tooltip={\n        isInherited && !isCurrentCellEditing && isCurrentCellFocused ? 'Inherited' : undefined\n      }\n      data-tooltip-delay={200}\n    >\n      {widget}\n    </Cell>\n  )\n}\n"],"names":["Cell","styled","EDIT_TRIGGER_CLASS","CellWidget","rowId","columnId","value","valueData","attributeData","options","isCollapsed","isInherited","isPlaceholder","isReadOnly","enableCustomValues","folderId","onChange","entityType","pt","props","ref","useRef","type","projectName","useProjectTableContext","isEditing","setEditingCellId","useCellEditing","isCellFocused","gridMap","selectCell","focusCell","useSelectionCellsContext","cellId","getCellId","isCurrentCellEditing","isCurrentCellFocused","handleDoubleClick","useCallback","handleSingleClick","moveToNextRow","rowIndex","newRowId","newCellId","handleOnChange","newValue","key","handleCancel","td","_a","widget","useMemo","sharedProps","textTypes","firstSelectedOption","option","color","jsx","CollapsedWidget","NameWidget","linksValue","isEditable","isLinkEditable","LinksWidget","enumValue","selectedOptions","EnumCellValue","EnumWidget","TextWidget","DateWidget","BooleanWidget","clsx"],"mappings":"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"}

package/dist/shared/src/containers/ProjectTreeTable/widgets/EnumWidget.cjs.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../../../../../_virtual/jsx-runtime.cjs.js"),V=require("@ynput/ayon-react-components"),E=require("clsx"),i=require("react"),A=require("styled-components"),S=require("./EnumCellValue.cjs.js"),b=A(V.Dropdown)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../../../../../_virtual/jsx-runtime.cjs.js"),A=require("@ynput/ayon-react-components"),S=require("clsx"),i=require("react"),D=require("styled-components"),j=require("./EnumCellValue.cjs.js"),T=D(A.Dropdown)`
   height: 100%;
   width: 100%;
-`,D=i.forwardRef(({value:w,isEditing:x,options:o,type:t,autoOpen:j=!0,isReadOnly:m,enableCustomValues:f,onOpen:T,onChange:v,onCancelEdit:C,onNext:_,pt:l,...a},k)=>{var R;const g=w.map(e=>e==null?void 0:e.toString()).filter(e=>!!e);let c=o.filter(e=>g.includes(e.value.toString()));g.forEach(e=>{o.find(s=>s.value===e)||(c=[...c,{label:e,value:e,color:f?"var(--md-sys-color-surface-container)":"var(--md-sys-color-error)",icon:f?void 0:"warning"}])});const O=c.length>1,u=i.useRef(null),[N,q]=i.useState(!1);i.useEffect(()=>{var e;x&&u.current&&j?(!u.current.isOpen&&((e=u.current)==null||e.open()),q(!0)):q(!1)},[x,u.current,j]),i.useEffect(()=>{var e;if(N&&!a.search){const s=(e=u.current)==null?void 0:e.getOptions(),r=s==null?void 0:s.querySelector("li");r&&(r.focus(),r.style.outline="none")}},[N,a.search]);const d=!!(t!=null&&t.includes("list")),M=e=>{let s=f?e:e.filter(r=>o.find(n=>n.value===r));t!=null&&t.includes("list")||(s=Array.isArray(s)?s[0]:s),v(s,"Click")};return x?h.jsxRuntimeExports.jsx(b,{options:o,value:g,ref:u,valueTemplate:(e,s,r)=>{var n;return h.jsxRuntimeExports.jsx(S.EnumCellValue,{selectedOptions:c,hasMultipleValues:s.length>1,isOpen:r,isReadOnly:m,isMultiSelect:d,...l==null?void 0:l.template,placeholder:a.placeholder,className:E("enum-dropdown-value",(n=l==null?void 0:l.template)==null?void 0:n.className)})},itemTemplate:(e,s,r)=>{var n;return h.jsxRuntimeExports.jsx(S.EnumCellValue,{selectedOptions:[e],hasMultipleValues:!1,isOpen:!1,isItem:!0,isMultiSelect:d,isSelected:r,...l==null?void 0:l.template,className:E("enum-dropdown-item",(n=l==null?void 0:l.template)==null?void 0:n.className)})},widthExpand:!0,multiSelect:d,disableOpen:m,disabled:m,sortBySelected:!0,...a,onChange:M,onClose:C,editable:f}):h.jsxRuntimeExports.jsx(S.EnumCellValue,{selectedOptions:c,hasMultipleValues:O,isMultiSelect:d,isReadOnly:m,...l==null?void 0:l.template,placeholder:a.placeholder,className:E("enum-value",(R=l==null?void 0:l.template)==null?void 0:R.className,a.className)})});exports.EnumWidget=D;
+`,_=i.forwardRef(({value:C,isEditing:x,options:o,type:t,autoOpen:v=!0,isReadOnly:m,enableCustomValues:f,onOpen:k,onChange:O,onCancelEdit:M,onNext:I,pt:l,...a},W)=>{var w;const g=C.map(e=>e==null?void 0:e.toString()).filter(e=>!!e);let u=o.filter(e=>g.includes(e.value.toString()));const N=[];g.forEach(e=>{if(!o.find(s=>s.value===e)){const s={label:e,value:e,color:f?"var(--md-sys-color-surface-container)":"var(--md-sys-color-error)",icon:f?void 0:"warning"};u=[...u,s],N.push(s)}});const V=u.length>1,E=[...o,...N],c=i.useRef(null),[q,R]=i.useState(!1);i.useEffect(()=>{var e;x&&c.current&&v?(!c.current.isOpen&&((e=c.current)==null||e.open()),R(!0)):R(!1)},[x,c.current,v]),i.useEffect(()=>{var e;if(q&&!a.search&&E.length<20){const s=(e=c.current)==null?void 0:e.getOptions(),n=s==null?void 0:s.querySelector("li");n&&(n.focus(),n.style.outline="none")}},[q,a.search,E.length]);const d=!!(t!=null&&t.includes("list")),b=e=>{let s=f?e:e.filter(n=>o.find(r=>r.value===n));t!=null&&t.includes("list")||(s=Array.isArray(s)?s[0]:s),O(s,"Click")};return x?h.jsxRuntimeExports.jsx(T,{options:E,value:g,ref:c,valueTemplate:(e,s,n)=>{var r;return h.jsxRuntimeExports.jsx(j.EnumCellValue,{selectedOptions:u,hasMultipleValues:s.length>1,isOpen:n,isReadOnly:m,isMultiSelect:d,...l==null?void 0:l.template,placeholder:a.placeholder,className:S("enum-dropdown-value",(r=l==null?void 0:l.template)==null?void 0:r.className)})},itemTemplate:(e,s,n)=>{var r;return h.jsxRuntimeExports.jsx(j.EnumCellValue,{selectedOptions:[e],hasMultipleValues:!1,isOpen:!1,isItem:!0,isMultiSelect:d,isSelected:n,...l==null?void 0:l.template,className:S("enum-dropdown-item",(r=l==null?void 0:l.template)==null?void 0:r.className)})},widthExpand:!0,multiSelect:d,disableOpen:m,disabled:m,sortBySelected:!0,searchOnNumber:10,...a,onChange:b,onClose:M,editable:f}):h.jsxRuntimeExports.jsx(j.EnumCellValue,{selectedOptions:u,hasMultipleValues:V,isMultiSelect:d,isReadOnly:m,...l==null?void 0:l.template,placeholder:a.placeholder,className:S("enum-value",(w=l==null?void 0:l.template)==null?void 0:w.className,a.className)})});exports.EnumWidget=_;
 //# sourceMappingURL=EnumWidget.cjs.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/EnumWidget.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport type { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\nimport { EnumCellValue, EnumTemplateProps } from './EnumCellValue'\n\nconst StyledDropdown = styled(Dropdown)`\n  height: 100%;\n  width: 100%;\n`\n\nexport interface EnumWidgetProps\n  extends Omit<DropdownProps, 'onChange' | 'value'>,\n    WidgetBaseProps {\n  value: (string | number | boolean)[]\n  options: AttributeEnumItem[]\n  type?: AttributeData['type']\n  autoOpen?: boolean\n  isReadOnly?: boolean\n  enableCustomValues?: boolean\n  pt?: {\n    template?: Partial<EnumTemplateProps>\n  }\n  onOpen?: () => void\n  onNext?: () => void\n}\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n  (\n    {\n      value,\n      isEditing,\n      options,\n      type,\n      autoOpen = true,\n      isReadOnly,\n      enableCustomValues,\n      onOpen,\n      onChange,\n      onCancelEdit,\n      onNext,\n      pt,\n      ...dropdownProps\n    },\n    _ref,\n  ) => {\n    // convert value to string array\n    const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n    let selectedOptions = options.filter((option) =>\n      valueAsStrings.includes(option.value.toString()),\n    )\n\n    // Check if all values are present in options, if not, add a warning\n    valueAsStrings.forEach((val) => {\n      if (!options.find((option) => option.value === val)) {\n        selectedOptions = [\n          ...selectedOptions,\n          {\n            label: val,\n            value: val,\n            color: enableCustomValues\n              ? 'var(--md-sys-color-surface-container)'\n              : 'var(--md-sys-color-error)',\n            icon: enableCustomValues ? undefined : 'warning',\n          },\n        ]\n      }\n    })\n    const hasMultipleValues = selectedOptions.length > 1\n\n    const dropdownRef = useRef<DropdownRef>(null)\n\n    const [dropdownOpen, setDropdownOpen] = useState(false)\n    useEffect(() => {\n      if (isEditing && dropdownRef.current && autoOpen) {\n        !dropdownRef.current.isOpen && dropdownRef.current?.open()\n        setDropdownOpen(true)\n      } else {\n        setDropdownOpen(false)\n      }\n    }, [isEditing, dropdownRef.current, autoOpen])\n\n    // when the dropdown is open, focus the first item\n    useEffect(() => {\n      if (dropdownOpen && !dropdownProps.search) {\n        const optionsUlEl = dropdownRef.current?.getOptions() as HTMLUListElement\n        const firstItem = optionsUlEl?.querySelector('li')\n        if (firstItem) {\n          firstItem.focus()\n          // set style of li to have no outline (no focus ring)\n          firstItem.style.outline = 'none'\n        }\n      }\n    }, [dropdownOpen, dropdownProps.search])\n\n    const isMultiSelect = !!type?.includes('list')\n\n    const handleChange = (value: string[]) => {\n      let filteredValue: string | string[] = enableCustomValues\n        ? value\n        : value.filter((v) => options.find((o) => o.value === v))\n      if (type?.includes('list')) {\n        onChange(filteredValue, 'Click')\n      } else {\n        // check if the value is an array or a string and for arrays take the first value only\n        filteredValue = Array.isArray(filteredValue) ? filteredValue[0] : filteredValue\n\n        // take first value as the type is not list]\n        onChange(filteredValue, 'Click')\n      }\n    }\n\n    if (isEditing) {\n      return (\n        <StyledDropdown\n          options={options}\n          value={valueAsStrings}\n          ref={dropdownRef}\n          valueTemplate={(_value, selected, isOpen) => (\n            <EnumCellValue\n              selectedOptions={selectedOptions}\n              hasMultipleValues={selected.length > 1}\n              isOpen={isOpen}\n              isReadOnly={isReadOnly}\n              isMultiSelect={isMultiSelect}\n              {...pt?.template}\n              placeholder={dropdownProps.placeholder}\n              className={clsx('enum-dropdown-value', pt?.template?.className)}\n            />\n          )}\n          itemTemplate={(option, _isActive, isSelected) => (\n            <EnumCellValue\n              selectedOptions={[option]}\n              hasMultipleValues={false}\n              isOpen={false}\n              isItem\n              isMultiSelect={isMultiSelect}\n              isSelected={isSelected}\n              {...pt?.template}\n              className={clsx('enum-dropdown-item', pt?.template?.className)}\n            />\n          )}\n          widthExpand\n          multiSelect={isMultiSelect}\n          disableOpen={isReadOnly}\n          disabled={isReadOnly}\n          sortBySelected\n          {...dropdownProps}\n          onChange={handleChange}\n          onClose={onCancelEdit}\n          editable={enableCustomValues}\n        />\n      )\n    }\n\n    return (\n      <EnumCellValue\n        selectedOptions={selectedOptions}\n        hasMultipleValues={hasMultipleValues}\n        isMultiSelect={isMultiSelect}\n        isReadOnly={isReadOnly}\n        {...pt?.template}\n        placeholder={dropdownProps.placeholder}\n        className={clsx('enum-value', pt?.template?.className, dropdownProps.className)}\n      />\n    )\n  },\n)\n"],"names":["StyledDropdown","styled","Dropdown","EnumWidget","forwardRef","value","isEditing","options","type","autoOpen","isReadOnly","enableCustomValues","onOpen","onChange","onCancelEdit","onNext","pt","dropdownProps","_ref","valueAsStrings","v","selectedOptions","option","val","hasMultipleValues","dropdownRef","useRef","dropdownOpen","setDropdownOpen","useState","useEffect","_a","optionsUlEl","firstItem","isMultiSelect","handleChange","filteredValue","o","jsx","_value","selected","isOpen","EnumCellValue","clsx","_isActive","isSelected"],"mappings":"gSAQMA,EAAiBC,EAAOC,UAAQ;AAAA;AAAA;AAAA,EAqBzBC,EAAaC,EAAA,WACxB,CACE,CACE,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,mBAAAC,EACA,OAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,GAAAC,EACA,GAAGC,GAELC,IACG,OAEH,MAAMC,EAAiBd,EAAM,IAAKe,GAAMA,GAAA,YAAAA,EAAG,UAAU,EAAE,OAAQA,GAAM,CAAC,CAACA,CAAC,EACxE,IAAIC,EAAkBd,EAAQ,OAAQe,GACpCH,EAAe,SAASG,EAAO,MAAM,SAAU,CAAA,CACjD,EAGeH,EAAA,QAASI,GAAQ,CACzBhB,EAAQ,KAAMe,GAAWA,EAAO,QAAUC,CAAG,IAC9BF,EAAA,CAChB,GAAGA,EACH,CACE,MAAOE,EACP,MAAOA,EACP,MAAOZ,EACH,wCACA,4BACJ,KAAMA,EAAqB,OAAY,SAAA,CAE3C,EACF,CACD,EACK,MAAAa,EAAoBH,EAAgB,OAAS,EAE7CI,EAAcC,SAAoB,IAAI,EAEtC,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EACtDC,EAAAA,UAAU,IAAM,OACVxB,GAAamB,EAAY,SAAWhB,GACtC,CAACgB,EAAY,QAAQ,UAAUM,EAAAN,EAAY,UAAZ,MAAAM,EAAqB,QACpDH,EAAgB,EAAI,GAEpBA,EAAgB,EAAK,GAEtB,CAACtB,EAAWmB,EAAY,QAAShB,CAAQ,CAAC,EAG7CqB,EAAAA,UAAU,IAAM,OACV,GAAAH,GAAgB,CAACV,EAAc,OAAQ,CACnC,MAAAe,GAAcD,EAAAN,EAAY,UAAZ,YAAAM,EAAqB,aACnCE,EAAYD,GAAA,YAAAA,EAAa,cAAc,MACzCC,IACFA,EAAU,MAAM,EAEhBA,EAAU,MAAM,QAAU,OAC5B,CAED,EAAA,CAACN,EAAcV,EAAc,MAAM,CAAC,EAEvC,MAAMiB,EAAgB,CAAC,EAAC1B,GAAA,MAAAA,EAAM,SAAS,SAEjC2B,EAAgB9B,GAAoB,CACxC,IAAI+B,EAAmCzB,EACnCN,EACAA,EAAM,OAAQe,GAAMb,EAAQ,KAAM8B,GAAMA,EAAE,QAAUjB,CAAC,CAAC,EACtDZ,GAAA,MAAAA,EAAM,SAAS,UAIjB4B,EAAgB,MAAM,QAAQA,CAAa,EAAIA,EAAc,CAAC,EAAIA,GAGlEvB,EAASuB,EAAe,OAAO,CAEnC,EAEA,OAAI9B,EAEAgC,EAAA,kBAAA,IAACtC,EAAA,CACC,QAAAO,EACA,MAAOY,EACP,IAAKM,EACL,cAAe,CAACc,EAAQC,EAAUC,IAChC,OAAAH,OAAAA,EAAA,kBAAA,IAACI,EAAA,cAAA,CACC,gBAAArB,EACA,kBAAmBmB,EAAS,OAAS,EACrC,OAAAC,EACA,WAAA/B,EACA,cAAAwB,EACC,GAAGlB,GAAA,YAAAA,EAAI,SACR,YAAaC,EAAc,YAC3B,UAAW0B,EAAK,uBAAuBZ,EAAAf,GAAA,YAAAA,EAAI,WAAJ,YAAAe,EAAc,SAAS,CAAA,CAChE,GAEF,aAAc,CAACT,EAAQsB,EAAWC,IAChC,OAAAP,OAAAA,EAAA,kBAAA,IAACI,EAAA,cAAA,CACC,gBAAiB,CAACpB,CAAM,EACxB,kBAAmB,GACnB,OAAQ,GACR,OAAM,GACN,cAAAY,EACA,WAAAW,EACC,GAAG7B,GAAA,YAAAA,EAAI,SACR,UAAW2B,EAAK,sBAAsBZ,EAAAf,GAAA,YAAAA,EAAI,WAAJ,YAAAe,EAAc,SAAS,CAAA,CAC/D,GAEF,YAAW,GACX,YAAaG,EACb,YAAaxB,EACb,SAAUA,EACV,eAAc,GACb,GAAGO,EACJ,SAAUkB,EACV,QAASrB,EACT,SAAUH,CAAA,CACZ,EAKF2B,EAAA,kBAAA,IAACI,EAAA,cAAA,CACC,gBAAArB,EACA,kBAAAG,EACA,cAAAU,EACA,WAAAxB,EACC,GAAGM,GAAA,YAAAA,EAAI,SACR,YAAaC,EAAc,YAC3B,UAAW0B,EAAK,cAAcZ,EAAAf,GAAA,YAAAA,EAAI,WAAJ,YAAAe,EAAc,UAAWd,EAAc,SAAS,CAAA,CAChF,CAAA,CAGN"}
+{"version":3,"file":"EnumWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport type { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\nimport { EnumCellValue, EnumTemplateProps } from './EnumCellValue'\n\nconst StyledDropdown = styled(Dropdown)`\n  height: 100%;\n  width: 100%;\n`\n\nexport interface EnumWidgetProps\n  extends Omit<DropdownProps, 'onChange' | 'value'>,\n    WidgetBaseProps {\n  value: (string | number | boolean)[]\n  options: AttributeEnumItem[]\n  type?: AttributeData['type']\n  autoOpen?: boolean\n  isReadOnly?: boolean\n  enableCustomValues?: boolean\n  pt?: {\n    template?: Partial<EnumTemplateProps>\n  }\n  onOpen?: () => void\n  onNext?: () => void\n}\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n  (\n    {\n      value,\n      isEditing,\n      options,\n      type,\n      autoOpen = true,\n      isReadOnly,\n      enableCustomValues,\n      onOpen,\n      onChange,\n      onCancelEdit,\n      onNext,\n      pt,\n      ...dropdownProps\n    },\n    _ref,\n  ) => {\n    // convert value to string array\n    const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n    let selectedOptions = options.filter((option) =>\n      valueAsStrings.includes(option.value.toString()),\n    )\n\n    // Check if all values are present in options, if not, add a warning\n    const invalidOptions: AttributeEnumItem[] = []\n    valueAsStrings.forEach((val) => {\n      if (!options.find((option) => option.value === val)) {\n        const invalidOption = {\n          label: val,\n          value: val,\n          color: enableCustomValues\n            ? 'var(--md-sys-color-surface-container)'\n            : 'var(--md-sys-color-error)',\n          icon: enableCustomValues ? undefined : 'warning',\n        }\n        selectedOptions = [...selectedOptions, invalidOption]\n        invalidOptions.push(invalidOption)\n      }\n    })\n    const hasMultipleValues = selectedOptions.length > 1\n\n    // Merge valid options with invalid options for the dropdown\n    const allOptions = [...options, ...invalidOptions]\n\n    const dropdownRef = useRef<DropdownRef>(null)\n\n    const [dropdownOpen, setDropdownOpen] = useState(false)\n    useEffect(() => {\n      if (isEditing && dropdownRef.current && autoOpen) {\n        !dropdownRef.current.isOpen && dropdownRef.current?.open()\n        setDropdownOpen(true)\n      } else {\n        setDropdownOpen(false)\n      }\n    }, [isEditing, dropdownRef.current, autoOpen])\n\n    // when the dropdown is open, focus the first item\n    useEffect(() => {\n      if (dropdownOpen && !dropdownProps.search && allOptions.length < 20) {\n        const optionsUlEl = dropdownRef.current?.getOptions() as HTMLUListElement\n        const firstItem = optionsUlEl?.querySelector('li')\n        if (firstItem) {\n          firstItem.focus()\n          // set style of li to have no outline (no focus ring)\n          firstItem.style.outline = 'none'\n        }\n      }\n    }, [dropdownOpen, dropdownProps.search, allOptions.length])\n\n    const isMultiSelect = !!type?.includes('list')\n\n    const handleChange = (value: string[]) => {\n      let filteredValue: string | string[] = enableCustomValues\n        ? value\n        : value.filter((v) => options.find((o) => o.value === v))\n      if (type?.includes('list')) {\n        onChange(filteredValue, 'Click')\n      } else {\n        // check if the value is an array or a string and for arrays take the first value only\n        filteredValue = Array.isArray(filteredValue) ? filteredValue[0] : filteredValue\n\n        // take first value as the type is not list]\n        onChange(filteredValue, 'Click')\n      }\n    }\n\n    if (isEditing) {\n      return (\n        <StyledDropdown\n          options={allOptions}\n          value={valueAsStrings}\n          ref={dropdownRef}\n          valueTemplate={(_value, selected, isOpen) => (\n            <EnumCellValue\n              selectedOptions={selectedOptions}\n              hasMultipleValues={selected.length > 1}\n              isOpen={isOpen}\n              isReadOnly={isReadOnly}\n              isMultiSelect={isMultiSelect}\n              {...pt?.template}\n              placeholder={dropdownProps.placeholder}\n              className={clsx('enum-dropdown-value', pt?.template?.className)}\n            />\n          )}\n          itemTemplate={(option, _isActive, isSelected) => (\n            <EnumCellValue\n              selectedOptions={[option]}\n              hasMultipleValues={false}\n              isOpen={false}\n              isItem\n              isMultiSelect={isMultiSelect}\n              isSelected={isSelected}\n              {...pt?.template}\n              className={clsx('enum-dropdown-item', pt?.template?.className)}\n            />\n          )}\n          widthExpand\n          multiSelect={isMultiSelect}\n          disableOpen={isReadOnly}\n          disabled={isReadOnly}\n          sortBySelected\n          searchOnNumber={10}\n          {...dropdownProps}\n          onChange={handleChange}\n          onClose={onCancelEdit}\n          editable={enableCustomValues}\n        />\n      )\n    }\n\n    return (\n      <EnumCellValue\n        selectedOptions={selectedOptions}\n        hasMultipleValues={hasMultipleValues}\n        isMultiSelect={isMultiSelect}\n        isReadOnly={isReadOnly}\n        {...pt?.template}\n        placeholder={dropdownProps.placeholder}\n        className={clsx('enum-value', pt?.template?.className, dropdownProps.className)}\n      />\n    )\n  },\n)\n"],"names":["StyledDropdown","styled","Dropdown","EnumWidget","forwardRef","value","isEditing","options","type","autoOpen","isReadOnly","enableCustomValues","onOpen","onChange","onCancelEdit","onNext","pt","dropdownProps","_ref","valueAsStrings","v","selectedOptions","option","invalidOptions","val","invalidOption","hasMultipleValues","allOptions","dropdownRef","useRef","dropdownOpen","setDropdownOpen","useState","useEffect","_a","optionsUlEl","firstItem","isMultiSelect","handleChange","filteredValue","o","jsx","_value","selected","isOpen","EnumCellValue","clsx","_isActive","isSelected"],"mappings":"gSAQMA,EAAiBC,EAAOC,UAAQ;AAAA;AAAA;AAAA,EAqBzBC,EAAaC,EAAA,WACxB,CACE,CACE,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,mBAAAC,EACA,OAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,GAAAC,EACA,GAAGC,GAELC,IACG,OAEH,MAAMC,EAAiBd,EAAM,IAAKe,GAAMA,GAAA,YAAAA,EAAG,UAAU,EAAE,OAAQA,GAAM,CAAC,CAACA,CAAC,EACxE,IAAIC,EAAkBd,EAAQ,OAAQe,GACpCH,EAAe,SAASG,EAAO,MAAM,SAAU,CAAA,CACjD,EAGA,MAAMC,EAAsC,CAAC,EAC9BJ,EAAA,QAASK,GAAQ,CAC1B,GAAA,CAACjB,EAAQ,KAAMe,GAAWA,EAAO,QAAUE,CAAG,EAAG,CACnD,MAAMC,EAAgB,CACpB,MAAOD,EACP,MAAOA,EACP,MAAOb,EACH,wCACA,4BACJ,KAAMA,EAAqB,OAAY,SACzC,EACkBU,EAAA,CAAC,GAAGA,EAAiBI,CAAa,EACpDF,EAAe,KAAKE,CAAa,CAAA,CACnC,CACD,EACK,MAAAC,EAAoBL,EAAgB,OAAS,EAG7CM,EAAa,CAAC,GAAGpB,EAAS,GAAGgB,CAAc,EAE3CK,EAAcC,SAAoB,IAAI,EAEtC,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EACtDC,EAAAA,UAAU,IAAM,OACV3B,GAAasB,EAAY,SAAWnB,GACtC,CAACmB,EAAY,QAAQ,UAAUM,EAAAN,EAAY,UAAZ,MAAAM,EAAqB,QACpDH,EAAgB,EAAI,GAEpBA,EAAgB,EAAK,GAEtB,CAACzB,EAAWsB,EAAY,QAASnB,CAAQ,CAAC,EAG7CwB,EAAAA,UAAU,IAAM,OACd,GAAIH,GAAgB,CAACb,EAAc,QAAUU,EAAW,OAAS,GAAI,CAC7D,MAAAQ,GAAcD,EAAAN,EAAY,UAAZ,YAAAM,EAAqB,aACnCE,EAAYD,GAAA,YAAAA,EAAa,cAAc,MACzCC,IACFA,EAAU,MAAM,EAEhBA,EAAU,MAAM,QAAU,OAC5B,CACF,EACC,CAACN,EAAcb,EAAc,OAAQU,EAAW,MAAM,CAAC,EAE1D,MAAMU,EAAgB,CAAC,EAAC7B,GAAA,MAAAA,EAAM,SAAS,SAEjC8B,EAAgBjC,GAAoB,CACxC,IAAIkC,EAAmC5B,EACnCN,EACAA,EAAM,OAAQe,GAAMb,EAAQ,KAAMiC,GAAMA,EAAE,QAAUpB,CAAC,CAAC,EACtDZ,GAAA,MAAAA,EAAM,SAAS,UAIjB+B,EAAgB,MAAM,QAAQA,CAAa,EAAIA,EAAc,CAAC,EAAIA,GAGlE1B,EAAS0B,EAAe,OAAO,CAEnC,EAEA,OAAIjC,EAEAmC,EAAA,kBAAA,IAACzC,EAAA,CACC,QAAS2B,EACT,MAAOR,EACP,IAAKS,EACL,cAAe,CAACc,EAAQC,EAAUC,IAChC,OAAAH,OAAAA,EAAA,kBAAA,IAACI,EAAA,cAAA,CACC,gBAAAxB,EACA,kBAAmBsB,EAAS,OAAS,EACrC,OAAAC,EACA,WAAAlC,EACA,cAAA2B,EACC,GAAGrB,GAAA,YAAAA,EAAI,SACR,YAAaC,EAAc,YAC3B,UAAW6B,EAAK,uBAAuBZ,EAAAlB,GAAA,YAAAA,EAAI,WAAJ,YAAAkB,EAAc,SAAS,CAAA,CAChE,GAEF,aAAc,CAACZ,EAAQyB,EAAWC,IAChC,OAAAP,OAAAA,EAAA,kBAAA,IAACI,EAAA,cAAA,CACC,gBAAiB,CAACvB,CAAM,EACxB,kBAAmB,GACnB,OAAQ,GACR,OAAM,GACN,cAAAe,EACA,WAAAW,EACC,GAAGhC,GAAA,YAAAA,EAAI,SACR,UAAW8B,EAAK,sBAAsBZ,EAAAlB,GAAA,YAAAA,EAAI,WAAJ,YAAAkB,EAAc,SAAS,CAAA,CAC/D,GAEF,YAAW,GACX,YAAaG,EACb,YAAa3B,EACb,SAAUA,EACV,eAAc,GACd,eAAgB,GACf,GAAGO,EACJ,SAAUqB,EACV,QAASxB,EACT,SAAUH,CAAA,CACZ,EAKF8B,EAAA,kBAAA,IAACI,EAAA,cAAA,CACC,gBAAAxB,EACA,kBAAAK,EACA,cAAAW,EACA,WAAA3B,EACC,GAAGM,GAAA,YAAAA,EAAI,SACR,YAAaC,EAAc,YAC3B,UAAW6B,EAAK,cAAcZ,EAAAlB,GAAA,YAAAA,EAAI,WAAJ,YAAAkB,EAAc,UAAWjB,EAAc,SAAS,CAAA,CAChF,CAAA,CAGN"}

package/dist/shared/src/containers/ProjectTreeTable/widgets/EnumWidget.es.js

@@ -1,85 +1,86 @@
 import { j as d } from "../../../../../_virtual/jsx-runtime.es.js";
-import { Dropdown as k } from "@ynput/ayon-react-components";
-import S from "clsx";
-import { forwardRef as C, useRef as I, useState as T, useEffect as A } from "react";
-import V from "styled-components";
-import { EnumCellValue as g } from "./EnumCellValue.es.js";
-const b = V(k)`
+import { Dropdown as C } from "@ynput/ayon-react-components";
+import v from "clsx";
+import { forwardRef as I, useRef as T, useState as V, useEffect as D } from "react";
+import q from "styled-components";
+import { EnumCellValue as N } from "./EnumCellValue.es.js";
+const B = q(C)`
   height: 100%;
   width: 100%;
-`, K = C(
+`, Q = I(
   ({
-    value: M,
+    value: E,
     isEditing: h,
     options: o,
-    type: c,
-    autoOpen: N = !0,
+    type: n,
+    autoOpen: O = !0,
     isReadOnly: u,
     enableCustomValues: m,
-    onOpen: q,
-    onChange: v,
-    onCancelEdit: D,
-    onNext: B,
+    onOpen: R,
+    onChange: S,
+    onCancelEdit: _,
+    onNext: W,
     pt: l,
     ...t
-  }, R) => {
-    var O;
-    const x = M.map((e) => e == null ? void 0 : e.toString()).filter((e) => !!e);
-    let n = o.filter(
-      (e) => x.includes(e.value.toString())
+  }, z) => {
+    var M;
+    const g = E.map((e) => e == null ? void 0 : e.toString()).filter((e) => !!e);
+    let c = o.filter(
+      (e) => g.includes(e.value.toString())
     );
-    x.forEach((e) => {
-      o.find((r) => r.value === e) || (n = [
-        ...n,
-        {
+    const j = [];
+    g.forEach((e) => {
+      if (!o.find((r) => r.value === e)) {
+        const r = {
           label: e,
           value: e,
           color: m ? "var(--md-sys-color-surface-container)" : "var(--md-sys-color-error)",
           icon: m ? void 0 : "warning"
-        }
-      ]);
+        };
+        c = [...c, r], j.push(r);
+      }
     });
-    const E = n.length > 1, i = I(null), [j, w] = T(!1);
-    A(() => {
+    const b = c.length > 1, x = [...o, ...j], i = T(null), [w, A] = V(!1);
+    D(() => {
       var e;
-      h && i.current && N ? (!i.current.isOpen && ((e = i.current) == null || e.open()), w(!0)) : w(!1);
-    }, [h, i.current, N]), A(() => {
+      h && i.current && O ? (!i.current.isOpen && ((e = i.current) == null || e.open()), A(!0)) : A(!1);
+    }, [h, i.current, O]), D(() => {
       var e;
-      if (j && !t.search) {
+      if (w && !t.search && x.length < 20) {
         const r = (e = i.current) == null ? void 0 : e.getOptions(), s = r == null ? void 0 : r.querySelector("li");
         s && (s.focus(), s.style.outline = "none");
       }
-    }, [j, t.search]);
-    const f = !!(c != null && c.includes("list")), _ = (e) => {
+    }, [w, t.search, x.length]);
+    const f = !!(n != null && n.includes("list")), k = (e) => {
       let r = m ? e : e.filter((s) => o.find((a) => a.value === s));
-      c != null && c.includes("list") || (r = Array.isArray(r) ? r[0] : r), v(r, "Click");
+      n != null && n.includes("list") || (r = Array.isArray(r) ? r[0] : r), S(r, "Click");
     };
     return h ? /* @__PURE__ */ d.jsx(
-      b,
+      B,
       {
-        options: o,
-        value: x,
+        options: x,
+        value: g,
         ref: i,
         valueTemplate: (e, r, s) => {
           var a;
           return /* @__PURE__ */ d.jsx(
-            g,
+            N,
             {
-              selectedOptions: n,
+              selectedOptions: c,
               hasMultipleValues: r.length > 1,
               isOpen: s,
               isReadOnly: u,
               isMultiSelect: f,
               ...l == null ? void 0 : l.template,
               placeholder: t.placeholder,
-              className: S("enum-dropdown-value", (a = l == null ? void 0 : l.template) == null ? void 0 : a.className)
+              className: v("enum-dropdown-value", (a = l == null ? void 0 : l.template) == null ? void 0 : a.className)
             }
           );
         },
         itemTemplate: (e, r, s) => {
           var a;
           return /* @__PURE__ */ d.jsx(
-            g,
+            N,
             {
               selectedOptions: [e],
               hasMultipleValues: !1,
@@ -88,7 +89,7 @@ const b = V(k)`
               isMultiSelect: f,
               isSelected: s,
               ...l == null ? void 0 : l.template,
-              className: S("enum-dropdown-item", (a = l == null ? void 0 : l.template) == null ? void 0 : a.className)
+              className: v("enum-dropdown-item", (a = l == null ? void 0 : l.template) == null ? void 0 : a.className)
             }
           );
         },
@@ -97,26 +98,27 @@ const b = V(k)`
         disableOpen: u,
         disabled: u,
         sortBySelected: !0,
+        searchOnNumber: 10,
         ...t,
-        onChange: _,
-        onClose: D,
+        onChange: k,
+        onClose: _,
         editable: m
       }
     ) : /* @__PURE__ */ d.jsx(
-      g,
+      N,
       {
-        selectedOptions: n,
-        hasMultipleValues: E,
+        selectedOptions: c,
+        hasMultipleValues: b,
         isMultiSelect: f,
         isReadOnly: u,
         ...l == null ? void 0 : l.template,
         placeholder: t.placeholder,
-        className: S("enum-value", (O = l == null ? void 0 : l.template) == null ? void 0 : O.className, t.className)
+        className: v("enum-value", (M = l == null ? void 0 : l.template) == null ? void 0 : M.className, t.className)
       }
     );
   }
 );
 export {
-  K as EnumWidget
+  Q as EnumWidget
 };
 //# sourceMappingURL=EnumWidget.es.js.map