@ynput/ayon-frontend-shared 0.2.19 → 0.2.21

package/dist/shared/src/containers/ProjectTreeTable/utils/cellUtils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"cellUtils.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/utils/cellUtils.ts"],"sourcesContent":["/**\n * Shared cell utilities for table operations\n */\n\nimport { parseRowId } from '../context'\nimport { EMapResult, EntitiesMap } from '../types'\n\n// Type definitions for cell identifiers\nexport type CellId = string\nexport type RowId = string\nexport type ColId = string\n\n// Cell position in the grid\nexport interface CellPosition {\n  rowId: RowId\n  colId: ColId\n}\n\n// Cell border position flags - used for determining which borders to show\nexport enum BorderPosition {\n  None = 0,\n  Top = 1 << 0,\n  Right = 1 << 1,\n  Bottom = 1 << 2,\n  Left = 1 << 3,\n  All = Top | Right | Bottom | Left,\n}\n\n/**\n * Create a standardized cell ID from row and column IDs\n */\nexport const getCellId = (rowId: RowId, colId: ColId): CellId => `cell-${rowId}-${colId}`\n\n/**\n * Parse a cell ID to extract row and column IDs\n * @returns CellPosition or null if invalid format\n */\nexport const parseCellId = (cellId: CellId): CellPosition | null => {\n  const match = cellId.match(/^cell-(.+)-(.+)$/)\n  if (!match) return null\n  return { rowId: match[1], colId: match[2] }\n}\n\nexport const getCellValue = (obj: any, path: string): any => {\n  if (!obj || !path) return undefined\n\n  const parts = path.split('_')\n  let current = obj\n\n  for (const part of parts) {\n    if (current && typeof current === 'object' && part in current) {\n      current = current[part]\n    } else {\n      return undefined // Return undefined if any part of the path is invalid\n    }\n  }\n\n  return current\n}\n\n/**\n * Determines which borders to display for a selected cell\n * based on its position within the selection grid\n *\n * @param rowIndex Current cell's row index\n * @param colIndex Current cell's column index\n * @param selectedCells 2D array representing selection state (true = selected)\n * @returns BorderPosition flags indicating which borders to display\n */\nexport const getCellBorders = (\n  rowIndex: number,\n  colIndex: number,\n  selectedCells: boolean[][],\n): BorderPosition => {\n  if (!selectedCells[rowIndex]?.[colIndex]) {\n    return BorderPosition.None\n  }\n\n  let borders = BorderPosition.None\n\n  // Check top border\n  if (rowIndex === 0 || !selectedCells[rowIndex - 1]?.[colIndex]) {\n    borders |= BorderPosition.Top\n  }\n\n  // Check right border\n  if (!selectedCells[rowIndex]?.[colIndex + 1]) {\n    borders |= BorderPosition.Right\n  }\n\n  // Check bottom border\n  if (!selectedCells[rowIndex + 1]?.[colIndex]) {\n    borders |= BorderPosition.Bottom\n  }\n\n  // Check left border\n  if (colIndex === 0 || !selectedCells[rowIndex]?.[colIndex - 1]) {\n    borders |= BorderPosition.Left\n  }\n\n  return borders\n}\n\n/**\n * Converts border position flags to CSS classes for shadow styling\n */\nexport const getBorderClasses = (borders: BorderPosition): string[] => {\n  const classes: string[] = []\n\n  if (borders & BorderPosition.Top) classes.push('shadow-top')\n  if (borders & BorderPosition.Right) classes.push('shadow-right')\n  if (borders & BorderPosition.Bottom) classes.push('shadow-bottom')\n  if (borders & BorderPosition.Left) classes.push('shadow-left')\n\n  return classes\n}\n\n// get a entity from it's id\nexport const getEntityDataById = <T extends 'folder' | 'task' | 'product' | 'version'>(\n  id: string,\n  entitiesMap: EntitiesMap,\n) => entitiesMap.get(parseRowId(id)) as EMapResult<T> | undefined\n"],"names":["BorderPosition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBY,IAAA,mCAAAA,oBAAL;AACLA,kBAAAA,gBAAA,UAAO,CAAP,IAAA;AACAA,kBAAAA,gBAAA,SAAM,CAAN,IAAA;AACAA,kBAAAA,gBAAA,WAAQ,CAAR,IAAA;AACAA,kBAAAA,gBAAA,YAAS,CAAT,IAAA;AACAA,kBAAAA,gBAAA,UAAO,CAAP,IAAA;AACAA,kBAAAA,gBAAA,SAAM,EAAN,IAAA;AANUA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAYL,MAAM,YAAY,CAAC,OAAc,UAAyB,QAAQ,KAAK,IAAI,KAAK;AAM1E,MAAA,cAAc,CAAC,WAAwC;AAC5D,QAAA,QAAQ,OAAO,MAAM,kBAAkB;AACzC,MAAA,CAAC,MAAc,QAAA;AACZ,SAAA,EAAE,OAAO,MAAM,CAAC,GAAG,OAAO,MAAM,CAAC,EAAE;AAC5C;AAEa,MAAA,eAAe,CAAC,KAAU,SAAsB;AAC3D,MAAI,CAAC,OAAO,CAAC,KAAa,QAAA;AAEpB,QAAA,QAAQ,KAAK,MAAM,GAAG;AAC5B,MAAI,UAAU;AAEd,aAAW,QAAQ,OAAO;AACxB,QAAI,WAAW,OAAO,YAAY,YAAY,QAAQ,SAAS;AAC7D,gBAAU,QAAQ,IAAI;AAAA,IAAA,OACjB;AACE,aAAA;AAAA,IAAA;AAAA,EACT;AAGK,SAAA;AACT;AAWO,MAAM,iBAAiB,CAC5B,UACA,UACA,kBACmB;;AACnB,MAAI,GAAC,mBAAc,QAAQ,MAAtB,mBAA0B,YAAW;AACjC,WAAA;AAAA,EAAA;AAGT,MAAI,UAAU;AAGV,MAAA,aAAa,KAAK,GAAC,mBAAc,WAAW,CAAC,MAA1B,mBAA8B,YAAW;AACnD,eAAA;AAAA,EAAA;AAIb,MAAI,GAAC,mBAAc,QAAQ,MAAtB,mBAA0B,WAAW,KAAI;AACjC,eAAA;AAAA,EAAA;AAIb,MAAI,GAAC,mBAAc,WAAW,CAAC,MAA1B,mBAA8B,YAAW;AACjC,eAAA;AAAA,EAAA;AAIT,MAAA,aAAa,KAAK,GAAC,mBAAc,QAAQ,MAAtB,mBAA0B,WAAW,KAAI;AACnD,eAAA;AAAA,EAAA;AAGN,SAAA;AACT;AAKa,MAAA,mBAAmB,CAAC,YAAsC;AACrE,QAAM,UAAoB,CAAC;AAE3B,MAAI,UAAU,EAA4B,SAAA,KAAK,YAAY;AAC3D,MAAI,UAAU,EAA8B,SAAA,KAAK,cAAc;AAC/D,MAAI,UAAU,EAA+B,SAAA,KAAK,eAAe;AACjE,MAAI,UAAU,EAA6B,SAAA,KAAK,aAAa;AAEtD,SAAA;AACT;AAGa,MAAA,oBAAoB,CAC/B,IACA,gBACG,YAAY,IAAI,WAAW,EAAE,CAAC;"}
+{"version":3,"file":"cellUtils.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/utils/cellUtils.ts"],"sourcesContent":["/**\n * Shared cell utilities for table operations\n */\n\nimport { parseRowId } from '../context'\nimport { EMapResult, EntitiesMap } from '../types'\n\n// Type definitions for cell identifiers\nexport type CellId = string\nexport type RowId = string\nexport type ColId = string\n\n// Cell position in the grid\nexport interface CellPosition {\n  rowId: RowId\n  colId: ColId\n}\n\n// Cell border position flags - used for determining which borders to show\nexport enum BorderPosition {\n  None = 0,\n  Top = 1 << 0,\n  Right = 1 << 1,\n  Bottom = 1 << 2,\n  Left = 1 << 3,\n  All = Top | Right | Bottom | Left,\n}\n\n/**\n * Create a standardized cell ID from row and column IDs\n */\nexport const getCellId = (rowId: RowId, colId: ColId): CellId => `cell-${rowId}-${colId}`\n\n/**\n * Parse a cell ID to extract row and column IDs\n * @returns CellPosition or null if invalid format\n */\nexport const parseCellId = (cellId: CellId): CellPosition | null => {\n  const match = cellId.match(/^cell-(.+)-(.+)$/)\n  if (!match) return null\n  return { rowId: match[1], colId: match[2] }\n}\n\nexport const getCellValue = (obj: any, path: string): any => {\n  if (!obj || !path) return undefined\n\n  const parts = path.split('_')\n  let current = obj\n\n  for (const part of parts) {\n    if (current && typeof current === 'object' && part in current) {\n      current = current[part]\n    } else {\n      return undefined // Return undefined if any part of the path is invalid\n    }\n  }\n\n  return current\n}\n\n/**\n * Determines which borders to display for a selected cell\n * based on its position within the selection grid\n *\n * @param rowIndex Current cell's row index\n * @param colIndex Current cell's column index\n * @param selectedCells 2D array representing selection state (true = selected)\n * @returns BorderPosition flags indicating which borders to display\n */\nexport const getCellBorders = (\n  rowIndex: number,\n  colIndex: number,\n  selectedCells: boolean[][],\n): BorderPosition => {\n  if (!selectedCells[rowIndex]?.[colIndex]) {\n    return BorderPosition.None\n  }\n\n  let borders = BorderPosition.None\n\n  // Check top border\n  if (rowIndex === 0 || !selectedCells[rowIndex - 1]?.[colIndex]) {\n    borders |= BorderPosition.Top\n  }\n\n  // Check right border\n  if (!selectedCells[rowIndex]?.[colIndex + 1]) {\n    borders |= BorderPosition.Right\n  }\n\n  // Check bottom border\n  if (!selectedCells[rowIndex + 1]?.[colIndex]) {\n    borders |= BorderPosition.Bottom\n  }\n\n  // Check left border\n  if (colIndex === 0 || !selectedCells[rowIndex]?.[colIndex - 1]) {\n    borders |= BorderPosition.Left\n  }\n\n  return borders\n}\n\n/**\n * Converts border position flags to CSS classes for shadow styling\n */\nexport const getBorderClasses = (borders: BorderPosition): string[] => {\n  const classes: string[] = []\n\n  if (borders & BorderPosition.Top) classes.push('shadow-top')\n  if (borders & BorderPosition.Right) classes.push('shadow-right')\n  if (borders & BorderPosition.Bottom) classes.push('shadow-bottom')\n  if (borders & BorderPosition.Left) classes.push('shadow-left')\n\n  return classes\n}\n\n// get a entity from it's id\nexport const getEntityDataById = <T extends 'folder' | 'task' | 'product' | 'version'>(\n  id: string,\n  entitiesMap: EntitiesMap,\n) => entitiesMap.get(parseRowId(id)) as EMapResult<T> | undefined\n"],"names":["BorderPosition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBY,IAAA,mCAAAA,oBAAL;AACLA,kBAAAA,gBAAA,UAAO,CAAP,IAAA;AACAA,kBAAAA,gBAAA,SAAM,CAAN,IAAA;AACAA,kBAAAA,gBAAA,WAAQ,CAAR,IAAA;AACAA,kBAAAA,gBAAA,YAAS,CAAT,IAAA;AACAA,kBAAAA,gBAAA,UAAO,CAAP,IAAA;AACAA,kBAAAA,gBAAA,SAAM,EAAN,IAAA;AANUA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAYL,MAAM,YAAY,CAAC,OAAc,UAAyB,QAAQ,KAAK,IAAI,KAAK;AAM1E,MAAA,cAAc,CAAC,WAAwC;AAC5D,QAAA,QAAQ,OAAO,MAAM,kBAAkB;AACzC,MAAA,CAAC,MAAc,QAAA;AACZ,SAAA,EAAE,OAAO,MAAM,CAAC,GAAG,OAAO,MAAM,CAAC,EAAE;AAC5C;AAEa,MAAA,eAAe,CAAC,KAAU,SAAsB;AAC3D,MAAI,CAAC,OAAO,CAAC,KAAa,QAAA;AAEpB,QAAA,QAAQ,KAAK,MAAM,GAAG;AAC5B,MAAI,UAAU;AAEd,aAAW,QAAQ,OAAO;AACxB,QAAI,WAAW,OAAO,YAAY,YAAY,QAAQ,SAAS;AAC7D,gBAAU,QAAQ,IAAI;AAAA,IAAA,OACjB;AACE,aAAA;AAAA,IAAA;AAAA,EACT;AAGK,SAAA;AACT;AAWO,MAAM,iBAAiB,CAC5B,UACA,UACA,kBACmB;;AACnB,MAAI,GAAC,mBAAc,QAAQ,MAAtB,mBAA0B,YAAW;AACjC,WAAA;AAAA,EAAA;AAGT,MAAI,UAAU;AAGV,MAAA,aAAa,KAAK,GAAC,mBAAc,WAAW,CAAC,MAA1B,mBAA8B,YAAW;AACnD,eAAA;AAAA,EAAA;AAIb,MAAI,GAAC,mBAAc,QAAQ,MAAtB,mBAA0B,WAAW,KAAI;AACjC,eAAA;AAAA,EAAA;AAIb,MAAI,GAAC,mBAAc,WAAW,CAAC,MAA1B,mBAA8B,YAAW;AACjC,eAAA;AAAA,EAAA;AAIT,MAAA,aAAa,KAAK,GAAC,mBAAc,QAAQ,MAAtB,mBAA0B,WAAW,KAAI;AACnD,eAAA;AAAA,EAAA;AAGN,SAAA;AACT;AAKa,MAAA,mBAAmB,CAAC,YAAsC;AACrE,QAAM,UAAoB,CAAC;AAE3B,MAAI,UAAU,EAA4B,SAAA,KAAK,YAAY;AAC3D,MAAI,UAAU,EAA8B,SAAA,KAAK,cAAc;AAC/D,MAAI,UAAU,EAA+B,SAAA,KAAK,eAAe;AACjE,MAAI,UAAU,EAA6B,SAAA,KAAK,aAAa;AAEtD,SAAA;AACT;AAGa,MAAA,oBAAoB,CAC/B,IACA,gBACG,YAAY,IAAI,WAAW,EAAE,CAAC;"}

package/dist/shared/src/containers/ProjectTreeTable/utils/queryFilterToClientFilter.cjs.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const queryFilterToClientFilter = (queryFilter, filterOptions) => {
+  if (!(queryFilter == null ? void 0 : queryFilter.conditions) || queryFilter.conditions.length === 0) {
+    return [];
+  }
+  const filters = [];
+  const processedConditions = /* @__PURE__ */ new Set();
+  queryFilter.conditions.forEach((condition) => {
+    if ("key" in condition) {
+      const filter = convertConditionToFilter(condition, filterOptions, processedConditions);
+      if (filter) {
+        filters.push(filter);
+      }
+    } else {
+      const nestedFilters = queryFilterToClientFilter(condition, filterOptions);
+      filters.push(...nestedFilters);
+    }
+  });
+  return filters;
+};
+const convertConditionToFilter = (condition, filterOptions, processedConditions) => {
+  const { key, value, operator } = condition;
+  const filterOption = findFilterOption(key, filterOptions);
+  if (!filterOption) {
+    return null;
+  }
+  const conditionKey = `${key}_${operator}_${JSON.stringify(value)}`;
+  if (processedConditions.has(conditionKey)) {
+    return null;
+  }
+  processedConditions.add(conditionKey);
+  const filterValues = convertConditionValueToFilterValues(value, operator, filterOption);
+  const inverted = isInvertedOperator(operator, filterOption.type);
+  const filterOperator = getFilterOperator(operator, filterOption.type);
+  const filter = {
+    id: filterOption.id,
+    type: filterOption.type,
+    label: filterOption.label,
+    inverted,
+    operator: filterOperator,
+    icon: filterOption.icon,
+    values: filterValues,
+    isCustom: filterOption.allowsCustomValues,
+    singleSelect: filterOption.singleSelect
+  };
+  return filter;
+};
+const findFilterOption = (key, filterOptions) => {
+  let option = filterOptions.find((opt) => opt.id === key);
+  if (option) return option;
+  option = filterOptions.find(
+    (opt) => opt.id.endsWith(key) || opt.id.replace(/^[^.]*\./, "") === key || opt.id.split("_").pop() === key
+  );
+  if (option) return option;
+  option = filterOptions.find((opt) => {
+    var _a;
+    return ((_a = opt.label) == null ? void 0 : _a.toLowerCase()) === key.toLowerCase();
+  });
+  return option;
+};
+const convertConditionValueToFilterValues = (value, operator, filterOption) => {
+  if (operator === "isnull" || operator === "notnull") {
+    return operator === "isnull" ? [{ id: "noValue", label: "No Value" }] : [{ id: "hasValue", label: "Has Value" }];
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    if (operator === "eq") {
+      return [{ id: "noValue", label: "No Value" }];
+    } else if (operator === "ne") {
+      return [{ id: "hasValue", label: "Has Value" }];
+    }
+  }
+  if (value === void 0 || value === null) {
+    return [];
+  }
+  const values = Array.isArray(value) ? value : [value];
+  return values.map((val) => {
+    var _a;
+    const stringValue = String(val);
+    const existingValue = (_a = filterOption.values) == null ? void 0 : _a.find((v) => v.id === stringValue);
+    if (existingValue) {
+      return existingValue;
+    }
+    return {
+      id: stringValue,
+      label: stringValue,
+      isCustom: true
+    };
+  });
+};
+const isInvertedOperator = (operator, type) => {
+  const invertedOperators = ["ne", "notin", "excludes", "excludesall", "excludesany", "notnull"];
+  return operator ? invertedOperators.includes(operator) : false;
+};
+const getFilterOperator = (operator, type) => {
+  if (type == null ? void 0 : type.startsWith("list_of_")) {
+    if (operator === "includesall" || operator === "excludesall") {
+      return "AND";
+    }
+    return "OR";
+  }
+  return "OR";
+};
+exports.default = queryFilterToClientFilter;
+exports.queryFilterToClientFilter = queryFilterToClientFilter;
+//# sourceMappingURL=queryFilterToClientFilter.cjs.js.map

package/dist/shared/src/containers/ProjectTreeTable/utils/queryFilterToClientFilter.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queryFilterToClientFilter.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/utils/queryFilterToClientFilter.ts"],"sourcesContent":["import { Filter, FilterValue } from '@ynput/ayon-react-components'\nimport { QueryFilter, QueryCondition } from '../types/operations'\n\n// Option interface for filter options (from useBuildFilterOptions)\ninterface Option {\n  id: string\n  type?: string\n  label: string\n  icon?: string | null\n  img?: string | null\n  inverted?: boolean\n  operator?: 'AND' | 'OR'\n  values?: FilterValue[]\n  allowsCustomValues?: boolean\n  allowHasValue?: boolean\n  allowNoValue?: boolean\n  allowExcludes?: boolean\n  operatorChangeable?: boolean\n  singleSelect?: boolean\n}\n\n/**\n * Converts a QueryFilter back to Filter[] objects that can be consumed by the SearchFilter component\n * This requires the filter options to properly reconstruct the Filter objects with all their metadata\n */\nexport const queryFilterToClientFilter = (\n  queryFilter: QueryFilter | undefined,\n  filterOptions: Option[],\n): Filter[] => {\n  if (!queryFilter?.conditions || queryFilter.conditions.length === 0) {\n    return []\n  }\n\n  const filters: Filter[] = []\n  const processedConditions = new Set<string>()\n\n  // Process each condition in the query filter\n  queryFilter.conditions.forEach((condition) => {\n    if ('key' in condition) {\n      // This is a QueryCondition\n      const filter = convertConditionToFilter(condition, filterOptions, processedConditions)\n      if (filter) {\n        filters.push(filter)\n      }\n    } else {\n      // This is a nested QueryFilter - recursively process it\n      const nestedFilters = queryFilterToClientFilter(condition, filterOptions)\n      filters.push(...nestedFilters)\n    }\n  })\n\n  return filters\n}\n\nconst convertConditionToFilter = (\n  condition: QueryCondition,\n  filterOptions: Option[],\n  processedConditions: Set<string>,\n): Filter | null => {\n  const { key, value, operator } = condition\n\n  // Find the matching filter option\n  const filterOption = findFilterOption(key, filterOptions)\n  if (!filterOption) {\n    return null\n  }\n\n  // Create a unique key for this condition to avoid duplicates\n  const conditionKey = `${key}_${operator}_${JSON.stringify(value)}`\n  if (processedConditions.has(conditionKey)) {\n    return null\n  }\n  processedConditions.add(conditionKey)\n\n  // Convert the condition values to FilterValue objects\n  const filterValues = convertConditionValueToFilterValues(value, operator, filterOption)\n\n  // Determine if the filter is inverted based on the operator\n  const inverted = isInvertedOperator(operator, filterOption.type)\n\n  // Determine the filter operator (AND/OR)\n  const filterOperator = getFilterOperator(operator, filterOption.type)\n\n  const filter: Filter = {\n    id: filterOption.id,\n    type: filterOption.type as Filter['type'],\n    label: filterOption.label,\n    inverted,\n    operator: filterOperator,\n    icon: filterOption.icon,\n    values: filterValues,\n    isCustom: filterOption.allowsCustomValues,\n    singleSelect: filterOption.singleSelect,\n  }\n\n  return filter\n}\n\nconst findFilterOption = (key: string, filterOptions: Option[]): Option | undefined => {\n  // Try exact match first\n  let option = filterOptions.find((opt) => opt.id === key)\n  if (option) return option\n\n  // Try to find by the base key (without prefixes)\n  option = filterOptions.find(\n    (opt) =>\n      opt.id.endsWith(key) ||\n      opt.id.replace(/^[^.]*\\./, '') === key ||\n      opt.id.split('_').pop() === key,\n  )\n  if (option) return option\n\n  // Try to find by label match\n  option = filterOptions.find((opt) => opt.label?.toLowerCase() === key.toLowerCase())\n\n  return option\n}\n\nconst convertConditionValueToFilterValues = (\n  value: QueryCondition['value'],\n  operator: QueryCondition['operator'],\n  filterOption: Option,\n): FilterValue[] => {\n  // Handle special operators for null/empty checks\n  if (operator === 'isnull' || operator === 'notnull') {\n    return operator === 'isnull'\n      ? [{ id: 'noValue', label: 'No Value' }]\n      : [{ id: 'hasValue', label: 'Has Value' }]\n  }\n\n  // Handle empty array cases - these represent \"No Value\" and \"Has Value\" conditions\n  if (Array.isArray(value) && value.length === 0) {\n    if (operator === 'eq') {\n      // Empty array with 'eq' operator means \"No Value\"\n      return [{ id: 'noValue', label: 'No Value' }]\n    } else if (operator === 'ne') {\n      // Empty array with 'ne' operator means \"Has Value\"\n      return [{ id: 'hasValue', label: 'Has Value' }]\n    }\n  }\n\n  if (value === undefined || value === null) {\n    return []\n  }\n\n  // Convert value(s) to FilterValue objects\n  const values = Array.isArray(value) ? value : [value]\n\n  return values.map((val) => {\n    const stringValue = String(val)\n\n    // Try to find existing option value with metadata\n    const existingValue = filterOption.values?.find((v: FilterValue) => v.id === stringValue)\n    if (existingValue) {\n      return existingValue\n    }\n\n    // Create a basic FilterValue if no existing option found\n    return {\n      id: stringValue,\n      label: stringValue,\n      isCustom: true,\n    }\n  })\n}\n\nconst isInvertedOperator = (operator: QueryCondition['operator'], type?: string): boolean => {\n  const invertedOperators = ['ne', 'notin', 'excludes', 'excludesall', 'excludesany', 'notnull']\n  return operator ? invertedOperators.includes(operator) : false\n}\n\nconst getFilterOperator = (operator: QueryCondition['operator'], type?: string): 'AND' | 'OR' => {\n  // For list types, determine AND/OR based on the operator\n  if (type?.startsWith('list_of_')) {\n    if (operator === 'includesall' || operator === 'excludesall') {\n      return 'AND'\n    }\n    return 'OR'\n  }\n\n  // Default to OR for most cases\n  return 'OR'\n}\n\nexport default queryFilterToClientFilter\n"],"names":[],"mappings":"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"}

package/dist/shared/src/containers/ProjectTreeTable/utils/queryFilterToClientFilter.es.js

@@ -0,0 +1,106 @@
+const queryFilterToClientFilter = (queryFilter, filterOptions) => {
+  if (!(queryFilter == null ? void 0 : queryFilter.conditions) || queryFilter.conditions.length === 0) {
+    return [];
+  }
+  const filters = [];
+  const processedConditions = /* @__PURE__ */ new Set();
+  queryFilter.conditions.forEach((condition) => {
+    if ("key" in condition) {
+      const filter = convertConditionToFilter(condition, filterOptions, processedConditions);
+      if (filter) {
+        filters.push(filter);
+      }
+    } else {
+      const nestedFilters = queryFilterToClientFilter(condition, filterOptions);
+      filters.push(...nestedFilters);
+    }
+  });
+  return filters;
+};
+const convertConditionToFilter = (condition, filterOptions, processedConditions) => {
+  const { key, value, operator } = condition;
+  const filterOption = findFilterOption(key, filterOptions);
+  if (!filterOption) {
+    return null;
+  }
+  const conditionKey = `${key}_${operator}_${JSON.stringify(value)}`;
+  if (processedConditions.has(conditionKey)) {
+    return null;
+  }
+  processedConditions.add(conditionKey);
+  const filterValues = convertConditionValueToFilterValues(value, operator, filterOption);
+  const inverted = isInvertedOperator(operator, filterOption.type);
+  const filterOperator = getFilterOperator(operator, filterOption.type);
+  const filter = {
+    id: filterOption.id,
+    type: filterOption.type,
+    label: filterOption.label,
+    inverted,
+    operator: filterOperator,
+    icon: filterOption.icon,
+    values: filterValues,
+    isCustom: filterOption.allowsCustomValues,
+    singleSelect: filterOption.singleSelect
+  };
+  return filter;
+};
+const findFilterOption = (key, filterOptions) => {
+  let option = filterOptions.find((opt) => opt.id === key);
+  if (option) return option;
+  option = filterOptions.find(
+    (opt) => opt.id.endsWith(key) || opt.id.replace(/^[^.]*\./, "") === key || opt.id.split("_").pop() === key
+  );
+  if (option) return option;
+  option = filterOptions.find((opt) => {
+    var _a;
+    return ((_a = opt.label) == null ? void 0 : _a.toLowerCase()) === key.toLowerCase();
+  });
+  return option;
+};
+const convertConditionValueToFilterValues = (value, operator, filterOption) => {
+  if (operator === "isnull" || operator === "notnull") {
+    return operator === "isnull" ? [{ id: "noValue", label: "No Value" }] : [{ id: "hasValue", label: "Has Value" }];
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    if (operator === "eq") {
+      return [{ id: "noValue", label: "No Value" }];
+    } else if (operator === "ne") {
+      return [{ id: "hasValue", label: "Has Value" }];
+    }
+  }
+  if (value === void 0 || value === null) {
+    return [];
+  }
+  const values = Array.isArray(value) ? value : [value];
+  return values.map((val) => {
+    var _a;
+    const stringValue = String(val);
+    const existingValue = (_a = filterOption.values) == null ? void 0 : _a.find((v) => v.id === stringValue);
+    if (existingValue) {
+      return existingValue;
+    }
+    return {
+      id: stringValue,
+      label: stringValue,
+      isCustom: true
+    };
+  });
+};
+const isInvertedOperator = (operator, type) => {
+  const invertedOperators = ["ne", "notin", "excludes", "excludesall", "excludesany", "notnull"];
+  return operator ? invertedOperators.includes(operator) : false;
+};
+const getFilterOperator = (operator, type) => {
+  if (type == null ? void 0 : type.startsWith("list_of_")) {
+    if (operator === "includesall" || operator === "excludesall") {
+      return "AND";
+    }
+    return "OR";
+  }
+  return "OR";
+};
+export {
+  queryFilterToClientFilter as default,
+  queryFilterToClientFilter
+};
+//# sourceMappingURL=queryFilterToClientFilter.es.js.map

package/dist/shared/src/containers/ProjectTreeTable/utils/queryFilterToClientFilter.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queryFilterToClientFilter.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/utils/queryFilterToClientFilter.ts"],"sourcesContent":["import { Filter, FilterValue } from '@ynput/ayon-react-components'\nimport { QueryFilter, QueryCondition } from '../types/operations'\n\n// Option interface for filter options (from useBuildFilterOptions)\ninterface Option {\n  id: string\n  type?: string\n  label: string\n  icon?: string | null\n  img?: string | null\n  inverted?: boolean\n  operator?: 'AND' | 'OR'\n  values?: FilterValue[]\n  allowsCustomValues?: boolean\n  allowHasValue?: boolean\n  allowNoValue?: boolean\n  allowExcludes?: boolean\n  operatorChangeable?: boolean\n  singleSelect?: boolean\n}\n\n/**\n * Converts a QueryFilter back to Filter[] objects that can be consumed by the SearchFilter component\n * This requires the filter options to properly reconstruct the Filter objects with all their metadata\n */\nexport const queryFilterToClientFilter = (\n  queryFilter: QueryFilter | undefined,\n  filterOptions: Option[],\n): Filter[] => {\n  if (!queryFilter?.conditions || queryFilter.conditions.length === 0) {\n    return []\n  }\n\n  const filters: Filter[] = []\n  const processedConditions = new Set<string>()\n\n  // Process each condition in the query filter\n  queryFilter.conditions.forEach((condition) => {\n    if ('key' in condition) {\n      // This is a QueryCondition\n      const filter = convertConditionToFilter(condition, filterOptions, processedConditions)\n      if (filter) {\n        filters.push(filter)\n      }\n    } else {\n      // This is a nested QueryFilter - recursively process it\n      const nestedFilters = queryFilterToClientFilter(condition, filterOptions)\n      filters.push(...nestedFilters)\n    }\n  })\n\n  return filters\n}\n\nconst convertConditionToFilter = (\n  condition: QueryCondition,\n  filterOptions: Option[],\n  processedConditions: Set<string>,\n): Filter | null => {\n  const { key, value, operator } = condition\n\n  // Find the matching filter option\n  const filterOption = findFilterOption(key, filterOptions)\n  if (!filterOption) {\n    return null\n  }\n\n  // Create a unique key for this condition to avoid duplicates\n  const conditionKey = `${key}_${operator}_${JSON.stringify(value)}`\n  if (processedConditions.has(conditionKey)) {\n    return null\n  }\n  processedConditions.add(conditionKey)\n\n  // Convert the condition values to FilterValue objects\n  const filterValues = convertConditionValueToFilterValues(value, operator, filterOption)\n\n  // Determine if the filter is inverted based on the operator\n  const inverted = isInvertedOperator(operator, filterOption.type)\n\n  // Determine the filter operator (AND/OR)\n  const filterOperator = getFilterOperator(operator, filterOption.type)\n\n  const filter: Filter = {\n    id: filterOption.id,\n    type: filterOption.type as Filter['type'],\n    label: filterOption.label,\n    inverted,\n    operator: filterOperator,\n    icon: filterOption.icon,\n    values: filterValues,\n    isCustom: filterOption.allowsCustomValues,\n    singleSelect: filterOption.singleSelect,\n  }\n\n  return filter\n}\n\nconst findFilterOption = (key: string, filterOptions: Option[]): Option | undefined => {\n  // Try exact match first\n  let option = filterOptions.find((opt) => opt.id === key)\n  if (option) return option\n\n  // Try to find by the base key (without prefixes)\n  option = filterOptions.find(\n    (opt) =>\n      opt.id.endsWith(key) ||\n      opt.id.replace(/^[^.]*\\./, '') === key ||\n      opt.id.split('_').pop() === key,\n  )\n  if (option) return option\n\n  // Try to find by label match\n  option = filterOptions.find((opt) => opt.label?.toLowerCase() === key.toLowerCase())\n\n  return option\n}\n\nconst convertConditionValueToFilterValues = (\n  value: QueryCondition['value'],\n  operator: QueryCondition['operator'],\n  filterOption: Option,\n): FilterValue[] => {\n  // Handle special operators for null/empty checks\n  if (operator === 'isnull' || operator === 'notnull') {\n    return operator === 'isnull'\n      ? [{ id: 'noValue', label: 'No Value' }]\n      : [{ id: 'hasValue', label: 'Has Value' }]\n  }\n\n  // Handle empty array cases - these represent \"No Value\" and \"Has Value\" conditions\n  if (Array.isArray(value) && value.length === 0) {\n    if (operator === 'eq') {\n      // Empty array with 'eq' operator means \"No Value\"\n      return [{ id: 'noValue', label: 'No Value' }]\n    } else if (operator === 'ne') {\n      // Empty array with 'ne' operator means \"Has Value\"\n      return [{ id: 'hasValue', label: 'Has Value' }]\n    }\n  }\n\n  if (value === undefined || value === null) {\n    return []\n  }\n\n  // Convert value(s) to FilterValue objects\n  const values = Array.isArray(value) ? value : [value]\n\n  return values.map((val) => {\n    const stringValue = String(val)\n\n    // Try to find existing option value with metadata\n    const existingValue = filterOption.values?.find((v: FilterValue) => v.id === stringValue)\n    if (existingValue) {\n      return existingValue\n    }\n\n    // Create a basic FilterValue if no existing option found\n    return {\n      id: stringValue,\n      label: stringValue,\n      isCustom: true,\n    }\n  })\n}\n\nconst isInvertedOperator = (operator: QueryCondition['operator'], type?: string): boolean => {\n  const invertedOperators = ['ne', 'notin', 'excludes', 'excludesall', 'excludesany', 'notnull']\n  return operator ? invertedOperators.includes(operator) : false\n}\n\nconst getFilterOperator = (operator: QueryCondition['operator'], type?: string): 'AND' | 'OR' => {\n  // For list types, determine AND/OR based on the operator\n  if (type?.startsWith('list_of_')) {\n    if (operator === 'includesall' || operator === 'excludesall') {\n      return 'AND'\n    }\n    return 'OR'\n  }\n\n  // Default to OR for most cases\n  return 'OR'\n}\n\nexport default queryFilterToClientFilter\n"],"names":[],"mappings":"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"}

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

@@ -53,6 +53,7 @@ require("../../api/generated/versions.cjs.js");
 require("../../api/generated/workfiles.cjs.js");
 require("../../api/generated/ynputCloud.cjs.js");
 require("../../api/generated/grouping.cjs.js");
+require("../../api/generated/views.cjs.js");
 require("../../api/queries/actions/getActions.cjs.js");
 require("../../api/queries/activities/getActivities.cjs.js");
 require("../../api/queries/activities/updateActivities.cjs.js");
@@ -86,6 +87,9 @@ require("../../api/queries/permissions/getPermissions.cjs.js");
 require("../../api/queries/grouping/getGrouping.cjs.js");
 require("../../api/queries/versions/updateVersions.cjs.js");
 require("../../api/queries/products/createProduct.cjs.js");
+require("../../api/queries/cloud/cloud.cjs.js");
+require("../../api/queries/views/getViews.cjs.js");
+require("../../api/queries/views/updateViews.cjs.js");
 require("@dnd-kit/core");
 require("@dnd-kit/sortable");
 require("../../components/ReviewablesList/ReviewablesList.styled.cjs.js");
@@ -173,6 +177,10 @@ require("../DetailsPanel/DetailsPanelFloating/DetailsPanelFloating.styled.cjs.js
 require("../Actions/Actions.styled.cjs.js");
 require("../Actions/ActionsDropdown/ActionsDropdown.cjs.js");
 require("../Actions/ActionIcon.cjs.js");
+require("../Views/context/ViewsContext.cjs.js");
+require("../Views/Views.styled.cjs.js");
+require("../Views/ViewsMenuContainer/ViewsMenuContainer.cjs.js");
+require("../Views/ViewsMenu/ViewsMenu.cjs.js");
 require("../../components/EntityPanelUploader/EntityPanelUploader.styled.cjs.js");
 require("../../components/SimpleFormDialog/SimpleFormDialog.cjs.js");
 require("../../components/EntityPath/EntityPath.styled.cjs.js");
@@ -183,6 +191,7 @@ 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/Powerpack/CTAButton.cjs.js");
 require("../../components/SettingsPanel/SettingsPanel.cjs.js");
 require("../../components/SettingsPanel/SettingsPanelItemTemplate.cjs.js");
 require("../../components/AttributeEditor/components/MinMaxField.cjs.js");
@@ -191,6 +200,8 @@ require("../../components/SearchFilter/filterDates.cjs.js");
 require("../../components/Badge/Badge.cjs.js");
 require("../../components/VersionUploader/components/UploadVersionDialog.cjs.js");
 require("../../components/VersionUploader/context/VersionUploadContext.cjs.js");
+require("../../components/Feedback/FeedbackContext.cjs.js");
+require("../../components/Feedback/SupportBubble.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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"}

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

@@ -51,6 +51,7 @@ import "../../api/generated/versions.es.js";
 import "../../api/generated/workfiles.es.js";
 import "../../api/generated/ynputCloud.es.js";
 import "../../api/generated/grouping.es.js";
+import "../../api/generated/views.es.js";
 import "../../api/queries/actions/getActions.es.js";
 import "../../api/queries/activities/getActivities.es.js";
 import "../../api/queries/activities/updateActivities.es.js";
@@ -84,6 +85,9 @@ import "../../api/queries/permissions/getPermissions.es.js";
 import "../../api/queries/grouping/getGrouping.es.js";
 import "../../api/queries/versions/updateVersions.es.js";
 import "../../api/queries/products/createProduct.es.js";
+import "../../api/queries/cloud/cloud.es.js";
+import "../../api/queries/views/getViews.es.js";
+import "../../api/queries/views/updateViews.es.js";
 import "@dnd-kit/core";
 import "@dnd-kit/sortable";
 import "../../components/ReviewablesList/ReviewablesList.styled.es.js";
@@ -171,6 +175,10 @@ import "../DetailsPanel/DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
 import "../Actions/Actions.styled.es.js";
 import "../Actions/ActionsDropdown/ActionsDropdown.es.js";
 import "../Actions/ActionIcon.es.js";
+import "../Views/context/ViewsContext.es.js";
+import "../Views/Views.styled.es.js";
+import "../Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
+import "../Views/ViewsMenu/ViewsMenu.es.js";
 import "../../components/EntityPanelUploader/EntityPanelUploader.styled.es.js";
 import "../../components/SimpleFormDialog/SimpleFormDialog.es.js";
 import "../../components/EntityPath/EntityPath.styled.es.js";
@@ -181,6 +189,7 @@ import "../../components/ProjectTableSettings/ProjectTableSettings.es.js";
 import "../../components/Powerpack/PowerpackButton.es.js";
 import "../../components/Powerpack/PricingLink.es.js";
 import "../../components/Powerpack/PowerpackDialog.styled.es.js";
+import "../../components/Powerpack/CTAButton.es.js";
 import "../../components/SettingsPanel/SettingsPanel.es.js";
 import "../../components/SettingsPanel/SettingsPanelItemTemplate.es.js";
 import "../../components/AttributeEditor/components/MinMaxField.es.js";
@@ -189,6 +198,8 @@ import "../../components/SearchFilter/filterDates.es.js";
 import "../../components/Badge/Badge.es.js";
 import "../../components/VersionUploader/components/UploadVersionDialog.es.js";
 import "../../components/VersionUploader/context/VersionUploadContext.es.js";
+import "../../components/Feedback/FeedbackContext.es.js";
+import "../../components/Feedback/SupportBubble.es.js";
 const columns = [
   {
     field: "name",

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

@@ -1 +1 @@
-{"version":3,"file":"RepresentationsList.es.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":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAU;AAAA,EACd;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;AAMO,MAAM,sBAAsB,CAAC,EAAE,WAAW,CAAA,QAAgB;;AAEzD,QAAA,kBAAkB,QAAQ,MAAM,0BAA0B,QAAQ,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;AAE3F,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAC5D,QAAA,yBAAwB,qBAAgB,KAAK,CAAC,QAAQ,IAAI,OAAO,UAAU,MAAnD,mBAAsD;AAEpF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,CAAA,CAAE;AAE/C,QAAA,OAAO,QAAQ,MAAM;AAElB,WAAA,YAAY,iBAAiB,MAAM;AAAA,EAAA,GACzC,CAAC,eAAe,CAAC;AAEd,QAAA,uBAAuB,CAAC,aAAqB;AAErC,gBAAA,CAAC,QAAQ,CAAC;AAAA,EACxB;AAEM,QAAA,aAAa,CAAC,MAAW;AACR,yBAAA,EAAE,KAAK,KAAK,EAAE;AAAA,EACrC;AAEM,QAAA,eAAe,CAAC,OAAe;AAAA,IACnC;AAAA,MACE,OAAO;AAAA,MACP,SAAS,MAAM,cAAc,EAAE;AAAA,MAC/B,MAAM;AAAA,IAAA;AAAA,EAEV;AAEA,QAAM,CAAC,WAAW,IAAI,qBAAqB,EAAE;AAEvC,QAAA,oBAAoB,CAAC,MAAW;AAC9B,UAAA,KAAK,EAAE,KAAK,KAAK;AAEvB,QAAI,IAAI;AAEN,2BAAqB,EAAE;AAEvB,kBAAY,EAAE,eAAe,aAAa,EAAE,CAAC;AAAA,IAAA;AAAA,EAEjD;AAEA,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,sCAAC,YACC,EAAA,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAU;AAAA,QACV,cAAa;AAAA,QACb,OAAO;AAAA,QACP,cAAa;AAAA,QACb,eAAc;AAAA,QACd,eAAe,SAAS,CAAC;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QAEd,UAAA,QAAQ,IAAI,CAAC,QAAQ;AAElB,iBAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO,IAAI;AAAA,cACX,QAAQ,IAAI;AAAA,cACZ,UAAU,IAAI;AAAA,cACd,OAAO,EAAE,OAAO,IAAI,MAAM;AAAA,YAAA;AAAA,YAJrB,IAAI;AAAA,UAKX;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAEC,cACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,WAAW,CAAC,UAAU;AAAA,QACtB,SAAS,CAAC,CAAC;AAAA,QACX,QAAQ,MAAM,cAAc,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GAEJ;AAEJ;"}
+{"version":3,"file":"RepresentationsList.es.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":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAU;AAAA,EACd;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;AAMO,MAAM,sBAAsB,CAAC,EAAE,WAAW,CAAA,QAAgB;;AAEzD,QAAA,kBAAkB,QAAQ,MAAM,0BAA0B,QAAQ,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;AAE3F,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAC5D,QAAA,yBAAwB,qBAAgB,KAAK,CAAC,QAAQ,IAAI,OAAO,UAAU,MAAnD,mBAAsD;AAEpF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,CAAA,CAAE;AAE/C,QAAA,OAAO,QAAQ,MAAM;AAElB,WAAA,YAAY,iBAAiB,MAAM;AAAA,EAAA,GACzC,CAAC,eAAe,CAAC;AAEd,QAAA,uBAAuB,CAAC,aAAqB;AAErC,gBAAA,CAAC,QAAQ,CAAC;AAAA,EACxB;AAEM,QAAA,aAAa,CAAC,MAAW;AACR,yBAAA,EAAE,KAAK,KAAK,EAAE;AAAA,EACrC;AAEM,QAAA,eAAe,CAAC,OAAe;AAAA,IACnC;AAAA,MACE,OAAO;AAAA,MACP,SAAS,MAAM,cAAc,EAAE;AAAA,MAC/B,MAAM;AAAA,IAAA;AAAA,EAEV;AAEA,QAAM,CAAC,WAAW,IAAI,qBAAqB,EAAE;AAEvC,QAAA,oBAAoB,CAAC,MAAW;AAC9B,UAAA,KAAK,EAAE,KAAK,KAAK;AAEvB,QAAI,IAAI;AAEN,2BAAqB,EAAE;AAEvB,kBAAY,EAAE,eAAe,aAAa,EAAE,CAAC;AAAA,IAAA;AAAA,EAEjD;AAEA,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,sCAAC,YACC,EAAA,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAU;AAAA,QACV,cAAa;AAAA,QACb,OAAO;AAAA,QACP,cAAa;AAAA,QACb,eAAc;AAAA,QACd,eAAe,SAAS,CAAC;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QAEd,UAAA,QAAQ,IAAI,CAAC,QAAQ;AAElB,iBAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO,IAAI;AAAA,cACX,QAAQ,IAAI;AAAA,cACZ,UAAU,IAAI;AAAA,cACd,OAAO,EAAE,OAAO,IAAI,MAAM;AAAA,YAAA;AAAA,YAJrB,IAAI;AAAA,UAKX;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAEC,cACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,WAAW,CAAC,UAAU;AAAA,QACtB,SAAS,CAAC,CAAC;AAAA,QACX,QAAQ,MAAM,cAAc,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GAEJ;AAEJ;"}

package/dist/shared/src/containers/Views/ViewItem/ViewItem.cjs.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const ViewItem_styled = require("./ViewItem.styled.cjs.js");
+const clsx = require("clsx");
+const ViewItem = React.forwardRef(
+  ({
+    label,
+    startContent,
+    endContent,
+    isSelected,
+    isEditable,
+    isSaveable,
+    highlighted,
+    onEdit,
+    onSave,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewItem_styled.ViewItem, { ...props, className: clsx(className, { selected: isSelected }), ref, children: [
+      startContent && startContent,
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "label", children: label }),
+      isEditable && isSaveable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ViewItem_styled.ActionButton,
+        {
+          icon: "save",
+          variant: "text",
+          className: clsx("save", { active: highlighted === "save" }),
+          onClick: onSave,
+          "data-tooltip": "Save view settings from current view"
+        }
+      ),
+      isEditable && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ViewItem_styled.ActionButton,
+        {
+          variant: "text",
+          icon: "more_horiz",
+          className: clsx("more", { active: highlighted === "edit" }),
+          onClick: onEdit,
+          "data-tooltip": "Edit view"
+        }
+      ),
+      endContent && endContent
+    ] });
+  }
+);
+exports.ViewItem = ViewItem;
+//# sourceMappingURL=ViewItem.cjs.js.map

package/dist/shared/src/containers/Views/ViewItem/ViewItem.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.cjs.js","sources":["../../../../../../src/containers/Views/ViewItem/ViewItem.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport * as Styled from './ViewItem.styled'\nimport clsx from 'clsx'\n\nexport interface ViewItem {\n  id: string\n  label: string\n  startContent?: ReactNode\n  endContent?: ReactNode\n  isSelected?: boolean\n  isEditable?: boolean\n  isSaveable?: boolean // can this be saved from working view (shows little save button)\n  highlighted?: 'save' | 'edit' // highlights a button\n  onEdit?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  onSave?: (e: React.MouseEvent<HTMLButtonElement>) => void // saves the view settings from selected view\n  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void\n}\n\nexport interface ViewMenuItemProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'id'>,\n    ViewItem {}\n\nexport const ViewItem = forwardRef<HTMLLIElement, ViewMenuItemProps>(\n  (\n    {\n      label,\n      startContent,\n      endContent,\n      isSelected,\n      isEditable,\n      isSaveable,\n      highlighted,\n      onEdit,\n      onSave,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Styled.ViewItem {...props} className={clsx(className, { selected: isSelected })} ref={ref}>\n        {startContent && startContent}\n        <span className=\"label\">{label}</span>\n        {isEditable && isSaveable && !isSelected && (\n          <Styled.ActionButton\n            icon=\"save\"\n            variant=\"text\"\n            className={clsx('save', { active: highlighted === 'save' })}\n            onClick={onSave}\n            data-tooltip=\"Save view settings from current view\"\n          />\n        )}\n        {isEditable && (\n          <Styled.ActionButton\n            variant=\"text\"\n            icon=\"more_horiz\"\n            className={clsx('more', { active: highlighted === 'edit' })}\n            onClick={onEdit}\n            data-tooltip=\"Edit view\"\n          />\n        )}\n        {endContent && endContent}\n      </Styled.ViewItem>\n    )\n  },\n)\n"],"names":["forwardRef","jsxs","Styled.ViewItem","jsx","Styled.ActionButton"],"mappings":";;;;;;AAsBO,MAAM,WAAWA,MAAA;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,WACGC,2BAAA,kBAAA,KAAAC,gBAAA,UAAA,EAAiB,GAAG,OAAO,WAAW,KAAK,WAAW,EAAE,UAAU,WAAY,CAAA,GAAG,KAC/E,UAAA;AAAA,MAAgB,gBAAA;AAAA,MAChBC,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,SAAS,UAAM,OAAA;AAAA,MAC9B,cAAc,cAAc,CAAC,cAC5BA,2BAAA,kBAAA;AAAA,QAACC,gBAAO;AAAA,QAAP;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cACCD,2BAAA,kBAAA;AAAA,QAACC,gBAAO;AAAA,QAAP;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cAAc;AAAA,IAAA,GACjB;AAAA,EAAA;AAGN;;"}

package/dist/shared/src/containers/Views/ViewItem/ViewItem.es.js

@@ -0,0 +1,49 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { forwardRef } from "react";
+import { ViewItem as ViewItem$1, ActionButton } from "./ViewItem.styled.es.js";
+import clsx from "clsx";
+const ViewItem = forwardRef(
+  ({
+    label,
+    startContent,
+    endContent,
+    isSelected,
+    isEditable,
+    isSaveable,
+    highlighted,
+    onEdit,
+    onSave,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(ViewItem$1, { ...props, className: clsx(className, { selected: isSelected }), ref, children: [
+      startContent && startContent,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "label", children: label }),
+      isEditable && isSaveable && !isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionButton,
+        {
+          icon: "save",
+          variant: "text",
+          className: clsx("save", { active: highlighted === "save" }),
+          onClick: onSave,
+          "data-tooltip": "Save view settings from current view"
+        }
+      ),
+      isEditable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionButton,
+        {
+          variant: "text",
+          icon: "more_horiz",
+          className: clsx("more", { active: highlighted === "edit" }),
+          onClick: onEdit,
+          "data-tooltip": "Edit view"
+        }
+      ),
+      endContent && endContent
+    ] });
+  }
+);
+export {
+  ViewItem
+};
+//# sourceMappingURL=ViewItem.es.js.map

package/dist/shared/src/containers/Views/ViewItem/ViewItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.es.js","sources":["../../../../../../src/containers/Views/ViewItem/ViewItem.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport * as Styled from './ViewItem.styled'\nimport clsx from 'clsx'\n\nexport interface ViewItem {\n  id: string\n  label: string\n  startContent?: ReactNode\n  endContent?: ReactNode\n  isSelected?: boolean\n  isEditable?: boolean\n  isSaveable?: boolean // can this be saved from working view (shows little save button)\n  highlighted?: 'save' | 'edit' // highlights a button\n  onEdit?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  onSave?: (e: React.MouseEvent<HTMLButtonElement>) => void // saves the view settings from selected view\n  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void\n}\n\nexport interface ViewMenuItemProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'id'>,\n    ViewItem {}\n\nexport const ViewItem = forwardRef<HTMLLIElement, ViewMenuItemProps>(\n  (\n    {\n      label,\n      startContent,\n      endContent,\n      isSelected,\n      isEditable,\n      isSaveable,\n      highlighted,\n      onEdit,\n      onSave,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Styled.ViewItem {...props} className={clsx(className, { selected: isSelected })} ref={ref}>\n        {startContent && startContent}\n        <span className=\"label\">{label}</span>\n        {isEditable && isSaveable && !isSelected && (\n          <Styled.ActionButton\n            icon=\"save\"\n            variant=\"text\"\n            className={clsx('save', { active: highlighted === 'save' })}\n            onClick={onSave}\n            data-tooltip=\"Save view settings from current view\"\n          />\n        )}\n        {isEditable && (\n          <Styled.ActionButton\n            variant=\"text\"\n            icon=\"more_horiz\"\n            className={clsx('more', { active: highlighted === 'edit' })}\n            onClick={onEdit}\n            data-tooltip=\"Edit view\"\n          />\n        )}\n        {endContent && endContent}\n      </Styled.ViewItem>\n    )\n  },\n)\n"],"names":["jsxs","Styled.ViewItem","jsx","Styled.ActionButton"],"mappings":";;;;AAsBO,MAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,WACGA,kCAAA,KAAAC,YAAA,EAAiB,GAAG,OAAO,WAAW,KAAK,WAAW,EAAE,UAAU,WAAY,CAAA,GAAG,KAC/E,UAAA;AAAA,MAAgB,gBAAA;AAAA,MAChBC,kCAAA,IAAA,QAAA,EAAK,WAAU,SAAS,UAAM,OAAA;AAAA,MAC9B,cAAc,cAAc,CAAC,cAC5BA,kCAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cACCD,kCAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cAAc;AAAA,IAAA,GACjB;AAAA,EAAA;AAGN;"}

package/dist/shared/src/containers/Views/ViewItem/ViewItem.styled.cjs.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+const ViewItem = styled.li`
+  position: relative;
+  padding: 4px 6px 4px 12px;
+  user-select: none;
+
+  &:has(.start-icon) {
+    padding-left: 8px;
+  }
+
+  height: 32px;
+  border-radius: var(--border-radius-m);
+
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+
+  cursor: pointer;
+
+  .label {
+    flex: 1;
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  &.selected {
+    background-color: var(--md-sys-color-primary-container);
+    &,
+    .icon {
+      color: var(--md-sys-color-on-primary-container);
+    }
+
+    .more {
+      &:hover {
+        background-color: var(--md-sys-color-primary-container-hover);
+      }
+    }
+  }
+
+  /* hide save button by default */
+  .save {
+    display: none;
+  }
+  &:hover {
+    .save {
+      display: flex;
+    }
+  }
+`;
+const ActionButton = styled(ayonReactComponents.Button)`
+  &.hasIcon {
+    padding: 2px;
+  }
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest-hover);
+  }
+  &.active {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    display: flex !important;
+
+    &:hover {
+      background-color: var(--md-sys-color-primary-hover);
+    }
+  }
+`;
+exports.ActionButton = ActionButton;
+exports.ViewItem = ViewItem;
+//# sourceMappingURL=ViewItem.styled.cjs.js.map

package/dist/shared/src/containers/Views/ViewItem/ViewItem.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.styled.cjs.js","sources":["../../../../../../src/containers/Views/ViewItem/ViewItem.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const ViewItem = styled.li`\n  position: relative;\n  padding: 4px 6px 4px 12px;\n  user-select: none;\n\n  &:has(.start-icon) {\n    padding-left: 8px;\n  }\n\n  height: 32px;\n  border-radius: var(--border-radius-m);\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  cursor: pointer;\n\n  .label {\n    flex: 1;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    .more {\n      &:hover {\n        background-color: var(--md-sys-color-primary-container-hover);\n      }\n    }\n  }\n\n  /* hide save button by default */\n  .save {\n    display: none;\n  }\n  &:hover {\n    .save {\n      display: flex;\n    }\n  }\n`\n\nexport const ActionButton = styled(Button)`\n  &.hasIcon {\n    padding: 2px;\n  }\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest-hover);\n  }\n  &.active {\n    background-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-primary);\n\n    display: flex !important;\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-hover);\n    }\n  }\n`\n"],"names":["Button"],"mappings":";;;;AAGO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDlB,MAAA,eAAe,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;"}