@ynput/ayon-frontend-shared 0.2.13 → 0.2.15

package/dist/shared/src/containers/ProjectTreeTable/hooks/useCellContextMenu.es.js

@@ -6,12 +6,15 @@ import { useClipboard } from "../context/ClipboardContext.es.js";
 import { useSelectionCellsContext, ROW_SELECTION_COLUMN_ID } from "../context/SelectionCellsContext.es.js";
 import { useProjectTableContext } from "../context/ProjectTableContext.es.js";
 import { useCellEditing } from "../context/CellEditingContext.es.js";
+import { GROUP_BY_ID } from "./useBuildGroupByTableData.es.js";
 const useCellContextMenu = ({ attribs, onOpenNew }) => {
   const {
     projectName,
     showHierarchy,
     getEntityById,
     toggleExpandAll,
+    toggleExpands,
+    expanded,
     contextMenuItems = []
   } = useProjectTableContext();
   const { copyToClipboard, exportCSV, pasteFromClipboard } = useClipboard();
@@ -50,22 +53,21 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
       return acc;
     }, []);
   };
-  const copyAndPasteItems = (e, cell, selected, config) => {
+  const copyAndPasteItems = (e, cell, selected, meta) => {
     var _a;
     return [
       {
         label: "Copy",
         icon: "content_copy",
         shortcut: getPlatformShortcutKey("c", [KeyMode.Ctrl]),
-        command: () => copyToClipboard(config.selectedCells),
-        hidden: false
-        // Always shown
+        command: () => copyToClipboard(meta.selectedCells),
+        hidden: cell.isGroup
       },
       {
-        label: `Copy row${config.selectedFullRows.length > 1 ? "s" : ""}`,
+        label: `Copy row${meta.selectedFullRows.length > 1 ? "s" : ""}`,
         icon: "content_copy",
-        command: () => copyToClipboard(config.selectedFullRows, true),
-        hidden: cell.columnId !== "name" || !config.selectedFullRows.some(
+        command: () => copyToClipboard(meta.selectedFullRows, true),
+        hidden: cell.columnId !== "name" || !meta.selectedFullRows.some(
           (cellId) => {
             var _a2, _b;
             return ((_a2 = parseCellId(cellId)) == null ? void 0 : _a2.rowId) === ((_b = parseCellId(cell.cellId)) == null ? void 0 : _b.rowId);
@@ -76,8 +78,8 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
         label: "Paste",
         icon: "content_paste",
         shortcut: getPlatformShortcutKey("v", [KeyMode.Ctrl]),
-        command: () => pasteFromClipboard(config.selectedCells),
-        hidden: cell.columnId === "name",
+        command: () => pasteFromClipboard(meta.selectedCells),
+        hidden: cell.columnId === "name" || cell.isGroup,
         disabled: (_a = cell.attribField) == null ? void 0 : _a.readOnly
       }
     ];
@@ -90,7 +92,7 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
       const rowSelectionCellId = getCellId(cell.entityId, ROW_SELECTION_COLUMN_ID);
       selectCell(rowSelectionCellId, false, false);
     },
-    hidden: cell.columnId !== "name" || meta.selectedRows.length > 1
+    hidden: cell.columnId !== "name" || meta.selectedRows.length > 1 || cell.isGroup
   });
   const expandCollapseChildrenItems = (e, cell, selected, meta) => [
     {
@@ -98,14 +100,26 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
       icon: "expand_all",
       shortcut: "Alt + click",
       command: () => toggleExpandAll(meta.selectedRows, true),
-      hidden: cell.columnId !== "name"
+      hidden: cell.columnId !== "name" || cell.entityType !== "folder"
     },
     {
       label: "Collapse children",
       icon: "collapse_all",
       shortcut: "Alt + click",
       command: () => toggleExpandAll(meta.selectedRows, false),
-      hidden: cell.columnId !== "name"
+      hidden: cell.columnId !== "name" || cell.entityType !== "folder"
+    },
+    {
+      label: "Expand",
+      icon: "expand_all",
+      command: () => toggleExpands(meta.selectedRows, true),
+      hidden: cell.columnId !== "name" || !cell.isGroup || expanded[cell.entityId]
+    },
+    {
+      label: "Collapse",
+      icon: "collapse_all",
+      command: () => toggleExpands(meta.selectedRows, false),
+      hidden: cell.columnId !== "name" || !cell.isGroup || !expanded[cell.entityId]
     }
   ];
   const deleteItem = (e, cell, selected, meta) => ({
@@ -113,7 +127,7 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
     icon: "delete",
     danger: true,
     command: () => deleteEntities(meta.selectedCells),
-    hidden: cell.columnId !== "name"
+    hidden: cell.columnId !== "name" || cell.isGroup
   });
   const inheritItem = (e, cell, selected, meta) => {
     const entitiesToInherit = getEntitiesToInherit(meta.selectedCells);
@@ -125,12 +139,11 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
       hidden: !canInheritFromParent
     };
   };
-  const exportItem = () => ({
+  const exportItem = (e, cell) => ({
     label: "Export selection",
     icon: "download",
     command: () => exportCSV(Array.from(selectedCells), projectName),
-    hidden: false
-    // Always shown
+    hidden: cell.isGroup
   });
   const createFolderItems = (e, cell) => [
     {
@@ -175,7 +188,8 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
       columnId: colId,
       entityId: (cellEntityData == null ? void 0 : cellEntityData.entityId) || rowId,
       entityType: cellEntityData == null ? void 0 : cellEntityData.entityType,
-      attribField
+      attribField,
+      isGroup: rowId.startsWith(GROUP_BY_ID)
     };
   };
   const handleTableBodyContextMenu = (e) => {
@@ -196,11 +210,13 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
     const selectedCellRows = [];
     const selectedCellColumns = [];
     const selectedCellFullRows = [];
+    const selectedCellsGroups = [];
     for (const { entityId, columnId } of selectedCellsData) {
       if (entityId && !selectedCellRows.includes(entityId)) selectedCellRows.push(entityId);
       if (columnId && !selectedCellColumns.includes(columnId)) selectedCellColumns.push(columnId);
       if (columnId === ROW_SELECTION_COLUMN_ID && !selectedCellFullRows.includes(entityId))
         selectedCellFullRows.push(entityId);
+      if (entityId.startsWith(GROUP_BY_ID)) selectedCellsGroups.push(entityId);
     }
     const constructedMenuItems = contextMenuItems.flatMap(
       (constructor) => {
@@ -214,7 +230,9 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
             // all selected cells
             selectedRows: selectedCellRows,
             selectedColumns: selectedCellColumns,
-            selectedFullRows: selectedCellFullRows
+            selectedFullRows: selectedCellFullRows,
+            selectedGroups: selectedCellsGroups
+            // groups if any
           },
           {
             history
@@ -229,7 +247,9 @@ const useCellContextMenu = ({ attribs, onOpenNew }) => {
             // all selected cells
             selectedRows: selectedCellRows,
             selectedColumns: selectedCellColumns,
-            selectedFullRows: selectedCellFullRows
+            selectedFullRows: selectedCellFullRows,
+            selectedGroups: selectedCellsGroups
+            // groups if any
           },
           { history }
         );

package/dist/shared/src/containers/ProjectTreeTable/hooks/useCellContextMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellContextMenu.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/hooks/useCellContextMenu.ts"],"sourcesContent":["import { ContextMenuItemType, useCreateContextMenu } from '../../ContextMenu/useCreateContextMenu'\nimport useDeleteEntities from './useDeleteEntities'\nimport { getPlatformShortcutKey, KeyMode } from '../../../util/platform'\nimport { getCellId, parseCellId } from '../utils/cellUtils'\nimport { useClipboard } from '../context/ClipboardContext'\nimport { ROW_SELECTION_COLUMN_ID, useSelectionCellsContext } from '../context/SelectionCellsContext'\nimport { useProjectTableContext } from '../context/ProjectTableContext'\nimport { useCellEditing } from '../context/CellEditingContext'\nimport { InheritFromParentEntity } from './useUpdateTableData'\nimport { ProjectTableAttribute } from '../types'\nimport { UseHistoryReturn } from './useHistory'\n\ntype ContextEvent = React.MouseEvent<HTMLTableSectionElement, MouseEvent>\n\nexport type TableCellContextData = {\n  entityId: string\n  cellId: string\n  columnId: string\n  entityType: 'folder' | 'task' | 'product' | 'version' | undefined\n  attribField: ProjectTableAttribute | undefined\n}\ntype DefaultMenuItem =\n  | 'copy-paste'\n  | 'show-details'\n  | 'expand-collapse'\n  | 'inherit'\n  | 'delete'\n  | 'export'\n  | 'create-folder'\n  | 'create-task'\nexport type ContextMenuItemConstructor = (\n  e: ContextEvent,\n  cell: TableCellContextData,\n  selectedCells: TableCellContextData[],\n  meta: {\n    selectedCells: string[]\n    selectedRows: string[]\n    selectedColumns: string[]\n    selectedFullRows: string[] // if the full row is selected\n  },\n  context: {\n    history: UseHistoryReturn\n  },\n) => ContextMenuItemType | ContextMenuItemType[] | undefined\nexport type ContextMenuItemConstructors = (DefaultMenuItem | ContextMenuItemConstructor)[]\n\ntype CellContextMenuProps = {\n  attribs: ProjectTableAttribute[]\n  onOpenNew?: (type: 'folder' | 'task') => void\n}\n\nconst useCellContextMenu = ({ attribs, onOpenNew }: CellContextMenuProps) => {\n  // context hooks\n  const {\n    projectName,\n    showHierarchy,\n    getEntityById,\n    toggleExpandAll,\n    contextMenuItems = [],\n  } = useProjectTableContext()\n  const { copyToClipboard, exportCSV, pasteFromClipboard } = useClipboard()\n  const { selectedCells, clearSelection, selectCell, focusCell } = useSelectionCellsContext()\n  const { inheritFromParent, history } = useCellEditing()\n\n  // update entity context\n\n  // data mutations\n  const deleteEntities = useDeleteEntities({})\n\n  const [cellContextMenuShow] = useCreateContextMenu()\n\n  // Helper function to identify attributes that can be inherited\n  const getEntitiesToInherit = (selected: string[]): InheritFromParentEntity[] => {\n    return selected.reduce((acc, cellId) => {\n      const { rowId, colId } = parseCellId(cellId) || {}\n      if (!rowId || !colId || !colId.startsWith('attrib_')) return acc\n\n      const entity = getEntityById(rowId)\n      if (!entity) return acc\n\n      const attribName = colId.replace('attrib_', '')\n      //   get attrib model\n      const attribModel = attribs.find((attrib) => attrib.name === attribName)\n      // is the attrib inheritable?\n      const isInheritable = attribModel?.data.inherit\n\n      // Check if this attribute is owned by the entity (not inherited)\n      if (entity.ownAttrib?.includes(attribName) && isInheritable) {\n        // Find existing entry or create new one\n        const existingIndex = acc.findIndex((item) => item.entityId === rowId)\n\n        if (existingIndex >= 0) {\n          // Add to existing entity's attribs if not already there\n          if (!acc[existingIndex].attribs.includes(attribName)) {\n            acc[existingIndex].attribs.push(attribName)\n          }\n        } else {\n          // Create new entity entry\n          acc.push({\n            rowId: rowId,\n            entityId: rowId,\n            entityType: 'folderId' in entity ? 'task' : 'folder',\n            attribs: [attribName],\n            ownAttrib: entity.ownAttrib || [],\n            // @ts-ignore\n            folderId: entity.parentId ?? entity.folderId,\n          })\n        }\n      }\n\n      return acc\n    }, [] as InheritFromParentEntity[])\n  }\n\n  const copyAndPasteItems: ContextMenuItemConstructor = (e, cell, selected, config) => {\n    return [\n      {\n        label: 'Copy',\n        icon: 'content_copy',\n        shortcut: getPlatformShortcutKey('c', [KeyMode.Ctrl]),\n        command: () => copyToClipboard(config.selectedCells),\n        hidden: false, // Always shown\n      },\n      {\n        label: `Copy row${config.selectedFullRows.length > 1 ? 's' : ''}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(config.selectedFullRows, true),\n        hidden:\n          cell.columnId !== 'name' ||\n          !config.selectedFullRows.some(\n            (cellId) => parseCellId(cellId)?.rowId === parseCellId(cell.cellId)?.rowId,\n          ),\n      },\n      {\n        label: 'Paste',\n        icon: 'content_paste',\n        shortcut: getPlatformShortcutKey('v', [KeyMode.Ctrl]),\n        command: () => pasteFromClipboard(config.selectedCells),\n        hidden: cell.columnId === 'name',\n        disabled: cell.attribField?.readOnly,\n      },\n    ]\n  }\n\n  const showDetailsItem: ContextMenuItemConstructor = (e, cell, selected, meta) => ({\n    label: 'Show details',\n    icon: 'dock_to_left',\n    shortcut: 'Double click',\n    command: () => {\n      const rowSelectionCellId = getCellId(cell.entityId, ROW_SELECTION_COLUMN_ID)\n      // select the row to open the details\n      selectCell(rowSelectionCellId, false, false)\n    },\n    hidden: cell.columnId !== 'name' || meta.selectedRows.length > 1,\n  })\n\n  const expandCollapseChildrenItems: ContextMenuItemConstructor = (e, cell, selected, meta) => [\n    {\n      label: 'Expand children',\n      icon: 'expand_all',\n      shortcut: 'Alt + click',\n      command: () => toggleExpandAll(meta.selectedRows, true),\n      hidden: cell.columnId !== 'name',\n    },\n    {\n      label: 'Collapse children',\n      icon: 'collapse_all',\n      shortcut: 'Alt + click',\n      command: () => toggleExpandAll(meta.selectedRows, false),\n      hidden: cell.columnId !== 'name',\n    },\n  ]\n\n  const deleteItem: ContextMenuItemConstructor = (e, cell, selected, meta) => ({\n    label: 'Delete',\n    icon: 'delete',\n    danger: true,\n    command: () => deleteEntities(meta.selectedCells),\n    hidden: cell.columnId !== 'name',\n  })\n\n  const inheritItem: ContextMenuItemConstructor = (e, cell, selected, meta) => {\n    const entitiesToInherit = getEntitiesToInherit(meta.selectedCells)\n    const canInheritFromParent =\n      entitiesToInherit.length > 0 &&\n      showHierarchy &&\n      !(meta.selectedRows.length > 1 && meta.selectedColumns.length > 1)\n\n    return {\n      label: 'Inherit from parent',\n      icon: 'disabled_by_default',\n      command: () => inheritFromParent(entitiesToInherit),\n      hidden: !canInheritFromParent,\n    }\n  }\n\n  const exportItem: ContextMenuItemConstructor = () => ({\n    label: 'Export selection',\n    icon: 'download',\n    command: () => exportCSV(Array.from(selectedCells), projectName),\n    hidden: false, // Always shown\n  })\n\n  const createFolderItems: ContextMenuItemConstructor = (e, cell) => [\n    {\n      label: 'Create folder',\n      icon: 'create_new_folder',\n      command: () => onOpenNew?.('folder'),\n      hidden: cell.columnId !== 'name' || !showHierarchy || !onOpenNew,\n    },\n    {\n      label: 'Create root folder',\n      icon: 'create_new_folder',\n      command: () => {\n        clearSelection()\n        onOpenNew?.('folder')\n      },\n      hidden: cell.columnId !== 'name' || !showHierarchy || !onOpenNew,\n    },\n  ]\n\n  const createTaskItem: ContextMenuItemConstructor = (e, cell) => ({\n    label: 'Create task',\n    icon: 'add_task',\n    command: () => onOpenNew?.('task'),\n    hidden: cell.columnId !== 'name' || !showHierarchy || !onOpenNew,\n  })\n\n  const builtInMenuItems: Record<DefaultMenuItem, ContextMenuItemConstructor> = {\n    ['copy-paste']: copyAndPasteItems,\n    ['show-details']: showDetailsItem,\n    ['expand-collapse']: expandCollapseChildrenItems,\n    ['delete']: deleteItem,\n    ['inherit']: inheritItem,\n    ['export']: exportItem,\n    ['create-folder']: createFolderItems,\n    ['create-task']: createTaskItem,\n  }\n\n  const getCellData = (cellId: string): TableCellContextData | undefined => {\n    const { rowId, colId } = parseCellId(cellId) || {}\n    if (!rowId || !colId) return undefined\n    const cellEntityData = getEntityById(rowId)\n    const attribField = attribs.find((attrib) => attrib.name === colId?.replace('attrib_', ''))\n    return {\n      cellId: cellId,\n      columnId: colId,\n      entityId: cellEntityData?.entityId || rowId,\n      entityType: cellEntityData?.entityType,\n      attribField: attribField,\n    }\n  }\n\n  const handleTableBodyContextMenu = (e: ContextEvent) => {\n    const target = e.target as HTMLElement\n    const tdEl = target.closest('td')\n    // get id of first child of td\n    const cellId = tdEl?.firstElementChild?.id\n\n    if (!cellId) return\n\n    const cellData = getCellData(cellId)\n\n    if (!cellData) return\n\n    let currentSelectedCells = Array.from(selectedCells)\n    // if selecting a cell outside of the current selection\n    if (!currentSelectedCells.includes(cellId) || !currentSelectedCells.length) {\n      currentSelectedCells = [cellId]\n      // update selection\n      selectCell(cellId, false, false)\n      focusCell(cellId)\n    }\n\n    const selectedCellsData = currentSelectedCells.flatMap((cellId) => getCellData(cellId) || [])\n    const selectedCellRows: string[] = []\n    const selectedCellColumns: string[] = []\n    const selectedCellFullRows: string[] = []\n    for (const { entityId, columnId } of selectedCellsData) {\n      if (entityId && !selectedCellRows.includes(entityId)) selectedCellRows.push(entityId)\n      if (columnId && !selectedCellColumns.includes(columnId)) selectedCellColumns.push(columnId)\n      if (columnId === ROW_SELECTION_COLUMN_ID && !selectedCellFullRows.includes(entityId))\n        selectedCellFullRows.push(entityId)\n    }\n\n    const constructedMenuItems = contextMenuItems.flatMap((constructor) =>\n      typeof constructor === 'function'\n        ? constructor(\n            e,\n            cellData,\n            selectedCellsData,\n            {\n              selectedCells: currentSelectedCells, // all selected cells\n              selectedRows: selectedCellRows,\n              selectedColumns: selectedCellColumns,\n              selectedFullRows: selectedCellFullRows,\n            },\n            {\n              history,\n            },\n          )\n        : builtInMenuItems[constructor]?.(\n            e,\n            cellData,\n            selectedCellsData,\n            {\n              selectedCells: currentSelectedCells, // all selected cells\n              selectedRows: selectedCellRows,\n              selectedColumns: selectedCellColumns,\n              selectedFullRows: selectedCellFullRows,\n            },\n            { history },\n          ),\n    )\n\n    cellContextMenuShow(e, constructedMenuItems)\n  }\n\n  return { handleTableBodyContextMenu }\n}\n\nexport default useCellContextMenu\n"],"names":["_a","cellId"],"mappings":"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"}
+{"version":3,"file":"useCellContextMenu.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/hooks/useCellContextMenu.ts"],"sourcesContent":["import { ContextMenuItemType, useCreateContextMenu } from '../../ContextMenu/useCreateContextMenu'\nimport useDeleteEntities from './useDeleteEntities'\nimport { getPlatformShortcutKey, KeyMode } from '../../../util/platform'\nimport { getCellId, parseCellId } from '../utils/cellUtils'\nimport { useClipboard } from '../context/ClipboardContext'\nimport { ROW_SELECTION_COLUMN_ID, useSelectionCellsContext } from '../context/SelectionCellsContext'\nimport { useProjectTableContext } from '../context/ProjectTableContext'\nimport { useCellEditing } from '../context/CellEditingContext'\nimport { InheritFromParentEntity } from './useUpdateTableData'\nimport { ProjectTableAttribute } from '../types'\nimport { UseHistoryReturn } from './useHistory'\nimport { GROUP_BY_ID } from './useBuildGroupByTableData'\n\ntype ContextEvent = React.MouseEvent<HTMLTableSectionElement, MouseEvent>\n\nexport type TableCellContextData = {\n  entityId: string\n  cellId: string\n  columnId: string\n  entityType: 'folder' | 'task' | 'product' | 'version' | undefined\n  attribField: ProjectTableAttribute | undefined\n  isGroup: boolean // if the cell is a group header\n}\ntype DefaultMenuItem =\n  | 'copy-paste'\n  | 'show-details'\n  | 'expand-collapse'\n  | 'inherit'\n  | 'delete'\n  | 'export'\n  | 'create-folder'\n  | 'create-task'\nexport type ContextMenuItemConstructor = (\n  e: ContextEvent,\n  cell: TableCellContextData,\n  selectedCells: TableCellContextData[],\n  meta: {\n    selectedCells: string[]\n    selectedRows: string[]\n    selectedColumns: string[]\n    selectedFullRows: string[] // if the full row is selected\n    selectedGroups: string[] // groups if any\n  },\n  context: {\n    history: UseHistoryReturn\n  },\n) => ContextMenuItemType | ContextMenuItemType[] | undefined\nexport type ContextMenuItemConstructors = (DefaultMenuItem | ContextMenuItemConstructor)[]\n\ntype CellContextMenuProps = {\n  attribs: ProjectTableAttribute[]\n  onOpenNew?: (type: 'folder' | 'task') => void\n}\n\nconst useCellContextMenu = ({ attribs, onOpenNew }: CellContextMenuProps) => {\n  // context hooks\n  const {\n    projectName,\n    showHierarchy,\n    getEntityById,\n    toggleExpandAll,\n    toggleExpands,\n    expanded,\n    contextMenuItems = [],\n  } = useProjectTableContext()\n  const { copyToClipboard, exportCSV, pasteFromClipboard } = useClipboard()\n  const { selectedCells, clearSelection, selectCell, focusCell } = useSelectionCellsContext()\n  const { inheritFromParent, history } = useCellEditing()\n\n  // update entity context\n\n  // data mutations\n  const deleteEntities = useDeleteEntities({})\n\n  const [cellContextMenuShow] = useCreateContextMenu()\n\n  // Helper function to identify attributes that can be inherited\n  const getEntitiesToInherit = (selected: string[]): InheritFromParentEntity[] => {\n    return selected.reduce((acc, cellId) => {\n      const { rowId, colId } = parseCellId(cellId) || {}\n      if (!rowId || !colId || !colId.startsWith('attrib_')) return acc\n\n      const entity = getEntityById(rowId)\n      if (!entity) return acc\n\n      const attribName = colId.replace('attrib_', '')\n      //   get attrib model\n      const attribModel = attribs.find((attrib) => attrib.name === attribName)\n      // is the attrib inheritable?\n      const isInheritable = attribModel?.data.inherit\n\n      // Check if this attribute is owned by the entity (not inherited)\n      if (entity.ownAttrib?.includes(attribName) && isInheritable) {\n        // Find existing entry or create new one\n        const existingIndex = acc.findIndex((item) => item.entityId === rowId)\n\n        if (existingIndex >= 0) {\n          // Add to existing entity's attribs if not already there\n          if (!acc[existingIndex].attribs.includes(attribName)) {\n            acc[existingIndex].attribs.push(attribName)\n          }\n        } else {\n          // Create new entity entry\n          acc.push({\n            rowId: rowId,\n            entityId: rowId,\n            entityType: 'folderId' in entity ? 'task' : 'folder',\n            attribs: [attribName],\n            ownAttrib: entity.ownAttrib || [],\n            // @ts-ignore\n            folderId: entity.parentId ?? entity.folderId,\n          })\n        }\n      }\n\n      return acc\n    }, [] as InheritFromParentEntity[])\n  }\n\n  const copyAndPasteItems: ContextMenuItemConstructor = (e, cell, selected, meta) => {\n    return [\n      {\n        label: 'Copy',\n        icon: 'content_copy',\n        shortcut: getPlatformShortcutKey('c', [KeyMode.Ctrl]),\n        command: () => copyToClipboard(meta.selectedCells),\n        hidden: cell.isGroup,\n      },\n      {\n        label: `Copy row${meta.selectedFullRows.length > 1 ? 's' : ''}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(meta.selectedFullRows, true),\n        hidden:\n          cell.columnId !== 'name' ||\n          !meta.selectedFullRows.some(\n            (cellId) => parseCellId(cellId)?.rowId === parseCellId(cell.cellId)?.rowId,\n          ),\n      },\n      {\n        label: 'Paste',\n        icon: 'content_paste',\n        shortcut: getPlatformShortcutKey('v', [KeyMode.Ctrl]),\n        command: () => pasteFromClipboard(meta.selectedCells),\n        hidden: cell.columnId === 'name' || cell.isGroup,\n        disabled: cell.attribField?.readOnly,\n      },\n    ]\n  }\n\n  const showDetailsItem: ContextMenuItemConstructor = (e, cell, selected, meta) => ({\n    label: 'Show details',\n    icon: 'dock_to_left',\n    shortcut: 'Double click',\n    command: () => {\n      const rowSelectionCellId = getCellId(cell.entityId, ROW_SELECTION_COLUMN_ID)\n      // select the row to open the details\n      selectCell(rowSelectionCellId, false, false)\n    },\n    hidden: cell.columnId !== 'name' || meta.selectedRows.length > 1 || cell.isGroup,\n  })\n\n  const expandCollapseChildrenItems: ContextMenuItemConstructor = (e, cell, selected, meta) => [\n    {\n      label: 'Expand children',\n      icon: 'expand_all',\n      shortcut: 'Alt + click',\n      command: () => toggleExpandAll(meta.selectedRows, true),\n      hidden: cell.columnId !== 'name' || cell.entityType !== 'folder',\n    },\n    {\n      label: 'Collapse children',\n      icon: 'collapse_all',\n      shortcut: 'Alt + click',\n      command: () => toggleExpandAll(meta.selectedRows, false),\n      hidden: cell.columnId !== 'name' || cell.entityType !== 'folder',\n    },\n    {\n      label: 'Expand',\n      icon: 'expand_all',\n      command: () => toggleExpands(meta.selectedRows, true),\n      hidden:\n        cell.columnId !== 'name' ||\n        !cell.isGroup ||\n        expanded[cell.entityId as keyof typeof expanded],\n    },\n    {\n      label: 'Collapse',\n      icon: 'collapse_all',\n      command: () => toggleExpands(meta.selectedRows, false),\n      hidden:\n        cell.columnId !== 'name' ||\n        !cell.isGroup ||\n        !expanded[cell.entityId as keyof typeof expanded],\n    },\n  ]\n\n  const deleteItem: ContextMenuItemConstructor = (e, cell, selected, meta) => ({\n    label: 'Delete',\n    icon: 'delete',\n    danger: true,\n    command: () => deleteEntities(meta.selectedCells),\n    hidden: cell.columnId !== 'name' || cell.isGroup,\n  })\n\n  const inheritItem: ContextMenuItemConstructor = (e, cell, selected, meta) => {\n    const entitiesToInherit = getEntitiesToInherit(meta.selectedCells)\n    const canInheritFromParent =\n      entitiesToInherit.length > 0 &&\n      showHierarchy &&\n      !(meta.selectedRows.length > 1 && meta.selectedColumns.length > 1)\n\n    return {\n      label: 'Inherit from parent',\n      icon: 'disabled_by_default',\n      command: () => inheritFromParent(entitiesToInherit),\n      hidden: !canInheritFromParent,\n    }\n  }\n\n  const exportItem: ContextMenuItemConstructor = (e, cell) => ({\n    label: 'Export selection',\n    icon: 'download',\n    command: () => exportCSV(Array.from(selectedCells), projectName),\n    hidden: cell.isGroup,\n  })\n\n  const createFolderItems: ContextMenuItemConstructor = (e, cell) => [\n    {\n      label: 'Create folder',\n      icon: 'create_new_folder',\n      command: () => onOpenNew?.('folder'),\n      hidden: cell.columnId !== 'name' || !showHierarchy || !onOpenNew,\n    },\n    {\n      label: 'Create root folder',\n      icon: 'create_new_folder',\n      command: () => {\n        clearSelection()\n        onOpenNew?.('folder')\n      },\n      hidden: cell.columnId !== 'name' || !showHierarchy || !onOpenNew,\n    },\n  ]\n\n  const createTaskItem: ContextMenuItemConstructor = (e, cell) => ({\n    label: 'Create task',\n    icon: 'add_task',\n    command: () => onOpenNew?.('task'),\n    hidden: cell.columnId !== 'name' || !showHierarchy || !onOpenNew,\n  })\n\n  const builtInMenuItems: Record<DefaultMenuItem, ContextMenuItemConstructor> = {\n    ['copy-paste']: copyAndPasteItems,\n    ['show-details']: showDetailsItem,\n    ['expand-collapse']: expandCollapseChildrenItems,\n    ['delete']: deleteItem,\n    ['inherit']: inheritItem,\n    ['export']: exportItem,\n    ['create-folder']: createFolderItems,\n    ['create-task']: createTaskItem,\n  }\n\n  const getCellData = (cellId: string): TableCellContextData | undefined => {\n    const { rowId, colId } = parseCellId(cellId) || {}\n    if (!rowId || !colId) return undefined\n    const cellEntityData = getEntityById(rowId)\n    const attribField = attribs.find((attrib) => attrib.name === colId?.replace('attrib_', ''))\n    return {\n      cellId: cellId,\n      columnId: colId,\n      entityId: cellEntityData?.entityId || rowId,\n      entityType: cellEntityData?.entityType,\n      attribField: attribField,\n      isGroup: rowId.startsWith(GROUP_BY_ID),\n    }\n  }\n\n  const handleTableBodyContextMenu = (e: ContextEvent) => {\n    const target = e.target as HTMLElement\n    const tdEl = target.closest('td')\n    // get id of first child of td\n    const cellId = tdEl?.firstElementChild?.id\n\n    if (!cellId) return\n\n    const cellData = getCellData(cellId)\n\n    if (!cellData) return\n\n    let currentSelectedCells = Array.from(selectedCells)\n    // if selecting a cell outside of the current selection\n    if (!currentSelectedCells.includes(cellId) || !currentSelectedCells.length) {\n      currentSelectedCells = [cellId]\n      // update selection\n      selectCell(cellId, false, false)\n      focusCell(cellId)\n    }\n\n    const selectedCellsData = currentSelectedCells.flatMap((cellId) => getCellData(cellId) || [])\n    const selectedCellRows: string[] = []\n    const selectedCellColumns: string[] = []\n    const selectedCellFullRows: string[] = []\n    const selectedCellsGroups: string[] = [] // find cells that are group headers\n    for (const { entityId, columnId } of selectedCellsData) {\n      if (entityId && !selectedCellRows.includes(entityId)) selectedCellRows.push(entityId)\n      if (columnId && !selectedCellColumns.includes(columnId)) selectedCellColumns.push(columnId)\n      if (columnId === ROW_SELECTION_COLUMN_ID && !selectedCellFullRows.includes(entityId))\n        selectedCellFullRows.push(entityId)\n      if (entityId.startsWith(GROUP_BY_ID)) selectedCellsGroups.push(entityId)\n    }\n\n    const constructedMenuItems = contextMenuItems.flatMap((constructor) =>\n      typeof constructor === 'function'\n        ? constructor(\n            e,\n            cellData,\n            selectedCellsData,\n            {\n              selectedCells: currentSelectedCells, // all selected cells\n              selectedRows: selectedCellRows,\n              selectedColumns: selectedCellColumns,\n              selectedFullRows: selectedCellFullRows,\n              selectedGroups: selectedCellsGroups, // groups if any\n            },\n            {\n              history,\n            },\n          )\n        : builtInMenuItems[constructor]?.(\n            e,\n            cellData,\n            selectedCellsData,\n            {\n              selectedCells: currentSelectedCells, // all selected cells\n              selectedRows: selectedCellRows,\n              selectedColumns: selectedCellColumns,\n              selectedFullRows: selectedCellFullRows,\n              selectedGroups: selectedCellsGroups, // groups if any\n            },\n            { history },\n          ),\n    )\n\n    cellContextMenuShow(e, constructedMenuItems)\n  }\n\n  return { handleTableBodyContextMenu }\n}\n\nexport default useCellContextMenu\n"],"names":["_a","cellId"],"mappings":"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"}

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+const Expander = styled(ayonReactComponents.Button)`
+  background-color: unset;
+  padding: 2px !important;
+  cursor: pointer;
+`;
+const StyledGroupHeader = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  height: 100%;
+  width: 100%;
+  padding-right: 8px;
+`;
+const StyledContentWrapper = styled.div`
+  width: 100%;
+  height: 24px;
+  overflow: hidden;
+  position: relative;
+`;
+const StyledContentAbsolute = styled.div`
+  position: absolute;
+  inset: 0;
+`;
+const StyledContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-large);
+  padding: 2px 4px;
+  border-radius: var(--border-radius-m);
+  cursor: pointer;
+  overflow: hidden;
+  width: fit-content;
+  max-width: 100%;
+  height: 100%;
+
+  /* &:hover {
+    &,
+    .icon,
+    .path {
+      color: var(--md-sys-color-primary);
+    }
+  } */
+`;
+const StyledTextContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .path {
+    ${ayonReactComponents.theme.labelSmall}
+    margin-bottom: -4px;
+    color: var(--md-sys-color-outline);
+  }
+
+  span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+const StyledImg = styled.img`
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  object-fit: cover;
+`;
+const Count = styled.span`
+  color: var(--md-sys-color-outline);
+`;
+const GroupHeaderWidget = ({
+  id,
+  label,
+  name,
+  icon,
+  img,
+  count,
+  color,
+  isExpanded,
+  toggleExpanded
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(StyledGroupHeader, { id, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      Expander,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          toggleExpanded();
+        },
+        className: "expander",
+        icon: isExpanded ? "expand_more" : "chevron_right"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledContentWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledContentAbsolute, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(StyledContent, { children: [
+      img && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledImg, { src: img, alt: name, className: "img" }),
+      icon && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon, style: { color: color || void 0 } }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledTextContent, { style: { color: color || void 0 }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "label", children: label || name }) }),
+      count !== void 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Count, { children: count })
+    ] }) }) })
+  ] });
+};
+exports.GroupHeaderWidget = GroupHeaderWidget;
+//# sourceMappingURL=GroupHeaderWidget.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeaderWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/GroupHeaderWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n  background-color: unset;\n  padding: 2px !important;\n  cursor: pointer;\n`\n\nconst StyledGroupHeader = 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\nconst StyledImg = styled.img`\n  width: 24px;\n  height: 24px;\n  border-radius: 12px;\n  object-fit: cover;\n`\n\nconst Count = styled.span`\n  color: var(--md-sys-color-outline);\n`\n\ntype GroupHeaderProps = {\n  id: string\n  label: string\n  name: string\n  icon?: string | null\n  img?: string | null\n  color?: string | null\n  count?: number\n  isExpanded: boolean\n  toggleExpanded: () => void\n}\n\nexport const GroupHeaderWidget = ({\n  id,\n  label,\n  name,\n  icon,\n  img,\n  count,\n  color,\n  isExpanded,\n  toggleExpanded,\n}: GroupHeaderProps) => {\n  return (\n    <StyledGroupHeader id={id}>\n      <Expander\n        onClick={(e) => {\n          e.stopPropagation()\n          toggleExpanded()\n        }}\n        className=\"expander\"\n        icon={isExpanded ? 'expand_more' : 'chevron_right'}\n      />\n      <StyledContentWrapper>\n        <StyledContentAbsolute>\n          <StyledContent>\n            {img && <StyledImg src={img} alt={name} className=\"img\" />}\n            {icon && <Icon icon={icon} style={{ color: color || undefined }} />}\n            <StyledTextContent style={{ color: color || undefined }}>\n              <span className=\"label\">{label || name}</span>\n            </StyledTextContent>\n            {count !== undefined && <Count>{count}</Count>}\n          </StyledContent>\n        </StyledContentAbsolute>\n      </StyledContentWrapper>\n    </StyledGroupHeader>\n  )\n}\n"],"names":["Button","theme","jsxs","jsx","Icon"],"mappings":";;;;;AAGA,MAAM,WAAW,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUjC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqB7B,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM3BC,0BAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYtB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAgBd,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AAEpB,SAAAC,kDAAC,qBAAkB,IACjB,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACH,yBAAA;AAAA,QACjB;AAAA,QACA,WAAU;AAAA,QACV,MAAM,aAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC;AAAA,IACCA,2BAAAA,kBAAAA,IAAA,sBAAA,EACC,UAACA,iDAAA,uBAAA,EACC,4DAAC,eACE,EAAA,UAAA;AAAA,MAAA,wDAAQ,WAAU,EAAA,KAAK,KAAK,KAAK,MAAM,WAAU,OAAM;AAAA,MACvD,yDAASC,oBAAK,MAAA,EAAA,MAAY,OAAO,EAAE,OAAO,SAAS,OAAA,GAAa;AAAA,MAChED,2BAAA,kBAAA,IAAA,mBAAA,EAAkB,OAAO,EAAE,OAAO,SAAS,OAAA,GAC1C,UAAAA,2BAAA,kBAAA,IAAC,QAAK,EAAA,WAAU,SAAS,UAAA,SAAS,KAAK,CAAA,GACzC;AAAA,MACC,UAAU,UAAcA,2BAAA,kBAAA,IAAA,OAAA,EAAO,UAAM,MAAA,CAAA;AAAA,IAAA,EACxC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

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

@@ -0,0 +1,108 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { Button, theme, Icon } from "@ynput/ayon-react-components";
+import styled from "styled-components";
+const Expander = styled(Button)`
+  background-color: unset;
+  padding: 2px !important;
+  cursor: pointer;
+`;
+const StyledGroupHeader = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  height: 100%;
+  width: 100%;
+  padding-right: 8px;
+`;
+const StyledContentWrapper = styled.div`
+  width: 100%;
+  height: 24px;
+  overflow: hidden;
+  position: relative;
+`;
+const StyledContentAbsolute = styled.div`
+  position: absolute;
+  inset: 0;
+`;
+const StyledContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-large);
+  padding: 2px 4px;
+  border-radius: var(--border-radius-m);
+  cursor: pointer;
+  overflow: hidden;
+  width: fit-content;
+  max-width: 100%;
+  height: 100%;
+
+  /* &:hover {
+    &,
+    .icon,
+    .path {
+      color: var(--md-sys-color-primary);
+    }
+  } */
+`;
+const StyledTextContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .path {
+    ${theme.labelSmall}
+    margin-bottom: -4px;
+    color: var(--md-sys-color-outline);
+  }
+
+  span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+const StyledImg = styled.img`
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  object-fit: cover;
+`;
+const Count = styled.span`
+  color: var(--md-sys-color-outline);
+`;
+const GroupHeaderWidget = ({
+  id,
+  label,
+  name,
+  icon,
+  img,
+  count,
+  color,
+  isExpanded,
+  toggleExpanded
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledGroupHeader, { id, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Expander,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          toggleExpanded();
+        },
+        className: "expander",
+        icon: isExpanded ? "expand_more" : "chevron_right"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledContentWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledContentAbsolute, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledContent, { children: [
+      img && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledImg, { src: img, alt: name, className: "img" }),
+      icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon, style: { color: color || void 0 } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTextContent, { style: { color: color || void 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "label", children: label || name }) }),
+      count !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Count, { children: count })
+    ] }) }) })
+  ] });
+};
+export {
+  GroupHeaderWidget
+};
+//# sourceMappingURL=GroupHeaderWidget.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeaderWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/GroupHeaderWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n  background-color: unset;\n  padding: 2px !important;\n  cursor: pointer;\n`\n\nconst StyledGroupHeader = 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\nconst StyledImg = styled.img`\n  width: 24px;\n  height: 24px;\n  border-radius: 12px;\n  object-fit: cover;\n`\n\nconst Count = styled.span`\n  color: var(--md-sys-color-outline);\n`\n\ntype GroupHeaderProps = {\n  id: string\n  label: string\n  name: string\n  icon?: string | null\n  img?: string | null\n  color?: string | null\n  count?: number\n  isExpanded: boolean\n  toggleExpanded: () => void\n}\n\nexport const GroupHeaderWidget = ({\n  id,\n  label,\n  name,\n  icon,\n  img,\n  count,\n  color,\n  isExpanded,\n  toggleExpanded,\n}: GroupHeaderProps) => {\n  return (\n    <StyledGroupHeader id={id}>\n      <Expander\n        onClick={(e) => {\n          e.stopPropagation()\n          toggleExpanded()\n        }}\n        className=\"expander\"\n        icon={isExpanded ? 'expand_more' : 'chevron_right'}\n      />\n      <StyledContentWrapper>\n        <StyledContentAbsolute>\n          <StyledContent>\n            {img && <StyledImg src={img} alt={name} className=\"img\" />}\n            {icon && <Icon icon={icon} style={{ color: color || undefined }} />}\n            <StyledTextContent style={{ color: color || undefined }}>\n              <span className=\"label\">{label || name}</span>\n            </StyledTextContent>\n            {count !== undefined && <Count>{count}</Count>}\n          </StyledContent>\n        </StyledContentAbsolute>\n      </StyledContentWrapper>\n    </StyledGroupHeader>\n  )\n}\n"],"names":["jsxs","jsx"],"mappings":";;;AAGA,MAAM,WAAW,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUjC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqB7B,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM3B,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYtB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAgBd,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AAEpB,SAAAA,uCAAC,qBAAkB,IACjB,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACH,yBAAA;AAAA,QACjB;AAAA,QACA,WAAU;AAAA,QACV,MAAM,aAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC;AAAA,IACCA,kCAAAA,IAAA,sBAAA,EACC,UAACA,sCAAA,uBAAA,EACC,iDAAC,eACE,EAAA,UAAA;AAAA,MAAA,6CAAQ,WAAU,EAAA,KAAK,KAAK,KAAK,MAAM,WAAU,OAAM;AAAA,MACvD,8CAAS,MAAK,EAAA,MAAY,OAAO,EAAE,OAAO,SAAS,OAAA,GAAa;AAAA,MAChEA,kCAAA,IAAA,mBAAA,EAAkB,OAAO,EAAE,OAAO,SAAS,OAAA,GAC1C,UAAAA,kCAAA,IAAC,QAAK,EAAA,WAAU,SAAS,UAAA,SAAS,KAAK,CAAA,GACzC;AAAA,MACC,UAAU,UAAcA,kCAAA,IAAA,OAAA,EAAO,UAAM,MAAA,CAAA;AAAA,IAAA,EACxC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,29 @@
+"use strict";
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+const LoadMore = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  button {
+    width: 100%;
+  }
+`;
+const LoadMoreWidget = ({ label = "Load more", id, onLoadMore }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(LoadMore, { id: `load-more-${id}`, className: "load-more", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    ayonReactComponents.Button,
+    {
+      label,
+      onClick: (e) => {
+        e.stopPropagation();
+        onLoadMore(id);
+      },
+      variant: "tonal"
+    }
+  ) });
+};
+module.exports = LoadMoreWidget;
+//# sourceMappingURL=LoadMoreWidget.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMoreWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/LoadMoreWidget.tsx"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\n\nconst LoadMore = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  button {\n    width: 100%;\n  }\n`\n\ninterface LoadMoreWidgetProps {\n  id: string | undefined\n  label: string\n  onLoadMore: (id?: string) => void\n}\n\nconst LoadMoreWidget: FC<LoadMoreWidgetProps> = ({ label = 'Load more', id, onLoadMore }) => {\n  return (\n    <LoadMore id={`load-more-${id}`} className=\"load-more\">\n      <Button\n        label={label}\n        onClick={(e) => {\n          e.stopPropagation()\n          onLoadMore(id)\n        }}\n        variant=\"tonal\"\n      />\n    </LoadMore>\n  )\n}\n\nexport default LoadMoreWidget\n"],"names":["jsx","Button"],"mappings":";;;;AAIA,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,MAAM,iBAA0C,CAAC,EAAE,QAAQ,aAAa,IAAI,iBAAiB;AAC3F,0DACG,UAAS,EAAA,IAAI,aAAa,EAAE,IAAI,WAAU,aACzC,UAAAA,2BAAA,kBAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,mBAAW,EAAE;AAAA,MACf;AAAA,MACA,SAAQ;AAAA,IAAA;AAAA,EAAA,GAEZ;AAEJ;;"}

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

@@ -0,0 +1,30 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { Button } from "@ynput/ayon-react-components";
+import styled from "styled-components";
+const LoadMore = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  button {
+    width: 100%;
+  }
+`;
+const LoadMoreWidget = ({ label = "Load more", id, onLoadMore }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(LoadMore, { id: `load-more-${id}`, className: "load-more", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      label,
+      onClick: (e) => {
+        e.stopPropagation();
+        onLoadMore(id);
+      },
+      variant: "tonal"
+    }
+  ) });
+};
+export {
+  LoadMoreWidget as default
+};
+//# sourceMappingURL=LoadMoreWidget.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMoreWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/LoadMoreWidget.tsx"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\n\nconst LoadMore = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  button {\n    width: 100%;\n  }\n`\n\ninterface LoadMoreWidgetProps {\n  id: string | undefined\n  label: string\n  onLoadMore: (id?: string) => void\n}\n\nconst LoadMoreWidget: FC<LoadMoreWidgetProps> = ({ label = 'Load more', id, onLoadMore }) => {\n  return (\n    <LoadMore id={`load-more-${id}`} className=\"load-more\">\n      <Button\n        label={label}\n        onClick={(e) => {\n          e.stopPropagation()\n          onLoadMore(id)\n        }}\n        variant=\"tonal\"\n      />\n    </LoadMore>\n  )\n}\n\nexport default LoadMoreWidget\n"],"names":["jsx"],"mappings":";;;AAIA,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,MAAM,iBAA0C,CAAC,EAAE,QAAQ,aAAa,IAAI,iBAAiB;AAC3F,+CACG,UAAS,EAAA,IAAI,aAAa,EAAE,IAAI,WAAU,aACzC,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,mBAAW,EAAE;AAAA,MACf;AAAA,MACA,SAAQ;AAAA,IAAA;AAAA,EAAA,GAEZ;AAEJ;"}

package/dist/shared/src/containers/RepresentationsList/RepresentationsList.cjs.js

@@ -96,6 +96,7 @@ require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
 require("../../context/AddonProjectContext.cjs.js");
 require("../../context/AddonContext.cjs.js");
+require("../../context/PowerpackContext.cjs.js");
 require("../../components/ReviewableCard/ReviewableCard.cjs.js");
 require("../../components/ReviewableProgressCard/ReviewableProgressCard.styled.cjs.js");
 require("../../components/FileThumbnail/FileThumbnail.cjs.js");
@@ -139,6 +140,7 @@ require("../ProjectTreeTable/context/CellEditingContext.cjs.js");
 require("../ProjectTreeTable/context/ClipboardContext.cjs.js");
 require("../ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
 require("../ProjectTreeTable/context/ProjectDataContext.cjs.js");
+require("../ProjectTreeTable/context/ProjectTableModulesContext.cjs.js");
 require("@tanstack/react-table");
 require("../ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
 require("../ProjectTreeTable/widgets/DateWidget.cjs.js");
@@ -147,10 +149,12 @@ require("../ProjectTreeTable/widgets/TextWidget.cjs.js");
 require("../ProjectTreeTable/widgets/BooleanWidget.cjs.js");
 require("../ProjectTreeTable/widgets/CellWidget.cjs.js");
 require("../ProjectTreeTable/widgets/EntityNameWidget.cjs.js");
+require("../ProjectTreeTable/widgets/GroupHeaderWidget.cjs.js");
 require("../ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");
 require("../ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
 require("../ProjectTreeTable/components/SelectionCell.cjs.js");
 require("../ProjectTreeTable/components/RowSelectionHeader.cjs.js");
+require("../ProjectTreeTable/widgets/LoadMoreWidget.cjs.js");
 const versionsToRepresentations = require("./versionsToRepresentations.cjs.js");
 require("../DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../../../../_virtual/runtime.cjs.js");
@@ -173,10 +177,14 @@ require("../../components/EntityPath/SegmentProvider.cjs.js");
 require("../../components/DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");
 require("../../components/Watchers/Watchers.cjs.js");
 require("../../components/ProjectTableSettings/ProjectTableSettings.cjs.js");
+require("../../components/Powerpack/PowerpackButton.cjs.js");
+require("../../components/Powerpack/PricingLink.cjs.js");
+require("../../components/Powerpack/PowerpackDialog.styled.cjs.js");
 require("../../components/SettingsPanel/SettingsPanel.cjs.js");
 require("../../components/SettingsPanel/SettingsPanelItemTemplate.cjs.js");
 require("../../components/AttributeEditor/components/MinMaxField.cjs.js");
 require("../../components/EnumEditor/EnumEditor.styled.cjs.js");
+require("../../components/SearchFilter/filterDates.cjs.js");
 const columns = [
   {
     field: "name",

package/dist/shared/src/containers/RepresentationsList/RepresentationsList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RepresentationsList.cjs.js","sources":["../../../../../src/containers/RepresentationsList/RepresentationsList.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { TablePanel } from '@ynput/ayon-react-components'\n\nimport { TreeTable } from 'primereact/treetable'\nimport { Column } from 'primereact/column'\n\nimport { groupResult } from '@shared/util'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { DetailsDialog } from '@shared/components'\nimport versionsToRepresentations from './versionsToRepresentations'\nimport { DetailsPanelEntityData } from '@shared/api'\n\nconst columns = [\n  {\n    field: 'name',\n    header: 'Name',\n    width: 90,\n    expander: true,\n  },\n  {\n    field: 'folderName',\n    header: 'Folder',\n    width: 130,\n  },\n  {\n    field: 'productName',\n    header: 'Product',\n    width: 130,\n  },\n  {\n    field: 'Product type',\n    header: 'productType',\n    width: 110,\n  },\n]\n\ntype Props = {\n  entities: DetailsPanelEntityData[]\n}\n\nexport const RepresentationsList = ({ entities = [] }: Props) => {\n  // merge all entities data into one array of entities\n  const representations = useMemo(() => versionsToRepresentations(entities) || [], [entities])\n\n  const [showDetail, setShowDetail] = useState<false | string>(false)\n  const showDetailProjectName = representations.find((rep) => rep.id === showDetail)?.projectName\n\n  const [selected, setSelected] = useState<string[]>([])\n\n  const data = useMemo(() => {\n    // @ts-expect-error - groupResult is not typed\n    return groupResult(representations, 'name')\n  }, [representations])\n\n  const onRepSelectionChange = (entityId: string) => {\n    // set focused state\n    setSelected([entityId])\n  }\n\n  const onRowClick = (e: any) => {\n    onRepSelectionChange(e.node.data.id)\n  }\n\n  const ctxMenuItems = (id: string) => [\n    {\n      label: 'Representation detail',\n      command: () => setShowDetail(id),\n      icon: 'database',\n    },\n  ]\n\n  const [ctxMenuShow] = useCreateContextMenu([])\n\n  const handleContextMenu = (e: any) => {\n    const id = e.node.data.id\n\n    if (id) {\n      // update focused representations\n      onRepSelectionChange(id)\n      // open context menu\n      ctxMenuShow(e.originalEvent, ctxMenuItems(id))\n    }\n  }\n\n  return (\n    <>\n      <TablePanel>\n        <TreeTable\n          scrollable\n          scrollHeight=\"100%\"\n          value={data}\n          emptyMessage=\"No representation found\"\n          selectionMode=\"single\"\n          selectionKeys={selected[0]}\n          onRowClick={onRowClick}\n          onContextMenu={handleContextMenu}\n        >\n          {columns.map((col) => {\n            return (\n              <Column\n                key={col.field}\n                field={col.field}\n                header={col.header}\n                expander={col.expander}\n                style={{ width: col.width }}\n              />\n            )\n          })}\n        </TreeTable>\n      </TablePanel>\n\n      {showDetail && (\n        <DetailsDialog\n          projectName={showDetailProjectName}\n          entityType={'representation'}\n          entityIds={[showDetail]}\n          visible={!!showDetail}\n          onHide={() => setShowDetail(false)}\n        />\n      )}\n    </>\n  )\n}\n"],"names":["useMemo","useState","groupResult","useCreateContextMenu","jsxs","Fragment","jsx","TablePanel","TreeTable","Column","DetailsDialog"],"mappings":"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"}
+{"version":3,"file":"RepresentationsList.cjs.js","sources":["../../../../../src/containers/RepresentationsList/RepresentationsList.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { TablePanel } from '@ynput/ayon-react-components'\n\nimport { TreeTable } from 'primereact/treetable'\nimport { Column } from 'primereact/column'\n\nimport { groupResult } from '@shared/util'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { DetailsDialog } from '@shared/components'\nimport versionsToRepresentations from './versionsToRepresentations'\nimport { DetailsPanelEntityData } from '@shared/api'\n\nconst columns = [\n  {\n    field: 'name',\n    header: 'Name',\n    width: 90,\n    expander: true,\n  },\n  {\n    field: 'folderName',\n    header: 'Folder',\n    width: 130,\n  },\n  {\n    field: 'productName',\n    header: 'Product',\n    width: 130,\n  },\n  {\n    field: 'Product type',\n    header: 'productType',\n    width: 110,\n  },\n]\n\ntype Props = {\n  entities: DetailsPanelEntityData[]\n}\n\nexport const RepresentationsList = ({ entities = [] }: Props) => {\n  // merge all entities data into one array of entities\n  const representations = useMemo(() => versionsToRepresentations(entities) || [], [entities])\n\n  const [showDetail, setShowDetail] = useState<false | string>(false)\n  const showDetailProjectName = representations.find((rep) => rep.id === showDetail)?.projectName\n\n  const [selected, setSelected] = useState<string[]>([])\n\n  const data = useMemo(() => {\n    // @ts-expect-error - groupResult is not typed\n    return groupResult(representations, 'name')\n  }, [representations])\n\n  const onRepSelectionChange = (entityId: string) => {\n    // set focused state\n    setSelected([entityId])\n  }\n\n  const onRowClick = (e: any) => {\n    onRepSelectionChange(e.node.data.id)\n  }\n\n  const ctxMenuItems = (id: string) => [\n    {\n      label: 'Representation detail',\n      command: () => setShowDetail(id),\n      icon: 'database',\n    },\n  ]\n\n  const [ctxMenuShow] = useCreateContextMenu([])\n\n  const handleContextMenu = (e: any) => {\n    const id = e.node.data.id\n\n    if (id) {\n      // update focused representations\n      onRepSelectionChange(id)\n      // open context menu\n      ctxMenuShow(e.originalEvent, ctxMenuItems(id))\n    }\n  }\n\n  return (\n    <>\n      <TablePanel>\n        <TreeTable\n          scrollable\n          scrollHeight=\"100%\"\n          value={data}\n          emptyMessage=\"No representation found\"\n          selectionMode=\"single\"\n          selectionKeys={selected[0]}\n          onRowClick={onRowClick}\n          onContextMenu={handleContextMenu}\n        >\n          {columns.map((col) => {\n            return (\n              <Column\n                key={col.field}\n                field={col.field}\n                header={col.header}\n                expander={col.expander}\n                style={{ width: col.width }}\n              />\n            )\n          })}\n        </TreeTable>\n      </TablePanel>\n\n      {showDetail && (\n        <DetailsDialog\n          projectName={showDetailProjectName}\n          entityType={'representation'}\n          entityIds={[showDetail]}\n          visible={!!showDetail}\n          onHide={() => setShowDetail(false)}\n        />\n      )}\n    </>\n  )\n}\n"],"names":["useMemo","useState","groupResult","useCreateContextMenu","jsxs","Fragment","jsx","TablePanel","TreeTable","Column","DetailsDialog"],"mappings":"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"}