npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.31 → 0.2.32 - Mend

@ynput/ayon-frontend-shared 0.2.31 → 0.2.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

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

@@ -1,16 +1,17 @@
 import { j as n } from "../../../../../_virtual/jsx-runtime.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 { useRef as J, useCallback as K, useMemo as P } from "react";
+import Q from "styled-components";
+import { BooleanWidget as U } from "./BooleanWidget.es.js";
+import { CollapsedWidget as X } from "./CollapsedWidget.es.js";
+import { DateWidget as Y } from "./DateWidget.es.js";
+import { EnumWidget as Z } from "./EnumWidget.es.js";
+import { TextWidget as $ } from "./TextWidget.es.js";
+import { isLinkEditable as D, LinksWidget as O } from "./LinksWidget.es.js";
+import { useCellEditing as V } from "../context/CellEditingContext.es.js";
+import { useColumnSettingsContext as tt } from "../context/ColumnSettingsContext.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 ot from "clsx";
+import { useSelectionCellsContext as it } from "../context/SelectionCellsContext.es.js";
 import "react-toastify";
 import "lodash";
 import "uuid";
@@ -25,10 +26,9 @@ import "../components/SelectionCell.es.js";
 import "../components/RowSelectionHeader.es.js";
 import "./LoadMoreWidget.es.js";
 import "../context/ProjectTableQueriesContext.es.js";
-import { useProjectTableContext as ot } from "../context/ProjectTableContext.es.js";
+import { useProjectTableContext as rt } from "../context/ProjectTableContext.es.js";
 import "../context/ClipboardContext.es.js";
 import "../ProjectTreeTable.es.js";
-import "../context/ColumnSettingsContext.es.js";
 import "../context/SelectedRowsContext.es.js";
 import "../context/DetailsPanelEntityContext.es.js";
 /* empty css                                    */
@@ -130,9 +130,9 @@ import "../../../context/MenuContext.es.js";
 import "react-redux";
 import "custom-protocol-check";
 import "../components/GroupSettingsFallback.es.js";
-import { EnumCellValue as it } from "./EnumCellValue.es.js";
-import { NameWidget as rt } from "./NameWidget.es.js";
-const mt = P.div`
+import { EnumCellValue as mt } from "./EnumCellValue.es.js";
+import { NameWidget as et } from "./NameWidget.es.js";
+const pt = Q.div`
   position: absolute;
   inset: 0;
   padding: 4px 8px;
@@ -153,12 +153,12 @@ const mt = P.div`
     border-radius: 4px;
     opacity: 1;
   }
-`, Li = "edit-trigger", Ri = ({
+`, Fi = "edit-trigger", Gi = ({
   rowId: j,
-  columnId: x,
+  columnId: g,
   value: i,
   valueData: T,
-  attributeData: g,
+  attributeData: x,
   options: d = [],
   isCollapsed: b,
   isInherited: f,
@@ -171,26 +171,26 @@ const mt = P.div`
   pt: m,
   ...y
 }) => {
-  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(() => {
+  const w = J(null), r = x == null ? void 0 : x.type, { projectName: S } = rt(), { isEditing: M, setEditingCellId: s } = V(), { isCellFocused: k, gridMap: W, selectCell: L, focusCell: R } = it(), { rowHeight: F } = tt(), p = h(j, g), u = M(p), G = k(p), _ = K(() => {
     C || l || s(p);
-  }, [p, s, C]), _ = () => {
+  }, [p, s, C]), B = () => {
     u || s(null);
-  }, B = () => {
-    const o = w.rowIdToIndex.get(j);
+  }, H = () => {
+    const o = W.rowIdToIndex.get(j);
     if (o === void 0) return;
-    const e = w.indexToRowId.get(o + 1);
+    const e = W.indexToRowId.get(o + 1);
     if (e) {
-      const t = h(e, x);
+      const t = h(e, g);
       L(t, !1, !1), R(t), s(t);
     }
   }, q = (o, e) => {
-    s(null), !l && (e === "Enter" && B(), (o !== i || e === "Enter") && (E == null || E(o, e)));
+    s(null), !l && (e === "Enter" && H(), (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();
-  }, z = K(() => {
+  }, z = P(() => {
     const o = {
       onChange: q,
       onCancelEdit: v,
@@ -202,11 +202,11 @@ const mt = P.div`
         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(U, { color: c });
+        return /* @__PURE__ */ n.jsx(X, { color: c });
       }
       case r === "name":
         return /* @__PURE__ */ n.jsx(
-          rt,
+          et,
           {
             value: i,
             valueData: T,
@@ -216,17 +216,17 @@ const mt = P.div`
           }
         );
       case r === "links": {
-        const t = T, c = $(
+        const t = T, c = D(
           (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(
-          D,
+          O,
           {
             value: t,
             cellId: p,
-            projectName: M,
+            projectName: S,
             disabled: !c,
             folderId: A,
             ...o
@@ -238,17 +238,18 @@ const mt = P.div`
         if (l) {
           const c = d.filter((a) => t.includes(a.value));
           return /* @__PURE__ */ n.jsx(
-            it,
+            mt,
             {
               selectedOptions: c,
               isReadOnly: !0,
               hasMultipleValues: t.length > 1,
-              isMultiSelect: r == null ? void 0 : r.includes("list")
+              isMultiSelect: r == null ? void 0 : r.includes("list"),
+              rowHeight: F
             }
           );
         }
         return /* @__PURE__ */ n.jsx(
-          Y,
+          Z,
           {
             value: t,
             options: d,
@@ -262,18 +263,18 @@ const mt = P.div`
       }
       case e.includes(r):
         return /* @__PURE__ */ n.jsx(
-          Z,
+          $,
           {
             value: i,
             isInherited: f,
-            columnId: x,
+            columnId: g,
             ...o,
             ...m == null ? void 0 : m.text
           }
         );
       case r === "datetime":
         return /* @__PURE__ */ n.jsx(
-          X,
+          Y,
           {
             value: i || void 0,
             isInherited: f,
@@ -282,7 +283,7 @@ const mt = P.div`
           }
         );
       case r === "boolean":
-        return /* @__PURE__ */ n.jsx(Q, { value: i, ...o, ...m == null ? void 0 : m.boolean });
+        return /* @__PURE__ */ n.jsx(U, { value: i, ...o, ...m == null ? void 0 : m.boolean });
       case C:
         return null;
       default:
@@ -290,26 +291,26 @@ const mt = P.div`
     }
   }, [p, i, r, u, d, b]);
   return /* @__PURE__ */ n.jsx(
-    mt,
+    pt,
     {
       ...y,
-      className: V(y.className, {
+      className: ot(y.className, {
         inherited: f && !u,
         readonly: l,
         editable: !l
       }),
-      ref: W,
-      onDoubleClick: G,
-      onClick: _,
+      ref: w,
+      onDoubleClick: _,
+      onClick: B,
       id: p,
-      "data-tooltip": f && !u && F ? "Inherited" : void 0,
+      "data-tooltip": f && !u && G ? "Inherited" : void 0,
       "data-tooltip-delay": 200,
       children: z
     }
   );
 };
 export {
-  Ri as CellWidget,
-  Li as EDIT_TRIGGER_CLASS
+  Gi as CellWidget,
+  Fi as EDIT_TRIGGER_CLASS
 };
 //# sourceMappingURL=CellWidget.es.js.map

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

	@@ -1 +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'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAMA,KAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBPC,KAAqB,gBAsCrBC,KAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAMC,EAAuB,IAAI,GACjCC,IAAOd,KAAA,gBAAAA,EAAe,MAEtB,EAAE,aAAAe,EAAY,IAAIC,GAAuB,GACzC,EAAE,WAAAC,GAAW,kBAAAC,EAAiB,IAAIC,EAAe,GACjD,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,WAAAC,EAAA,IAAcC,GAAyB,GAC7EC,IAASC,EAAU9B,GAAOC,CAAQ,GAElC8B,IAAuBV,EAAUQ,CAAM,GACvCG,IAAuBR,EAAcK,CAAM,GAE3CI,IAAoBC,EAAY,MAAM;AAC1C,IAAI1B,KAAiBC,KACrBa,EAAiBO,CAAM;AAAA,EACtB,GAAA,CAACA,GAAQP,GAAkBd,CAAa,CAAC,GAEtC2B,IAAoB,MAAM;AAG9B,IAAKJ,KACHT,EAAiB,IAAI;AAAA,EAEzB,GAEMc,IAAgB,MAAM;AAC1B,UAAMC,IAAWZ,EAAQ,aAAa,IAAIzB,CAAK;AAC/C,QAAIqC,MAAa,OAAW;AAC5B,UAAMC,IAAWb,EAAQ,aAAa,IAAIY,IAAW,CAAC;AACtD,QAAIC,GAAU;AACN,YAAAC,IAAYT,EAAUQ,GAAUrC,CAAQ;AACnC,MAAAyB,EAAAa,GAAW,IAAO,EAAK,GAClCZ,EAAUY,CAAS,GACnBjB,EAAiBiB,CAAS;AAAA,IAAA;AAAA,EAE9B,GAEMC,IAA8C,CAACC,GAAUC,MAAQ;AAErE,IADApB,EAAiB,IAAI,GACjB,CAAAb,MAEJiC,MAAQ,WAAWN,EAAc,IAE7BK,MAAavC,KAASwC,MAAQ,aAChC9B,KAAA,QAAAA,EAAW6B,GAAUC;AAAA,EAEzB,GAEMC,IAAe,MAAM;;AACzB,IAAArB,EAAiB,IAAI;AAErB,UAAMsB,KAAKC,IAAA7B,EAAI,YAAJ,gBAAA6B,EAAa,QAAQ;AAC5B,IAAAD,OAAO,MAAM;AAAA,EACnB,GAEME,IAASC,EAAQ,MAAM;AAE3B,UAAMC,IAA+B;AAAA,MACnC,UAAUR;AAAA,MACV,cAAcG;AAAA,MACd,WAAWZ;AAAA,IACb,GAEMkB,IAA8B,CAAC,UAAU,WAAW,OAAO;AAGjE,YAAQ,IAAM;AAAA;AAAA,MAEZ,KAAK3C,GAAa;AAEhB,cAAM4C,IAAsBhC,KAAA,QAAAA,EAAM,SAAS,UACvCb,EAAQ;AAAA,UAAK,CAAC8C,MACZ,MAAM,QAAQjD,CAAK,IAAIA,EAAM,SAASiD,EAAO,KAAK,IAAIjD,MAAUiD,EAAO;AAAA,QAAA,IAEzE,QACEC,IAAQF,KAAA,gBAAAA,EAAqB;AAC5B,eAAAG,gBAAAA,MAACC,KAAgB,OAAAF,GAAc;AAAA,MAAA;AAAA,MAExC,KAAKlC,MAAS;AAEV,eAAAmC,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAArD;AAAA,YACA,WAAAC;AAAA,YACA,QAAA0B;AAAA,YACA,YAAYhB,KAAc;AAAA,YACzB,GAAGmC;AAAA,UAAA;AAAA,QACN;AAAA,MAIJ,KAAK9B,MAAS,SAAS;AACrB,cAAMsC,IAAarD,GAEbsD,IAAaC;AAAA,WACjBF,KAAA,gBAAAA,EAAY,cAAa;AAAA,WACzBA,KAAA,gBAAAA,EAAY,KAAK,aAAY;AAAA,WAC7BA,KAAA,gBAAAA,EAAY,eAAc;AAAA,QAC5B;AAGA,eAAA/C,IAAa,CAACgD,GAEZJ,gBAAAA,EAAA;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,OAAOH;AAAA,YACP,QAAA3B;AAAA,YACA,aAAAV;AAAA,YACA,UAAU,CAACsC;AAAA,YACX,UAAA9C;AAAA,YACC,GAAGqC;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,MAIJ,KAAK,CAAC,CAAC3C,EAAQ,QAAQ;AACrB,cAAMuD,IAAY,MAAM,QAAQ1D,CAAK,IAAIA,IAAQ,CAACA,CAAK;AACvD,YAAIO,GAAY;AACR,gBAAAoD,IAAkBxD,EAAQ,OAAO,CAAC8C,MAAWS,EAAU,SAAST,EAAO,KAAK,CAAC;AAEjF,iBAAAE,gBAAAA,EAAA;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,iBAAAD;AAAA,cACA,YAAU;AAAA,cACV,mBAAmBD,EAAU,SAAS;AAAA,cACtC,eAAe1C,KAAA,gBAAAA,EAAM,SAAS;AAAA,YAAM;AAAA,UACtC;AAAA,QAAA;AAIF,eAAAmC,gBAAAA,EAAA;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,OAAOH;AAAA,YACP,SAAAvD;AAAA,YACA,MAAAa;AAAA,YACA,QAAQ,MAAMI,EAAiBO,CAAM;AAAA,YACrC,oBAAAnB;AAAA,YACC,GAAGsC;AAAA,YACH,GAAGlC,KAAA,gBAAAA,EAAI;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,MAIJ,KAAKmC,EAAU,SAAS/B,CAAsB;AAE1C,eAAAmC,gBAAAA,EAAA;AAAA,UAACW;AAAA,UAAA;AAAA,YACC,OAAA9D;AAAA,YACA,aAAAK;AAAA,YACA,UAAAN;AAAA,YACC,GAAG+C;AAAA,YACH,GAAGlC,KAAA,gBAAAA,EAAI;AAAA,UAAA;AAAA,QACV;AAAA,MAGJ,KAAKI,MAAS;AAEV,eAAAmC,gBAAAA,EAAA;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,OAAO/D,KAA4B;AAAA,YACnC,aAAAK;AAAA,YACC,GAAGyC;AAAA,YACH,GAAGlC,KAAA,gBAAAA,EAAI;AAAA,UAAA;AAAA,QACV;AAAA,MAGJ,KAAKI,MAAS;AACZ,qCAAQgD,GAAc,EAAA,OAAAhE,GAA0B,GAAG8C,GAAc,GAAGlC,KAAA,gBAAAA,EAAI,SAAS;AAAA,MAEnF,KAAKN;AACI,eAAA;AAAA,MAET;AASS,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAACqB,GAAQ3B,GAAOgB,GAAMa,GAAsB1B,GAASC,CAAW,CAAC;AAGlE,SAAA+C,gBAAAA,EAAA;AAAA,IAACzD;AAAA,IAAA;AAAA,MACE,GAAGmB;AAAA,MACJ,WAAWoD,EAAKpD,EAAM,WAAW;AAAA,QAC/B,WAAWR,KAAe,CAACwB;AAAA,QAC3B,UAAUtB;AAAA,QACV,UAAU,CAACA;AAAA,MAAA,CACZ;AAAA,MACD,KAAAO;AAAA,MACA,eAAeiB;AAAA,MACf,SAASE;AAAA,MACT,IAAIN;AAAA,MACJ,gBACEtB,KAAe,CAACwB,KAAwBC,IAAuB,cAAc;AAAA,MAE/E,sBAAoB;AAAA,MAEnB,UAAAc;AAAA,IAAA;AAAA,EACH;AAEJ;"}
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'\nimport { useColumnSettingsContext } from '../context/ColumnSettingsContext'\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 { rowHeight } = useColumnSettingsContext()\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 rowHeight={rowHeight}\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","rowHeight","useColumnSettingsContext","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAMA,KAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBPC,KAAqB,gBAsCrBC,KAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAMC,EAAuB,IAAI,GACjCC,IAAOd,KAAA,gBAAAA,EAAe,MAEtB,EAAE,aAAAe,EAAY,IAAIC,GAAuB,GACzC,EAAE,WAAAC,GAAW,kBAAAC,EAAiB,IAAIC,EAAe,GACjD,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,WAAAC,EAAA,IAAcC,GAAyB,GAC7E,EAAE,WAAAC,EAAU,IAAIC,GAAyB,GACzCC,IAASC,EAAUhC,GAAOC,CAAQ,GAElCgC,IAAuBZ,EAAUU,CAAM,GACvCG,IAAuBV,EAAcO,CAAM,GAE3CI,IAAoBC,EAAY,MAAM;AAC1C,IAAI5B,KAAiBC,KACrBa,EAAiBS,CAAM;AAAA,EACtB,GAAA,CAACA,GAAQT,GAAkBd,CAAa,CAAC,GAEtC6B,IAAoB,MAAM;AAG9B,IAAKJ,KACHX,EAAiB,IAAI;AAAA,EAEzB,GAEMgB,IAAgB,MAAM;AAC1B,UAAMC,IAAWd,EAAQ,aAAa,IAAIzB,CAAK;AAC/C,QAAIuC,MAAa,OAAW;AAC5B,UAAMC,IAAWf,EAAQ,aAAa,IAAIc,IAAW,CAAC;AACtD,QAAIC,GAAU;AACN,YAAAC,IAAYT,EAAUQ,GAAUvC,CAAQ;AACnC,MAAAyB,EAAAe,GAAW,IAAO,EAAK,GAClCd,EAAUc,CAAS,GACnBnB,EAAiBmB,CAAS;AAAA,IAAA;AAAA,EAE9B,GAEMC,IAA8C,CAACC,GAAUC,MAAQ;AAErE,IADAtB,EAAiB,IAAI,GACjB,CAAAb,MAEJmC,MAAQ,WAAWN,EAAc,IAE7BK,MAAazC,KAAS0C,MAAQ,aAChChC,KAAA,QAAAA,EAAW+B,GAAUC;AAAA,EAEzB,GAEMC,IAAe,MAAM;;AACzB,IAAAvB,EAAiB,IAAI;AAErB,UAAMwB,KAAKC,IAAA/B,EAAI,YAAJ,gBAAA+B,EAAa,QAAQ;AAC5B,IAAAD,OAAO,MAAM;AAAA,EACnB,GAEME,IAASC,EAAQ,MAAM;AAE3B,UAAMC,IAA+B;AAAA,MACnC,UAAUR;AAAA,MACV,cAAcG;AAAA,MACd,WAAWZ;AAAA,IACb,GAEMkB,IAA8B,CAAC,UAAU,WAAW,OAAO;AAGjE,YAAQ,IAAM;AAAA;AAAA,MAEZ,KAAK7C,GAAa;AAEhB,cAAM8C,IAAsBlC,KAAA,QAAAA,EAAM,SAAS,UACvCb,EAAQ;AAAA,UAAK,CAACgD,MACZ,MAAM,QAAQnD,CAAK,IAAIA,EAAM,SAASmD,EAAO,KAAK,IAAInD,MAAUmD,EAAO;AAAA,QAAA,IAEzE,QACEC,IAAQF,KAAA,gBAAAA,EAAqB;AAC5B,eAAAG,gBAAAA,MAACC,KAAgB,OAAAF,GAAc;AAAA,MAAA;AAAA,MAExC,KAAKpC,MAAS;AAEV,eAAAqC,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAAvD;AAAA,YACA,WAAAC;AAAA,YACA,QAAA4B;AAAA,YACA,YAAYlB,KAAc;AAAA,YACzB,GAAGqC;AAAA,UAAA;AAAA,QACN;AAAA,MAIJ,KAAKhC,MAAS,SAAS;AACrB,cAAMwC,IAAavD,GAEbwD,IAAaC;AAAA,WACjBF,KAAA,gBAAAA,EAAY,cAAa;AAAA,WACzBA,KAAA,gBAAAA,EAAY,KAAK,aAAY;AAAA,WAC7BA,KAAA,gBAAAA,EAAY,eAAc;AAAA,QAC5B;AAGA,eAAAjD,IAAa,CAACkD,GAEZJ,gBAAAA,EAAA;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,OAAOH;AAAA,YACP,QAAA3B;AAAA,YACA,aAAAZ;AAAA,YACA,UAAU,CAACwC;AAAA,YACX,UAAAhD;AAAA,YACC,GAAGuC;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,MAIJ,KAAK,CAAC,CAAC7C,EAAQ,QAAQ;AACrB,cAAMyD,IAAY,MAAM,QAAQ5D,CAAK,IAAIA,IAAQ,CAACA,CAAK;AACvD,YAAIO,GAAY;AACR,gBAAAsD,IAAkB1D,EAAQ,OAAO,CAACgD,MAAWS,EAAU,SAAST,EAAO,KAAK,CAAC;AAEjF,iBAAAE,gBAAAA,EAAA;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,iBAAAD;AAAA,cACA,YAAU;AAAA,cACV,mBAAmBD,EAAU,SAAS;AAAA,cACtC,eAAe5C,KAAA,gBAAAA,EAAM,SAAS;AAAA,cAC9B,WAAAW;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAIF,eAAA0B,gBAAAA,EAAA;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,OAAOH;AAAA,YACP,SAAAzD;AAAA,YACA,MAAAa;AAAA,YACA,QAAQ,MAAMI,EAAiBS,CAAM;AAAA,YACrC,oBAAArB;AAAA,YACC,GAAGwC;AAAA,YACH,GAAGpC,KAAA,gBAAAA,EAAI;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,MAIJ,KAAKqC,EAAU,SAASjC,CAAsB;AAE1C,eAAAqC,gBAAAA,EAAA;AAAA,UAACW;AAAA,UAAA;AAAA,YACC,OAAAhE;AAAA,YACA,aAAAK;AAAA,YACA,UAAAN;AAAA,YACC,GAAGiD;AAAA,YACH,GAAGpC,KAAA,gBAAAA,EAAI;AAAA,UAAA;AAAA,QACV;AAAA,MAGJ,KAAKI,MAAS;AAEV,eAAAqC,gBAAAA,EAAA;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,OAAOjE,KAA4B;AAAA,YACnC,aAAAK;AAAA,YACC,GAAG2C;AAAA,YACH,GAAGpC,KAAA,gBAAAA,EAAI;AAAA,UAAA;AAAA,QACV;AAAA,MAGJ,KAAKI,MAAS;AACZ,qCAAQkD,GAAc,EAAA,OAAAlE,GAA0B,GAAGgD,GAAc,GAAGpC,KAAA,gBAAAA,EAAI,SAAS;AAAA,MAEnF,KAAKN;AACI,eAAA;AAAA,MAET;AASS,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAACuB,GAAQ7B,GAAOgB,GAAMe,GAAsB5B,GAASC,CAAW,CAAC;AAGlE,SAAAiD,gBAAAA,EAAA;AAAA,IAAC3D;AAAA,IAAA;AAAA,MACE,GAAGmB;AAAA,MACJ,WAAWsD,GAAKtD,EAAM,WAAW;AAAA,QAC/B,WAAWR,KAAe,CAAC0B;AAAA,QAC3B,UAAUxB;AAAA,QACV,UAAU,CAACA;AAAA,MAAA,CACZ;AAAA,MACD,KAAAO;AAAA,MACA,eAAemB;AAAA,MACf,SAASE;AAAA,MACT,IAAIN;AAAA,MACJ,gBACExB,KAAe,CAAC0B,KAAwBC,IAAuB,cAAc;AAAA,MAE/E,sBAAoB;AAAA,MAEnB,UAAAc;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../_virtual/jsx-runtime.cjs.js"),o=require("@ynput/ayon-react-components"),t=require("styled-components"),m=t(o.Button)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../_virtual/jsx-runtime.cjs.js"),i=require("@ynput/ayon-react-components"),t=require("styled-components"),v=require("clsx"),f=t(i.Button)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -8,7 +8,7 @@
     }
   }
   cursor: pointer;
-`,u=t.div`
+`,y=t.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -16,15 +16,15 @@
   height: 100%;
   width: 100%;
   padding-right: 8px;
-`,g=t.div`
+`,j=t.div`
   width: 100%;
   height: 24px;
   overflow: hidden;
   position: relative;
-`,v=t.div`
+`,b=t.div`
   position: absolute;
   inset: 0;
-`,y=t.div`
+`,w=t.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -43,21 +43,50 @@
       color: var(--md-sys-color-primary);
     }
   } */
-`,j=t.div`
+`,E=t.div`
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   overflow: hidden;
+  flex: 1;
+  min-width: 0;
+  &.compact {
+    flex-direction: row;
+    align-items: center;
+  }
   .path {
-    ${o.theme.labelSmall}
+    ${i.theme.bodyMedium}
+    font-size: 14px;
     margin-bottom: -4px;
     color: var(--md-sys-color-outline);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &.compact .path {
+    margin-bottom: 0;
+    text-overflow: unset;
+    flex-shrink: 0 1 auto;
   }
-  span {
+  .label {
+    ${i.theme.bodyMedium}
+    font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .divider {
+    ${i.theme.bodyMedium}
+    font-size: 14px;
+    color: var(--md-sys-color-outline);
+    flex-shrink: 0;
   }
-`,b=({id:r,label:l,name:a,path:i,showHierarchy:d,icon:n,type:p,isExpanded:x,toggleExpandAll:c,toggleExpanded:h})=>e.jsxRuntimeExports.jsxs(u,{children:[d?p==="folder"?e.jsxRuntimeExports.jsx(m,{onClick:s=>{s.stopPropagation(),s.altKey?c(r):h()},className:"expander",icon:x?"expand_more":"chevron_right"}):e.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}):null,e.jsxRuntimeExports.jsx(g,{style:{height:i?32:24},children:e.jsxRuntimeExports.jsx(v,{children:e.jsxRuntimeExports.jsxs(y,{children:[n&&e.jsxRuntimeExports.jsx(o.Icon,{icon:n}),e.jsxRuntimeExports.jsxs(j,{children:[i&&e.jsxRuntimeExports.jsx("span",{className:"path",children:i}),e.jsxRuntimeExports.jsx("span",{className:"label",children:l||a})]})]})})})]});exports.EntityNameWidget=b;
+`,R=({id:a,label:d,name:c,path:o,showHierarchy:n,icon:r,type:x,isExpanded:p,toggleExpandAll:m,toggleExpanded:h,rowHeight:u=40})=>{const s=u<50,g=s||n?24:o?32:24;return e.jsxRuntimeExports.jsxs(y,{children:[n?x==="folder"?e.jsxRuntimeExports.jsx(f,{onClick:l=>{l.stopPropagation(),l.altKey?m(a):h()},className:"expander",icon:p?"expand_more":"chevron_right"}):e.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}):null,e.jsxRuntimeExports.jsx(j,{style:{height:g},children:e.jsxRuntimeExports.jsx(b,{children:e.jsxRuntimeExports.jsxs(w,{children:[r&&e.jsxRuntimeExports.jsx(i.Icon,{icon:r}),e.jsxRuntimeExports.jsxs(E,{className:v({compact:s}),children:[o&&e.jsxRuntimeExports.jsx("span",{className:"path",children:o}),s&&o&&e.jsxRuntimeExports.jsx("span",{className:"divider",children:"/"}),e.jsxRuntimeExports.jsx("span",{className:"label",children:d||c})]})]})})})]})};exports.EntityNameWidget=R;
 //# sourceMappingURL=EntityNameWidget.cjs.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .path {\n ${theme.~~labelSmall~~}\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n }\n\n ~~span~~ {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon?: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n}: EntityNameWidgetProps) => {\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: ~~path~~ ~~? 32 : 24~~ }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent>\n {path && <span className=\"path\">{path}</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","showHierarchy","icon","type","isExpanded","toggleExpandAll","toggleExpanded","jsx","e","jsxs","Icon"],"mappings":"~~uNAGMA~~,EAAWC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUhCG,EAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9BI,EAAwBJ,EAAO;AAAA;AAAA;AAAA,EAK/BK,EAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBvBM,EAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~MAM3BO~~,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAyBTC~~,EAAmB,CAAC,CAC/B,GAAAC,EACA,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,cAAAC,EACA,KAAAC,EACA,KAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,~~CACF~~,~~6BAEKhB~~,EACE,CAAA,SAAA,CAAAW,EACCE,IAAS,~~SACPI~~,EAAA,kBAAA,~~IAACpB~~,EAAA,CACC,~~QAAUqB~~,GAAM,CACdA,EAAE,gBAAgB,EACdA,EAAE,~~OAEJH~~,EAAgBR,CAAE,EAGHS,EAAA,CAEnB,EACA,UAAU,WACV,KAAMF,EAAa,cAAgB,eAAA,CACrC,~~EAECG~~,wBAAA,MAAA,CAAI,MAAO,CAAE,QAAS,eAAgB,SAAU,GAAM,CAAA,EAEvD,~~KACHA~~,EAAA,kBAAA,~~IAAAhB~~,~~EAAA~~,~~CAAqB~~,MAAO,CAAE,~~OAAQS~~,~~EAAO~~,~~GAAK~~,~~EAAA,EACjD,SAAAO,~~EAAAA,kBAAAA,~~IAACf~~,EACC,CAAA,~~SAAAiB~~,~~EAAAA~~,~~kBAAAA~~,~~KAAChB~~,EACE,CAAA,SAAA,CAAQS,~~GAAAK~~,EAAA,kBAAA,IAACG,QAAK,~~KAAAR~~,CAAY,CAAA,~~2BAC1BR~~,~~EACE~~,~~CAAA~~,SAAA,~~CAAAM~~,~~GAASO~~,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,OAAQ,~~SAAKP~~,EAAA,~~EACrCO~~,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,QAAS,~~YAASR~~,CAAK,CAAA,CAAA,CACzC,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CAAA,EACF"}
1	+ {"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport clsx from 'clsx'\n\nconst Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n\n &.compact {\n flex-direction: row;\n align-items: center;\n }\n\n .path {\n ${theme.bodyMedium}\n font-size: 14px;\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.compact .path {\n margin-bottom: 0;\n text-overflow: unset;\n flex-shrink: 0 1 auto;\n }\n\n .label {\n ${theme.bodyMedium}\n font-size: 14px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .divider {\n ${theme.bodyMedium}\n font-size: 14px;\n color: var(--md-sys-color-outline);\n flex-shrink: 0;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon?: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n rowHeight?: number\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n rowHeight = 40,\n}: EntityNameWidgetProps) => {\n // Determine layout based on row height\n // < 50px = single line (compact), >= 50px = stacked\n const isCompact = rowHeight < 50\n\n // Always keep content height at 24px in compact mode or hierarchy mode to prevent jumping\n // Only allow expansion to 32px in non-hierarchy mode when not compact and path exists\n const contentHeight = (isCompact \|\| showHierarchy) ? 24 : (path ? 32 : 24)\n\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: contentHeight }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent className={clsx({ compact: isCompact })}>\n {path && <span className=\"path\">{path}</span>}\n {isCompact && path && <span className=\"divider\">/</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","showHierarchy","icon","type","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","isCompact","contentHeight","jsx","e","jsxs","Icon","clsx"],"mappings":"yOAIMA,EAAWC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUhCG,EAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9BI,EAAwBJ,EAAO;AAAA;AAAA;AAAA,EAK/BK,EAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBvBM,EAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3BO,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUhBA,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBTC,EAAmB,CAAC,CAC/B,GAAAC,EACA,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,cAAAC,EACA,KAAAC,EACA,KAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EAAY,EACd,IAA6B,CAG3B,MAAMC,EAAYD,EAAY,GAIxBE,EAAiBD,GAAaP,EAAiB,GAAMD,EAAO,GAAK,GAEvE,gCACGV,EACE,CAAA,SAAA,CAAAW,EACCE,IAAS,SACPO,EAAA,kBAAA,IAACvB,EAAA,CACC,QAAUwB,GAAM,CACdA,EAAE,gBAAgB,EACdA,EAAE,OAEJN,EAAgBR,CAAE,EAGHS,EAAA,CAEnB,EACA,UAAU,WACV,KAAMF,EAAa,cAAgB,eAAA,CACrC,EAECM,wBAAA,MAAA,CAAI,MAAO,CAAE,QAAS,eAAgB,SAAU,GAAM,CAAA,EAEvD,KACJA,EAAA,kBAAA,IAACnB,EAAqB,CAAA,MAAO,CAAE,OAAQkB,GACrC,SAAAC,EAAAA,kBAAAA,IAAClB,EACC,CAAA,SAAAoB,EAAA,kBAAA,KAACnB,EACE,CAAA,SAAA,CAAQS,GAAAQ,EAAA,kBAAA,IAACG,QAAK,KAAAX,CAAY,CAAA,EAC3BU,yBAAClB,GAAkB,UAAWoB,EAAK,CAAE,QAASN,EAAW,EACtD,SAAA,CAAAR,GAASU,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,OAAQ,SAAKV,EAAA,EACrCQ,GAAaR,GAAQU,EAAAA,kBAAAA,IAAC,OAAK,CAAA,UAAU,UAAU,SAAC,IAAA,EAChDA,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,QAAS,YAASX,CAAK,CAAA,CAAA,CACzC,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CAAA,EACF,CAEJ"}

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.es.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.es.js";
-import { Button as x, theme as m, Icon as g } from "@ynput/ayon-react-components";
+import { Button as g, theme as n, Icon as u } from "@ynput/ayon-react-components";
 import o from "styled-components";
-const v = o(x)`
+import y from "clsx";
+const w = o(g)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -11,7 +12,7 @@ const v = o(x)`
     }
   }
   cursor: pointer;
-`, y = o.div`
+`, b = o.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -19,15 +20,15 @@ const v = o(x)`
   height: 100%;
   width: 100%;
   padding-right: 8px;
-`, f = o.div`
+`, j = o.div`
   width: 100%;
   height: 24px;
   overflow: hidden;
   position: relative;
-`, u = o.div`
+`, N = o.div`
   position: absolute;
   inset: 0;
-`, b = o.div`
+`, k = o.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -46,53 +47,87 @@ const v = o(x)`
       color: var(--md-sys-color-primary);
     }
   } */
-`, j = o.div`
+`, C = o.div`
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   overflow: hidden;
+  flex: 1;
+  min-width: 0;
+  &.compact {
+    flex-direction: row;
+    align-items: center;
+  }
   .path {
-    ${m.labelSmall}
+    ${n.bodyMedium}
+    font-size: 14px;
     margin-bottom: -4px;
     color: var(--md-sys-color-outline);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &.compact .path {
+    margin-bottom: 0;
+    text-overflow: unset;
+    flex-shrink: 0 1 auto;
   }
-  span {
+  .label {
+    ${n.bodyMedium}
+    font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .divider {
+    ${n.bodyMedium}
+    font-size: 14px;
+    color: var(--md-sys-color-outline);
+    flex-shrink: 0;
   }
-`, N = ({
-  id: n,
-  label: s,
-  name: l,
+`, M = ({
+  id: a,
+  label: d,
+  name: c,
   path: t,
-  showHierarchy: a,
-  icon: i,
-  type: d,
-  isExpanded: p,
-  toggleExpandAll: c,
-  toggleExpanded: h
-}) => /* @__PURE__ */ e.jsxs(y, { children: [
-  a ? d === "folder" ? /* @__PURE__ */ e.jsx(
-    v,
-    {
-      onClick: (r) => {
-        r.stopPropagation(), r.altKey ? c(n) : h();
-      },
-      className: "expander",
-      icon: p ? "expand_more" : "chevron_right"
-    }
-  ) : /* @__PURE__ */ e.jsx("div", { style: { display: "inline-block", minWidth: 24 } }) : null,
-  /* @__PURE__ */ e.jsx(f, { style: { height: t ? 32 : 24 }, children: /* @__PURE__ */ e.jsx(u, { children: /* @__PURE__ */ e.jsxs(b, { children: [
-    i && /* @__PURE__ */ e.jsx(g, { icon: i }),
-    /* @__PURE__ */ e.jsxs(j, { children: [
-      t && /* @__PURE__ */ e.jsx("span", { className: "path", children: t }),
-      /* @__PURE__ */ e.jsx("span", { className: "label", children: s || l })
-    ] })
-  ] }) }) })
-] });
+  showHierarchy: r,
+  icon: s,
+  type: p,
+  isExpanded: m,
+  toggleExpandAll: x,
+  toggleExpanded: h,
+  rowHeight: f = 40
+}) => {
+  const i = f < 50, v = i || r ? 24 : t ? 32 : 24;
+  return /* @__PURE__ */ e.jsxs(b, { children: [
+    r ? p === "folder" ? /* @__PURE__ */ e.jsx(
+      w,
+      {
+        onClick: (l) => {
+          l.stopPropagation(), l.altKey ? x(a) : h();
+        },
+        className: "expander",
+        icon: m ? "expand_more" : "chevron_right"
+      }
+    ) : /* @__PURE__ */ e.jsx("div", { style: { display: "inline-block", minWidth: 24 } }) : null,
+    /* @__PURE__ */ e.jsx(j, { style: { height: v }, children: /* @__PURE__ */ e.jsx(N, { children: /* @__PURE__ */ e.jsxs(k, { children: [
+      s && /* @__PURE__ */ e.jsx(u, { icon: s }),
+      /* @__PURE__ */ e.jsxs(C, { className: y({ compact: i }), children: [
+        t && /* @__PURE__ */ e.jsx("span", { className: "path", children: t }),
+        i && t && /* @__PURE__ */ e.jsx("span", { className: "divider", children: "/" }),
+        /* @__PURE__ */ e.jsx("span", { className: "label", children: d || c })
+      ] })
+    ] }) }) })
+  ] });
+};
 export {
-  N as EntityNameWidget
+  M as EntityNameWidget
 };
 //# sourceMappingURL=EntityNameWidget.es.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/EntityNameWidget.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .path {\n ${theme.~~labelSmall~~}\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n }\n\n ~~span~~ {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon?: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n}: EntityNameWidgetProps) => {\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: ~~path~~ ~~? 32 : 24~~ }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent>\n {path && <span className=\"path\">{path}</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","showHierarchy","icon","type","isExpanded","toggleExpandAll","toggleExpanded","jsx","e","jsxs","Icon"],"mappings":"~~;;;AAGA~~,MAAMA,IAAWC,EAAOC,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYxBC,IAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhCG,IAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BI,IAAwBJ,EAAO;AAAA;AAAA;AAAA,GAK/BK,IAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBvBM,IAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~MAM3BO~~,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAyBTC~~,IAAmB,CAAC;AAAA,EAC/B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;~~AACF~~,~~6BAEKhB~~,GACE,EAAA,UAAA;AAAA,~~EAAAW~~,IACCE,MAAS,~~WACPI~~,gBAAAA,EAAA;AAAA,~~IAACpB~~;AAAA,~~IAAA~~;AAAA,~~MACC~~,SAAS,~~CAACqB~~,MAAM;AACd,~~QAAAA~~,EAAE,gBAAgB,GACdA,EAAE,~~SAEJH~~,EAAgBR,CAAE,IAGHS,EAAA;AAAA,~~MAEnB~~;AAAA,~~MACA~~,WAAU;AAAA,~~MACV~~,MAAMF,IAAa,gBAAgB;AAAA,~~IAAA~~;AAAA,~~EACrC~~,~~IAECG~~,gBAAAA,MAAA,OAAA,EAAI,OAAO,EAAE,SAAS,gBAAgB,UAAU,KAAM,CAAA,IAEvD;AAAA,~~EACHA~~,gBAAAA,EAAA,~~IAAAhB~~,~~GAAA~~,~~EAAqB~~,OAAO,EAAE,~~QAAQS~~,~~IAAO~~,~~KAAK~~,~~GAAA,GACjD,UAAAO,~~gBAAAA,EAAAA,~~IAACf~~,GACC,EAAA,~~UAAAiB~~,gBAAAA,~~EAAAA~~,~~KAAChB~~,GACE,EAAA,UAAA;AAAA,~~IAAQS~~,~~KAAAK~~,gBAAAA,EAAA,IAACG,KAAK,~~MAAAR~~,EAAY,CAAA;AAAA,~~2BAC1BR~~,~~GACE~~,~~EAAA~~,UAAA;AAAA,~~MAAAM~~,~~KAASO~~,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,QAAQ,~~UAAKP~~,GAAA;AAAA,~~MACrCO~~,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,SAAS,~~eAASR~~,EAAK,CAAA;AAAA,~~IAAA~~,EACzC,CAAA;AAAA,~~EAAA~~,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,GACF;"}
1	+ {"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport clsx from 'clsx'\n\nconst Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n\n &.compact {\n flex-direction: row;\n align-items: center;\n }\n\n .path {\n ${theme.bodyMedium}\n font-size: 14px;\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.compact .path {\n margin-bottom: 0;\n text-overflow: unset;\n flex-shrink: 0 1 auto;\n }\n\n .label {\n ${theme.bodyMedium}\n font-size: 14px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .divider {\n ${theme.bodyMedium}\n font-size: 14px;\n color: var(--md-sys-color-outline);\n flex-shrink: 0;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon?: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n rowHeight?: number\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n rowHeight = 40,\n}: EntityNameWidgetProps) => {\n // Determine layout based on row height\n // < 50px = single line (compact), >= 50px = stacked\n const isCompact = rowHeight < 50\n\n // Always keep content height at 24px in compact mode or hierarchy mode to prevent jumping\n // Only allow expansion to 32px in non-hierarchy mode when not compact and path exists\n const contentHeight = (isCompact \|\| showHierarchy) ? 24 : (path ? 32 : 24)\n\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: contentHeight }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent className={clsx({ compact: isCompact })}>\n {path && <span className=\"path\">{path}</span>}\n {isCompact && path && <span className=\"divider\">/</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["Expander","styled","Button","StyledEntityNameWidget","StyledContentWrapper","StyledContentAbsolute","StyledContent","StyledTextContent","theme","EntityNameWidget","id","label","name","path","showHierarchy","icon","type","isExpanded","toggleExpandAll","toggleExpanded","rowHeight","isCompact","contentHeight","jsx","e","jsxs","Icon","clsx"],"mappings":";;;;AAIA,MAAMA,IAAWC,EAAOC,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYxBC,IAAyBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhCG,IAAuBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BI,IAAwBJ,EAAO;AAAA;AAAA;AAAA,GAK/BK,IAAgBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBvBM,IAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3BO,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBhBA,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUhBA,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBTC,IAAmB,CAAC;AAAA,EAC/B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAA6B;AAG3B,QAAMC,IAAYD,IAAY,IAIxBE,IAAiBD,KAAaP,IAAiB,KAAMD,IAAO,KAAK;AAEvE,gCACGV,GACE,EAAA,UAAA;AAAA,IAAAW,IACCE,MAAS,WACPO,gBAAAA,EAAA;AAAA,MAACvB;AAAA,MAAA;AAAA,QACC,SAAS,CAACwB,MAAM;AACd,UAAAA,EAAE,gBAAgB,GACdA,EAAE,SAEJN,EAAgBR,CAAE,IAGHS,EAAA;AAAA,QAEnB;AAAA,QACA,WAAU;AAAA,QACV,MAAMF,IAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC,IAECM,gBAAAA,MAAA,OAAA,EAAI,OAAO,EAAE,SAAS,gBAAgB,UAAU,KAAM,CAAA,IAEvD;AAAA,IACJA,gBAAAA,EAAA,IAACnB,GAAqB,EAAA,OAAO,EAAE,QAAQkB,KACrC,UAAAC,gBAAAA,EAAAA,IAAClB,GACC,EAAA,UAAAoB,gBAAAA,EAAA,KAACnB,GACE,EAAA,UAAA;AAAA,MAAQS,KAAAQ,gBAAAA,EAAA,IAACG,KAAK,MAAAX,EAAY,CAAA;AAAA,MAC3BU,gBAAAA,OAAClB,KAAkB,WAAWoB,EAAK,EAAE,SAASN,GAAW,GACtD,UAAA;AAAA,QAAAR,KAASU,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,QAAQ,UAAKV,GAAA;AAAA,QACrCQ,KAAaR,KAAQU,gBAAAA,EAAAA,IAAC,QAAK,EAAA,WAAU,WAAU,UAAC,KAAA;AAAA,QAChDA,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,SAAS,eAASX,EAAK,CAAA;AAAA,MAAA,EACzC,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}