npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.2 → 0.2.4 - Mend

@ynput/ayon-frontend-shared 0.2.2 → 0.2.4

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

Files changed (896) hide show

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

@@ -44,6 +44,7 @@ const EditorCellComponent = ({
   isReadOnly,
   enableCustomValues,
   onChange,
+  pt,
   ...props
 }) => {
   const ref = useRef(null);
@@ -102,6 +103,16 @@ const EditorCellComponent = ({
       }
       case !!options.length: {
         const enumValue = Array.isArray(value) ? value : [value];
+        if (isReadOnly) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TextWidget,
+            {
+              value: enumValue.join(", "),
+              option: enumValue.length === 1 ? options.find((o) => o.value === enumValue[0]) : void 0,
+              ...sharedProps
+            }
+          );
+        }
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           EnumWidget,
           {
@@ -110,20 +121,37 @@ const EditorCellComponent = ({
             type,
             onOpen: () => !isReadOnly && setEditingCellId(cellId),
             enableCustomValues,
-            ...sharedProps
+            ...sharedProps,
+            ...pt == null ? void 0 : pt.enum
           }
         );
       }
       case textTypes.includes(type):
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(TextWidget, { value, isInherited, ...sharedProps });
-      case (type === "datetime" && value !== null && value !== void 0):
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(DateWidget, { value, isInherited, ...sharedProps });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TextWidget,
+          {
+            value,
+            isInherited,
+            ...sharedProps,
+            ...pt == null ? void 0 : pt.text
+          }
+        );
+      case type === "datetime":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DateWidget,
+          {
+            value: value ? value : void 0,
+            isInherited,
+            ...sharedProps,
+            ...pt == null ? void 0 : pt.date
+          }
+        );
       case type === "boolean":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(BooleanWidget, { value, ...sharedProps });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(BooleanWidget, { value, ...sharedProps, ...pt == null ? void 0 : pt.boolean });
       case isPlaceholder:
         return null;
       default:
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(TextWidget, { value, ...sharedProps });
+        return null;
     }
   }, [cellId, value, type, isCurrentCellEditing, options, isCollapsed]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CellWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/CellWidget.tsx"],"sourcesContent":["import { useMemo, memo, useCallback, useRef, FC } from 'react'\nimport styled from 'styled-components'\n\n// Widgets\nimport { BooleanWidget } from './BooleanWidget'\nimport { CollapsedWidget } from './CollapsedWidget'\nimport { DateWidget } from './DateWidget'\nimport { EnumWidget } from './EnumWidget'\nimport { TextWidget, TextWidgetType } from './TextWidget'\n\n// Contexts\nimport { useCellEditing } from '../context/CellEditingContext'\n\n// Utils\nimport { getCellId } from '../utils/cellUtils'\nimport clsx from 'clsx'\nimport { useSelectionCellsContext } from '../context/SelectionCellsContext'\nimport { AttributeData, AttributeEnumItem } from '../types'\n\nconst Cell = styled.div`\n position: absolute;\n inset: 0;\n padding: 4px 8px;\n display: flex;\n align-items: center;\n\n &:focus-visible {\n outline: none;\n }\n\n &.inherited {\n opacity: 0.6;\n font-style: italic;\n }\n\n &.loading {\n inset: 4px;\n border-radius: 4px;\n opacity: 1;\n }\n`\n\ntype WidgetAttributeData = Pick<AttributeData, 'type'>\n\nexport type CellValue = string \| number \| boolean\n\ninterface EditorCellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n rowId: string\n columnId: string\n value: CellValue \| CellValue[]\n attributeData?: WidgetAttributeData\n options?: AttributeEnumItem[]\n isCollapsed?: boolean\n isInherited?: boolean\n isPlaceholder?: boolean\n isFocused?: boolean\n isReadOnly?: boolean\n enableCustomValues?: boolean\n onChange?: (value: CellValue \| CellValue[], key?: 'Enter' \| 'Click' \| 'Escape') => void\n}\n\nexport interface WidgetBaseProps {\n isEditing?: boolean\n onChange: Required<EditorCellProps>['onChange']\n onCancelEdit?: () => void\n}\n\nconst EditorCellComponent: FC<EditorCellProps> = ({\n rowId,\n columnId,\n value,\n attributeData,\n options = [],\n isCollapsed,\n isInherited,\n isPlaceholder,\n isReadOnly,\n enableCustomValues,\n onChange,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const type = attributeData?.type\n\n const { isEditing, setEditingCellId } = useCellEditing()\n const { isCellFocused, gridMap, selectCell, focusCell } = useSelectionCellsContext()\n const cellId = getCellId(rowId, columnId)\n\n const isCurrentCellEditing = isEditing(cellId)\n const isCurrentCellFocused = isCellFocused(cellId)\n\n const handleDoubleClick = useCallback(() => {\n if (isPlaceholder \|\| isReadOnly) return\n setEditingCellId(cellId)\n }, [cellId, setEditingCellId, isPlaceholder])\n\n const handleSingleClick = () => {\n // clicking a cell that is not editing will close the editor on this cell\n if (!isCurrentCellEditing) {\n setEditingCellId(null)\n }\n }\n\n const moveToNextRow = () => {\n const rowIndex = gridMap.rowIdToIndex.get(rowId)\n if (rowIndex === undefined) return\n const newRowId = gridMap.indexToRowId.get(rowIndex + 1)\n if (newRowId) {\n const newCellId = getCellId(newRowId, columnId)\n selectCell(newCellId, false, false)\n focusCell(newCellId)\n setEditingCellId(newCellId)\n }\n }\n\n const handleOnChange: WidgetBaseProps['onChange'] = (newValue, key) => {\n setEditingCellId(null)\n if (isReadOnly) return\n // move to the next cell row\n key === 'Enter' && moveToNextRow()\n // make change if the value is different or if the key is 'Enter'\n if (newValue !== value \|\| key === 'Enter') {\n onChange?.(newValue, key)\n }\n }\n\n const handleCancel = () => {\n setEditingCellId(null)\n }\n\n const widget = useMemo(() => {\n // Common props shared across all widgets\n const sharedProps: WidgetBaseProps = {\n onChange: handleOnChange,\n onCancelEdit: handleCancel,\n isEditing: isCurrentCellEditing,\n }\n\n const textTypes: TextWidgetType[] = ['string', 'integer', 'float']\n\n // Determine widget type based on attribute type\n switch (true) {\n // this is showing the collapsed widget (dot)\n case isCollapsed: {\n // if enum, find the first selected option and get its color\n const firstSelectedOption = type?.includes('list')\n ? options.find((option) =>\n Array.isArray(value) ? value.includes(option.value) : value === option.value,\n )\n : undefined\n const color = firstSelectedOption?.color\n return <CollapsedWidget color={color} />\n }\n\n case !!options.length: {\n const enumValue = Array.isArray(value) ? value : [value]\n return (\n <EnumWidget\n value={enumValue}\n options={options}\n type={type}\n onOpen={() => !isReadOnly && setEditingCellId(cellId)}\n enableCustomValues={enableCustomValues}\n {...sharedProps}\n />\n )\n }\n\n case textTypes.includes(type as TextWidgetType):\n return <TextWidget value={value as string} isInherited={isInherited} {...sharedProps} />\n\n case type === 'datetime' && value !== null && value !== undefined:\n return <DateWidget value={value as string} isInherited={isInherited} {...sharedProps} />\n\n case type === 'boolean':\n return <BooleanWidget value={value as boolean} {...sharedProps} />\n\n case isPlaceholder:\n return null\n\n default:\n // if the type is not recognized, fall back to the TextWidget\n return <TextWidget value={value as string} {...sharedProps} />\n }\n }, [cellId, value, type, isCurrentCellEditing, options, isCollapsed])\n\n return (\n <Cell\n {...props}\n className={clsx(props.className, { inherited: isInherited && !isCurrentCellEditing })}\n ref={ref}\n onDoubleClick={handleDoubleClick}\n onClick={handleSingleClick}\n id={cellId}\n data-tooltip={\n isInherited && !isCurrentCellEditing && isCurrentCellFocused ? 'Inherited' : undefined\n }\n data-tooltip-delay={200}\n >\n {widget}\n </Cell>\n )\n}\n\n// Custom comparison function for memo\nfunction arePropsEqual(prevProps: EditorCellProps, nextProps: EditorCellProps) {\n // Only re-render if these props change\n return (\n prevProps.rowId === nextProps.rowId &&\n prevProps.columnId === nextProps.columnId &&\n prevProps.isCollapsed === nextProps.isCollapsed &&\n JSON.stringify(prevProps.value) === JSON.stringify(nextProps.value) &&\n prevProps?.attributeData?.type === nextProps?.attributeData?.type &&\n // Only check options length for list types to avoid deep comparison\n ((!prevProps?.attributeData?.type.includes('list') &&\n !nextProps?.attributeData?.type.includes('list')) \|\|\n prevProps.options?.length === nextProps.options?.length) &&\n prevProps.isInherited === nextProps.isInherited &&\n prevProps.enableCustomValues === nextProps.enableCustomValues &&\n prevProps.isReadOnly === nextProps.isReadOnly &&\n prevProps.isPlaceholder === nextProps.isPlaceholder &&\n prevProps.isFocused === nextProps.isFocused &&\n prevProps.isCollapsed === nextProps.isCollapsed\n )\n}\n\nexport const CellWidget = memo(EditorCellComponent, arePropsEqual)\n"],"names":["jsx"],"mappings":"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"}
1	+ {"version":3,"file":"CellWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/CellWidget.tsx"],"sourcesContent":["import { useMemo, memo, useCallback, useRef, FC } from 'react'\nimport styled from 'styled-components'\n\n// Widgets\nimport { BooleanWidget, BooleanWidgetProps } from './BooleanWidget'\nimport { CollapsedWidget } from './CollapsedWidget'\nimport { DateWidget, DateWidgetProps } from './DateWidget'\nimport { EnumWidget, EnumWidgetProps } from './EnumWidget'\nimport { TextWidget, TextWidgetProps, TextWidgetType } from './TextWidget'\n\n// Contexts\nimport { useCellEditing } from '../context/CellEditingContext'\n\n// Utils\nimport { getCellId } from '../utils/cellUtils'\nimport clsx from 'clsx'\nimport { useSelectionCellsContext } from '../context/SelectionCellsContext'\nimport { AttributeData, AttributeEnumItem } from '../types'\n\nconst Cell = styled.div`\n position: absolute;\n inset: 0;\n padding: 4px 8px;\n display: flex;\n align-items: center;\n\n &:focus-visible {\n outline: none;\n }\n\n &.inherited {\n opacity: 0.6;\n font-style: italic;\n }\n\n &.loading {\n inset: 4px;\n border-radius: 4px;\n opacity: 1;\n }\n`\n\ntype WidgetAttributeData = Pick<AttributeData, 'type'>\n\nexport type CellValue = string \| number \| boolean\n\ninterface EditorCellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n rowId: string\n columnId: string\n value: CellValue \| CellValue[]\n attributeData?: WidgetAttributeData\n options?: AttributeEnumItem[]\n isCollapsed?: boolean\n isInherited?: boolean\n isPlaceholder?: boolean\n isFocused?: boolean\n isReadOnly?: boolean\n enableCustomValues?: boolean\n onChange?: (value: CellValue \| CellValue[], key?: 'Enter' \| 'Click' \| 'Escape') => void\n // options passthrough props\n pt?: {\n enum?: Partial<EnumWidgetProps>\n text?: Partial<TextWidgetProps>\n date?: Partial<DateWidgetProps>\n boolean?: Partial<BooleanWidgetProps>\n }\n}\n\nexport interface WidgetBaseProps {\n isEditing?: boolean\n onChange: Required<EditorCellProps>['onChange']\n onCancelEdit?: () => void\n}\n\nconst EditorCellComponent: FC<EditorCellProps> = ({\n rowId,\n columnId,\n value,\n attributeData,\n options = [],\n isCollapsed,\n isInherited,\n isPlaceholder,\n isReadOnly,\n enableCustomValues,\n onChange,\n pt,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const type = attributeData?.type\n\n const { isEditing, setEditingCellId } = useCellEditing()\n const { isCellFocused, gridMap, selectCell, focusCell } = useSelectionCellsContext()\n const cellId = getCellId(rowId, columnId)\n\n const isCurrentCellEditing = isEditing(cellId)\n const isCurrentCellFocused = isCellFocused(cellId)\n\n const handleDoubleClick = useCallback(() => {\n if (isPlaceholder \|\| isReadOnly) return\n setEditingCellId(cellId)\n }, [cellId, setEditingCellId, isPlaceholder])\n\n const handleSingleClick = () => {\n // clicking a cell that is not editing will close the editor on this cell\n if (!isCurrentCellEditing) {\n setEditingCellId(null)\n }\n }\n\n const moveToNextRow = () => {\n const rowIndex = gridMap.rowIdToIndex.get(rowId)\n if (rowIndex === undefined) return\n const newRowId = gridMap.indexToRowId.get(rowIndex + 1)\n if (newRowId) {\n const newCellId = getCellId(newRowId, columnId)\n selectCell(newCellId, false, false)\n focusCell(newCellId)\n setEditingCellId(newCellId)\n }\n }\n\n const handleOnChange: WidgetBaseProps['onChange'] = (newValue, key) => {\n setEditingCellId(null)\n if (isReadOnly) return\n // move to the next cell row\n key === 'Enter' && moveToNextRow()\n // make change if the value is different or if the key is 'Enter'\n if (newValue !== value \|\| key === 'Enter') {\n onChange?.(newValue, key)\n }\n }\n\n const handleCancel = () => {\n setEditingCellId(null)\n }\n\n const widget = useMemo(() => {\n // Common props shared across all widgets\n const sharedProps: WidgetBaseProps = {\n onChange: handleOnChange,\n onCancelEdit: handleCancel,\n isEditing: isCurrentCellEditing,\n }\n\n const textTypes: TextWidgetType[] = ['string', 'integer', 'float']\n\n // Determine widget type based on attribute type\n switch (true) {\n // this is showing the collapsed widget (dot)\n case isCollapsed: {\n // if enum, find the first selected option and get its color\n const firstSelectedOption = type?.includes('list')\n ? options.find((option) =>\n Array.isArray(value) ? value.includes(option.value) : value === option.value,\n )\n : undefined\n const color = firstSelectedOption?.color\n return <CollapsedWidget color={color} />\n }\n\n case !!options.length: {\n const enumValue = Array.isArray(value) ? value : [value]\n if (isReadOnly) {\n return (\n <TextWidget\n value={enumValue.join(', ')}\n option={\n enumValue.length === 1 ? options.find((o) => o.value === enumValue[0]) : undefined\n }\n {...sharedProps}\n />\n )\n }\n return (\n <EnumWidget\n value={enumValue}\n options={options}\n type={type}\n onOpen={() => !isReadOnly && setEditingCellId(cellId)}\n enableCustomValues={enableCustomValues}\n {...sharedProps}\n {...pt?.enum}\n />\n )\n }\n\n case textTypes.includes(type as TextWidgetType):\n return (\n <TextWidget\n value={value as string}\n isInherited={isInherited}\n {...sharedProps}\n {...pt?.text}\n />\n )\n\n case type === 'datetime':\n return (\n <DateWidget\n value={value ? (value as string) : undefined}\n isInherited={isInherited}\n {...sharedProps}\n {...pt?.date}\n />\n )\n\n case type === 'boolean':\n return <BooleanWidget value={value as boolean} {...sharedProps} {...pt?.boolean} />\n\n case isPlaceholder:\n return null\n\n default:\n // TODO: We should not allow editing unrecognized types\n // At this point, only list_of_strings without proper options is unrecognized\n // (tags if not tags are specified in anatomy) and in that case, validation\n // on the server fails with a string value. Unless we have a widget that\n // accepts a string value AND options at the same time we shouldn't show\n // any edit widget\n\n //console.log(`Unrecognized type \"${type}\" for cell ${cellId}.`)\n return null\n }\n }, [cellId, value, type, isCurrentCellEditing, options, isCollapsed])\n\n return (\n <Cell\n {...props}\n className={clsx(props.className, { inherited: isInherited && !isCurrentCellEditing })}\n ref={ref}\n onDoubleClick={handleDoubleClick}\n onClick={handleSingleClick}\n id={cellId}\n data-tooltip={\n isInherited && !isCurrentCellEditing && isCurrentCellFocused ? 'Inherited' : undefined\n }\n data-tooltip-delay={200}\n >\n {widget}\n </Cell>\n )\n}\n\n// Custom comparison function for memo\nfunction arePropsEqual(prevProps: EditorCellProps, nextProps: EditorCellProps) {\n // Only re-render if these props change\n return (\n prevProps.rowId === nextProps.rowId &&\n prevProps.columnId === nextProps.columnId &&\n prevProps.isCollapsed === nextProps.isCollapsed &&\n JSON.stringify(prevProps.value) === JSON.stringify(nextProps.value) &&\n prevProps?.attributeData?.type === nextProps?.attributeData?.type &&\n // Only check options length for list types to avoid deep comparison\n ((!prevProps?.attributeData?.type.includes('list') &&\n !nextProps?.attributeData?.type.includes('list')) \|\|\n prevProps.options?.length === nextProps.options?.length) &&\n prevProps.isInherited === nextProps.isInherited &&\n prevProps.enableCustomValues === nextProps.enableCustomValues &&\n prevProps.isReadOnly === nextProps.isReadOnly &&\n prevProps.isPlaceholder === nextProps.isPlaceholder &&\n prevProps.isFocused === nextProps.isFocused &&\n prevProps.isCollapsed === nextProps.isCollapsed\n )\n}\n\nexport const CellWidget = memo(EditorCellComponent, arePropsEqual)\n"],"names":["jsx"],"mappings":"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"}

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

@@ -7,11 +7,13 @@ const DateWidgetInput = require("./DateWidgetInput.cjs.js");
 const DateWidget = React.forwardRef(
   ({ value, isEditing, isReadOnly, isInherited, onChange, onCancelEdit, ...props }, ref) => {
     let dateString = "";
-    try {
-      dateString = dateFns.format(new Date(value), "dd-MM-yyyy");
-    } catch (error) {
-      console.error("Invalid date value:", value);
-      dateString = "Invalid Date";
+    if (value) {
+      try {
+        dateString = dateFns.format(new Date(value), "dd-MM-yyyy");
+      } catch (error) {
+        console.error("Invalid date value:", value);
+        dateString = "Invalid Date";
+      }
     }
     if (isEditing) {
       return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/DateWidget.tsx"],"sourcesContent":["import { format } from 'date-fns'\nimport { forwardRef } from 'react'\nimport { DateWidgetInput } from './DateWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\n\~~ninterface~~ DateWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n isReadOnly?: boolean\n isInherited?: boolean\n}\n\nexport const DateWidget = forwardRef<HTMLSpanElement, DateWidgetProps>(\n ({ value, isEditing, isReadOnly, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n let dateString = ''\n try {\n dateString = format(new Date(value), 'dd-MM-yyyy')\n } catch (error) {\n console.error('Invalid date value:', value)\n dateString = 'Invalid Date'\n }\n\n if (isEditing) {\n return (\n <DateWidgetInput\n value={value}\n onChange={onChange}\n onCancel={onCancelEdit}\n readOnly={isReadOnly}\n disabled={isReadOnly}\n {...(props as any)}\n />\n )\n }\n\n return (\n <span {...props} ref={ref}>\n {dateString}\n </span>\n )\n },\n)\n"],"names":["forwardRef","format","jsx","DateWidgetInput"],"mappings":";;;;;;AAaO,MAAM,aAAaA,MAAA;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,YAAY,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACxF,QAAI,aAAa;~~AACb~~,~~QAAA~~;~~AACF~~,~~mBAAaC~~,QAAAA,OAAO,IAAI,KAAK,KAAK,GAAG,YAAY;AAAA,~~aAC1C~~,OAAO;AACN,~~cAAA~~,MAAM,uBAAuB,KAAK;AAC7B,~~mBAAA~~;AAAA,~~IAAA~~;~~AAGf~~,QAAI,WAAW;AAEX,aAAAC,2BAAA,kBAAA;AAAA,QAACC,gBAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACT,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIJ,WACGD,2BAAAA,kBAAAA,IAAA,QAAA,EAAM,GAAG,OAAO,KACd,UACH,YAAA;AAAA,EAAA;AAGN;;"}
1	+ {"version":3,"file":"DateWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/DateWidget.tsx"],"sourcesContent":["import { format } from 'date-fns'\nimport { forwardRef } from 'react'\nimport { DateWidgetInput } from './DateWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\n\nexport interface DateWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value?: string\n isReadOnly?: boolean\n isInherited?: boolean\n}\n\nexport const DateWidget = forwardRef<HTMLSpanElement, DateWidgetProps>(\n ({ value, isEditing, isReadOnly, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n let dateString = ''\n if (value) {\n try {\n dateString = format(new Date(value), 'dd-MM-yyyy')\n } catch (error) {\n console.error('Invalid date value:', value)\n dateString = 'Invalid Date'\n }\n }\n\n if (isEditing) {\n return (\n <DateWidgetInput\n value={value}\n onChange={onChange}\n onCancel={onCancelEdit}\n readOnly={isReadOnly}\n disabled={isReadOnly}\n {...(props as any)}\n />\n )\n }\n\n return (\n <span {...props} ref={ref}>\n {dateString}\n </span>\n )\n },\n)\n"],"names":["forwardRef","format","jsx","DateWidgetInput"],"mappings":";;;;;;AAaO,MAAM,aAAaA,MAAA;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,YAAY,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACxF,QAAI,aAAa;AACjB,QAAI,OAAO;AACL,UAAA;AACA,qBAAaC,QAAAA,OAAO,IAAI,KAAK,KAAK,GAAG,YAAY;AAAA,eAC5C,OAAO;AACN,gBAAA,MAAM,uBAAuB,KAAK;AAC7B,qBAAA;AAAA,MAAA;AAAA,IACf;AAGF,QAAI,WAAW;AAEX,aAAAC,2BAAA,kBAAA;AAAA,QAACC,gBAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACT,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIJ,WACGD,2BAAAA,kBAAAA,IAAA,QAAA,EAAM,GAAG,OAAO,KACd,UACH,YAAA;AAAA,EAAA;AAGN;;"}

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

@@ -5,11 +5,13 @@ import { DateWidgetInput } from "./DateWidgetInput.es.js";
 const DateWidget = forwardRef(
   ({ value, isEditing, isReadOnly, isInherited, onChange, onCancelEdit, ...props }, ref) => {
     let dateString = "";
-    try {
-      dateString = format(new Date(value), "dd-MM-yyyy");
-    } catch (error) {
-      console.error("Invalid date value:", value);
-      dateString = "Invalid Date";
+    if (value) {
+      try {
+        dateString = format(new Date(value), "dd-MM-yyyy");
+      } catch (error) {
+        console.error("Invalid date value:", value);
+        dateString = "Invalid Date";
+      }
     }
     if (isEditing) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/DateWidget.tsx"],"sourcesContent":["import { format } from 'date-fns'\nimport { forwardRef } from 'react'\nimport { DateWidgetInput } from './DateWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\n\~~ninterface~~ DateWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n isReadOnly?: boolean\n isInherited?: boolean\n}\n\nexport const DateWidget = forwardRef<HTMLSpanElement, DateWidgetProps>(\n ({ value, isEditing, isReadOnly, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n let dateString = ''\n try {\n dateString = format(new Date(value), 'dd-MM-yyyy')\n } catch (error) {\n console.error('Invalid date value:', value)\n dateString = 'Invalid Date'\n }\n\n if (isEditing) {\n return (\n <DateWidgetInput\n value={value}\n onChange={onChange}\n onCancel={onCancelEdit}\n readOnly={isReadOnly}\n disabled={isReadOnly}\n {...(props as any)}\n />\n )\n }\n\n return (\n <span {...props} ref={ref}>\n {dateString}\n </span>\n )\n },\n)\n"],"names":["jsx"],"mappings":";;;;AAaO,MAAM,aAAa;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,YAAY,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACxF,QAAI,aAAa;~~AACb~~,~~QAAA~~;~~AACF~~,~~mBAAa~~,OAAO,IAAI,KAAK,KAAK,GAAG,YAAY;AAAA,~~aAC1C~~,OAAO;AACN,~~cAAA~~,MAAM,uBAAuB,KAAK;AAC7B,~~mBAAA~~;AAAA,~~IAAA~~;~~AAGf~~,QAAI,WAAW;AAEX,aAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACT,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIJ,WACGA,kCAAAA,IAAA,QAAA,EAAM,GAAG,OAAO,KACd,UACH,YAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"DateWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/DateWidget.tsx"],"sourcesContent":["import { format } from 'date-fns'\nimport { forwardRef } from 'react'\nimport { DateWidgetInput } from './DateWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\n\nexport interface DateWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value?: string\n isReadOnly?: boolean\n isInherited?: boolean\n}\n\nexport const DateWidget = forwardRef<HTMLSpanElement, DateWidgetProps>(\n ({ value, isEditing, isReadOnly, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n let dateString = ''\n if (value) {\n try {\n dateString = format(new Date(value), 'dd-MM-yyyy')\n } catch (error) {\n console.error('Invalid date value:', value)\n dateString = 'Invalid Date'\n }\n }\n\n if (isEditing) {\n return (\n <DateWidgetInput\n value={value}\n onChange={onChange}\n onCancel={onCancelEdit}\n readOnly={isReadOnly}\n disabled={isReadOnly}\n {...(props as any)}\n />\n )\n }\n\n return (\n <span {...props} ref={ref}>\n {dateString}\n </span>\n )\n },\n)\n"],"names":["jsx"],"mappings":";;;;AAaO,MAAM,aAAa;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,YAAY,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACxF,QAAI,aAAa;AACjB,QAAI,OAAO;AACL,UAAA;AACA,qBAAa,OAAO,IAAI,KAAK,KAAK,GAAG,YAAY;AAAA,eAC5C,OAAO;AACN,gBAAA,MAAM,uBAAuB,KAAK;AAC7B,qBAAA;AAAA,MAAA;AAAA,IACf;AAGF,QAAI,WAAW;AAEX,aAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACT,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIJ,WACGA,kCAAAA,IAAA,QAAA,EAAM,GAAG,OAAO,KACd,UACH,YAAA;AAAA,EAAA;AAGN;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n background-color: unset;\n padding: 2px !important;\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .path {\n ${theme.labelSmall}\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n }\n\n span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n}: EntityNameWidgetProps) => {\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: path ? 32 : 24 }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent>\n {path && <span className=\"path\">{path}</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["Button","theme","jsx","jsxs","Icon"],"mappings":";;;;;AAGA,MAAM,WAAW,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUtC,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;AAyBf,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,2DACG,wBACE,EAAA,UAAA;AAAA,IAAA,gBACC,SAAS,WACPC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI,EAAE,QAAQ;AAEZ,4BAAgB,EAAE;AAAA,UAAA,OACb;AAEU,2BAAA;AAAA,UAAA;AAAA,QAEnB;AAAA,QACA,WAAU;AAAA,QACV,MAAM,aAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC,IAECA,iDAAA,OAAA,EAAI,OAAO,EAAE,SAAS,gBAAgB,UAAU,KAAM,CAAA,IAEvD;AAAA,IACHA,2BAAA,kBAAA,IAAA,sBAAA,EAAqB,OAAO,EAAE,QAAQ,OAAO,KAAK,GAAA,GACjD,UAAAA,2BAAAA,kBAAAA,IAAC,uBACC,EAAA,UAAAC,2BAAAA,kBAAAA,KAAC,eACE,EAAA,UAAA;AAAA,MAAQ,QAAAD,2BAAA,kBAAA,IAACE,4BAAK,KAAY,CAAA;AAAA,wDAC1B,mBACE,EAAA,UAAA;AAAA,QAAA,QAASF,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,QAAQ,UAAK,MAAA;AAAA,QACrCA,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,SAAS,mBAAS,KAAK,CAAA;AAAA,MAAA,EACzC,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
1	+ {"version":3,"file":"EntityNameWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n background-color: unset;\n padding: 2px !important;\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .path {\n ${theme.labelSmall}\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n }\n\n span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon?: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n}: EntityNameWidgetProps) => {\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: path ? 32 : 24 }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent>\n {path && <span className=\"path\">{path}</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["Button","theme","jsx","jsxs","Icon"],"mappings":";;;;;AAGA,MAAM,WAAW,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUtC,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;AAyBf,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,2DACG,wBACE,EAAA,UAAA;AAAA,IAAA,gBACC,SAAS,WACPC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI,EAAE,QAAQ;AAEZ,4BAAgB,EAAE;AAAA,UAAA,OACb;AAEU,2BAAA;AAAA,UAAA;AAAA,QAEnB;AAAA,QACA,WAAU;AAAA,QACV,MAAM,aAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC,IAECA,iDAAA,OAAA,EAAI,OAAO,EAAE,SAAS,gBAAgB,UAAU,KAAM,CAAA,IAEvD;AAAA,IACHA,2BAAA,kBAAA,IAAA,sBAAA,EAAqB,OAAO,EAAE,QAAQ,OAAO,KAAK,GAAA,GACjD,UAAAA,2BAAAA,kBAAAA,IAAC,uBACC,EAAA,UAAAC,2BAAAA,kBAAAA,KAAC,eACE,EAAA,UAAA;AAAA,MAAQ,QAAAD,2BAAA,kBAAA,IAACE,4BAAK,KAAY,CAAA;AAAA,wDAC1B,mBACE,EAAA,UAAA;AAAA,QAAA,QAASF,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,QAAQ,UAAK,MAAA;AAAA,QACrCA,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,SAAS,mBAAS,KAAK,CAAA;AAAA,MAAA,EACzC,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n background-color: unset;\n padding: 2px !important;\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .path {\n ${theme.labelSmall}\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n }\n\n span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n}: EntityNameWidgetProps) => {\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: path ? 32 : 24 }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent>\n {path && <span className=\"path\">{path}</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["jsx","jsxs"],"mappings":";;;AAGA,MAAM,WAAW,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUtC,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;AAyBf,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,gDACG,wBACE,EAAA,UAAA;AAAA,IAAA,gBACC,SAAS,WACPA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI,EAAE,QAAQ;AAEZ,4BAAgB,EAAE;AAAA,UAAA,OACb;AAEU,2BAAA;AAAA,UAAA;AAAA,QAEnB;AAAA,QACA,WAAU;AAAA,QACV,MAAM,aAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC,IAECA,sCAAA,OAAA,EAAI,OAAO,EAAE,SAAS,gBAAgB,UAAU,KAAM,CAAA,IAEvD;AAAA,IACHA,kCAAA,IAAA,sBAAA,EAAqB,OAAO,EAAE,QAAQ,OAAO,KAAK,GAAA,GACjD,UAAAA,kCAAAA,IAAC,uBACC,EAAA,UAAAC,kCAAAA,KAAC,eACE,EAAA,UAAA;AAAA,MAAQ,QAAAD,kCAAA,IAAC,QAAK,KAAY,CAAA;AAAA,6CAC1B,mBACE,EAAA,UAAA;AAAA,QAAA,QAASA,kCAAA,IAAA,QAAA,EAAK,WAAU,QAAQ,UAAK,MAAA;AAAA,QACrCA,kCAAA,IAAA,QAAA,EAAK,WAAU,SAAS,mBAAS,KAAK,CAAA;AAAA,MAAA,EACzC,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"EntityNameWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EntityNameWidget.tsx"],"sourcesContent":["import { Button, Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nconst Expander = styled(Button)`\n background-color: unset;\n padding: 2px !important;\n cursor: pointer;\n`\n\nconst StyledEntityNameWidget = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding-right: 8px;\n`\n\nconst StyledContentWrapper = styled.div`\n width: 100%;\n height: 24px;\n overflow: hidden;\n position: relative;\n`\n\nconst StyledContentAbsolute = styled.div`\n position: absolute;\n inset: 0;\n`\n\nconst StyledContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n padding: 2px 4px;\n border-radius: var(--border-radius-m);\n cursor: pointer;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n height: 100%;\n\n /* &:hover {\n &,\n .icon,\n .path {\n color: var(--md-sys-color-primary);\n }\n } */\n`\n\nconst StyledTextContent = styled.div`\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .path {\n ${theme.labelSmall}\n margin-bottom: -4px;\n color: var(--md-sys-color-outline);\n }\n\n span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`\n\ntype EntityNameWidgetProps = {\n id: string\n label: string\n name: string\n path?: string \| null\n showHierarchy?: boolean\n icon?: string \| null\n type: string\n isExpanded: boolean\n toggleExpandAll: (id: string) => void\n toggleExpanded: () => void\n}\n\nexport const EntityNameWidget = ({\n id,\n label,\n name,\n path,\n showHierarchy,\n icon,\n type,\n isExpanded,\n toggleExpandAll,\n toggleExpanded,\n}: EntityNameWidgetProps) => {\n return (\n <StyledEntityNameWidget>\n {showHierarchy ? (\n type === 'folder' ? (\n <Expander\n onClick={(e) => {\n e.stopPropagation()\n if (e.altKey) {\n // expand/collapse all children\n toggleExpandAll(id)\n } else {\n // use built-in toggleExpanded function\n toggleExpanded()\n }\n }}\n className=\"expander\"\n icon={isExpanded ? 'expand_more' : 'chevron_right'}\n />\n ) : (\n <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n ) : null}\n <StyledContentWrapper style={{ height: path ? 32 : 24 }}>\n <StyledContentAbsolute>\n <StyledContent>\n {icon && <Icon icon={icon} />}\n <StyledTextContent>\n {path && <span className=\"path\">{path}</span>}\n <span className=\"label\">{label \|\| name}</span>\n </StyledTextContent>\n </StyledContent>\n </StyledContentAbsolute>\n </StyledContentWrapper>\n </StyledEntityNameWidget>\n )\n}\n"],"names":["jsx","jsxs"],"mappings":";;;AAGA,MAAM,WAAW,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUtC,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;AAyBf,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,gDACG,wBACE,EAAA,UAAA;AAAA,IAAA,gBACC,SAAS,WACPA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI,EAAE,QAAQ;AAEZ,4BAAgB,EAAE;AAAA,UAAA,OACb;AAEU,2BAAA;AAAA,UAAA;AAAA,QAEnB;AAAA,QACA,WAAU;AAAA,QACV,MAAM,aAAa,gBAAgB;AAAA,MAAA;AAAA,IACrC,IAECA,sCAAA,OAAA,EAAI,OAAO,EAAE,SAAS,gBAAgB,UAAU,KAAM,CAAA,IAEvD;AAAA,IACHA,kCAAA,IAAA,sBAAA,EAAqB,OAAO,EAAE,QAAQ,OAAO,KAAK,GAAA,GACjD,UAAAA,kCAAAA,IAAC,uBACC,EAAA,UAAAC,kCAAAA,KAAC,eACE,EAAA,UAAA;AAAA,MAAQ,QAAAD,kCAAA,IAAC,QAAK,KAAY,CAAA;AAAA,6CAC1B,mBACE,EAAA,UAAA;AAAA,QAAA,QAASA,kCAAA,IAAA,QAAA,EAAK,WAAU,QAAQ,UAAK,MAAA;AAAA,QACrCA,kCAAA,IAAA,QAAA,EAAK,WAAU,SAAS,mBAAS,KAAK,CAAA;AAAA,MAAA,EACzC,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -194,6 +194,7 @@ const EnumWidget = React.forwardRef(
                 hasMultipleValues: false,
                 isOpen: false,
                 isItem: true,
+                isMultiSelect,
                 isSelected,
                 ...pt == null ? void 0 : pt.template,
                 className: clsx("enum-dropdown-item", (_a2 = pt == null ? void 0 : pt.template) == null ? void 0 : _a2.className)
@@ -278,6 +279,14 @@ const EnumCellValue = ({
         icon: "expand_more",
         style: { rotate: isOpen ? "180deg" : "0" }
       }
+    ),
+    isItem && isSelected && isMultiSelect && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      ayonReactComponents.Icon,
+      {
+        icon: "close",
+        style: { marginLeft: "auto", marginRight: 4 },
+        "aria-label": "Deselect item"
+      }
     )
   ] });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EnumWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\n\nconst StyledWidget = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0 2px;\n cursor: pointer;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n\n &.item {\n padding: 4px 2px;\n border-radius: 0;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &:hover {\n background-color: var(--md-sys-color-primary-container-hover);\n }\n }\n`\n\nconst StyledValuesContainer = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n`\n\nconst StyledValueWrapper = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n\n overflow: hidden;\n max-width: 100%;\n min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n /* push expand icon to the end */\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n text-overflow: ellipsis;\n text-align: left;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n text-align: center;\n\n &.placeholder {\n color: var(--md-sys-color-outline);\n }\n`\n\nconst StyledImg = styled.img`\n width: 20px;\n height: 20px;\n object-fit: cover;\n\n &.avatar {\n border-radius: 50%;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n margin-left: auto;\n transition: rotate 0.2s;\n`\n\nconst StyledDropdown = styled(Dropdown)`\n height: 100%;\n width: 100%;\n`\n\ninterface EnumWidgetProps extends Omit<DropdownProps, 'onChange' \| 'value'>, WidgetBaseProps {\n value: (string \| number \| boolean)[]\n options: AttributeEnumItem[]\n type?: AttributeData['type']\n autoOpen?: boolean\n isReadOnly?: boolean\n enableCustomValues?: boolean\n pt?: {\n template?: Partial<EnumTemplateProps>\n }\n onOpen?: () => void\n onNext?: () => void\n}\n\nconst checkForImgSrc = (icon: string \| undefined = ''): boolean => {\n return (\n icon.startsWith('/') \|\|\n icon.startsWith('./') \|\|\n icon.startsWith('../') \|\|\n icon.startsWith('http://') \|\|\n icon.startsWith('https://')\n )\n}\n\nconst checkAvatarImg = (src: string): boolean => src.includes('avatar')\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n (\n {\n value,\n isEditing,\n options,\n type,\n autoOpen = true,\n isReadOnly,\n enableCustomValues,\n onOpen,\n onChange,\n onCancelEdit,\n onNext,\n pt,\n ...dropdownProps\n },\n _ref,\n ) => {\n // convert value to string array\n const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n let selectedOptions = options.filter((option) =>\n valueAsStrings.includes(option.value.toString()),\n )\n\n // Check if all values are present in options, if not, add a warning\n valueAsStrings.forEach((val) => {\n if (!options.find((option) => option.value === val)) {\n selectedOptions = [\n ...selectedOptions,\n {\n label: val,\n value: val,\n color: enableCustomValues\n ? 'var(--md-sys-color-surface-container)'\n : 'var(--md-sys-color-error)',\n icon: enableCustomValues ? undefined : 'warning',\n },\n ]\n }\n })\n const hasMultipleValues = selectedOptions.length > 1\n\n const dropdownRef = useRef<DropdownRef>(null)\n\n const handleClosedClick = (e: React.MouseEvent<HTMLSpanElement>) => {\n // if we click on the chevron icon, then we open the dropdown spright away (put it into editing mode)\n if (e.target instanceof HTMLElement && e.target.closest('.expand') && onOpen && !isReadOnly) {\n onOpen()\n // stop the event from propagating to the parent element because a single click on the cell would close the dropdown\n e.stopPropagation()\n }\n }\n\n const [dropdownOpen, setDropdownOpen] = useState(false)\n useEffect(() => {\n if (isEditing && dropdownRef.current && autoOpen) {\n !dropdownRef.current.isOpen && dropdownRef.current?.open()\n setDropdownOpen(true)\n } else {\n setDropdownOpen(false)\n }\n }, [isEditing, dropdownRef.current, autoOpen])\n\n // when the dropdown is open, focus the first item\n useEffect(() => {\n if (dropdownOpen) {\n const optionsUlEl = dropdownRef.current?.getOptions() as HTMLUListElement\n const firstItem = optionsUlEl?.querySelector('li')\n if (firstItem) {\n firstItem.focus()\n // set style of li to have no outline (no focus ring)\n firstItem.style.outline = 'none'\n }\n }\n }, [dropdownOpen])\n\n const isMultiSelect = !!type?.includes('list')\n\n const handleChange = (value: string[]) => {\n const filteredValue = enableCustomValues\n ? value\n : value.filter((v) => options.find((o) => o.value === v))\n\n if (type?.includes('list')) {\n onChange(filteredValue, 'Click')\n } else {\n // take first value as the type is not list]\n onChange(filteredValue[0], 'Click')\n }\n }\n\n if (isEditing) {\n return (\n <StyledDropdown\n options={options}\n value={valueAsStrings}\n ref={dropdownRef}\n valueTemplate={(_value, selected, isOpen) => (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={selected.length > 1}\n isOpen={isOpen}\n isReadOnly={isReadOnly}\n isMultiSelect={isMultiSelect}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-dropdown-value', pt?.template?.className)}\n />\n )}\n itemTemplate={(option, _isActive, isSelected) => (\n <EnumCellValue\n selectedOptions={[option]}\n hasMultipleValues={false}\n isOpen={false}\n isItem\n isSelected={isSelected}\n {...pt?.template}\n className={clsx('enum-dropdown-item', pt?.template?.className)}\n />\n )}\n widthExpand\n multiSelect={isMultiSelect}\n disableOpen={isReadOnly}\n disabled={isReadOnly}\n sortBySelected\n {...dropdownProps}\n onChange={handleChange}\n onClose={onCancelEdit}\n />\n )\n }\n\n return (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={hasMultipleValues}\n onClick={handleClosedClick}\n isMultiSelect={isMultiSelect}\n isReadOnly={isReadOnly}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-value', pt?.template?.className, dropdownProps.className)}\n />\n )\n },\n)\n\ninterface EnumTemplateProps extends React.HTMLAttributes<HTMLSpanElement> {\n selectedOptions: AttributeEnumItem[]\n placeholder?: string\n hasMultipleValues: boolean\n isMultiSelect?: boolean\n isOpen?: boolean\n isItem?: boolean\n isSelected?: boolean\n isReadOnly?: boolean\n}\n\nconst EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n className,\n ...props\n}: EnumTemplateProps) => {\n // Check if all options have icons\n const allOptionsHaveIcon = selectedOptions.every((option) => option.icon)\n\n // Determine if we should show labels based on the requirements\n const showLabels = !hasMultipleValues \|\| !allOptionsHaveIcon\n // Show the colors be backgrounds instead of the text\n const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem\n\n const isPlaceholder = !selectedOptions.length && placeholder\n if (isPlaceholder) {\n selectedOptions = [\n {\n label: placeholder,\n value: '',\n },\n ]\n }\n\n return (\n <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n <StyledValuesContainer>\n {selectedOptions.map((option, i) => (\n <StyledValueWrapper key={option.value.toString() + i}>\n {option.icon && checkForImgSrc(option.icon) ? (\n <StyledImg\n src={option.icon}\n className={clsx({ avatar: checkAvatarImg(option.icon) })}\n />\n ) : option.icon ? (\n <Icon icon={option.icon} style={{ color: option.color }} />\n ) : null}\n\n {(showLabels \|\| !option.icon) && (\n <StyledValue\n style={{\n color: backgroundColor ? 'inherit' : option.color,\n backgroundColor: backgroundColor\n ? option.color \|\| 'var(--md-sys-color-surface-container)'\n : 'transparent',\n }}\n className={clsx({ placeholder: isPlaceholder })}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandIcon\n className=\"expand\"\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0' }}\n />\n )}\n </StyledWidget>\n )\n}\n"],"names":["Icon","Dropdown","forwardRef","useRef","useState","useEffect","_a","value","jsx","jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"EnumWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\n\nconst StyledWidget = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0 2px;\n cursor: pointer;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n\n &.item {\n padding: 4px 2px;\n border-radius: 0;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &:hover {\n background-color: var(--md-sys-color-primary-container-hover);\n }\n }\n`\n\nconst StyledValuesContainer = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n`\n\nconst StyledValueWrapper = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n\n overflow: hidden;\n max-width: 100%;\n min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n /* push expand icon to the end */\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n text-overflow: ellipsis;\n text-align: left;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n text-align: center;\n\n &.placeholder {\n color: var(--md-sys-color-outline);\n }\n`\n\nconst StyledImg = styled.img`\n width: 20px;\n height: 20px;\n object-fit: cover;\n\n &.avatar {\n border-radius: 50%;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n margin-left: auto;\n transition: rotate 0.2s;\n`\n\nconst StyledDropdown = styled(Dropdown)`\n height: 100%;\n width: 100%;\n`\n\nexport interface EnumWidgetProps\n extends Omit<DropdownProps, 'onChange' \| 'value'>,\n WidgetBaseProps {\n value: (string \| number \| boolean)[]\n options: AttributeEnumItem[]\n type?: AttributeData['type']\n autoOpen?: boolean\n isReadOnly?: boolean\n enableCustomValues?: boolean\n pt?: {\n template?: Partial<EnumTemplateProps>\n }\n onOpen?: () => void\n onNext?: () => void\n}\n\nconst checkForImgSrc = (icon: string \| undefined = ''): boolean => {\n return (\n icon.startsWith('/') \|\|\n icon.startsWith('./') \|\|\n icon.startsWith('../') \|\|\n icon.startsWith('http://') \|\|\n icon.startsWith('https://')\n )\n}\n\nconst checkAvatarImg = (src: string): boolean => src.includes('avatar')\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n (\n {\n value,\n isEditing,\n options,\n type,\n autoOpen = true,\n isReadOnly,\n enableCustomValues,\n onOpen,\n onChange,\n onCancelEdit,\n onNext,\n pt,\n ...dropdownProps\n },\n _ref,\n ) => {\n // convert value to string array\n const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n let selectedOptions = options.filter((option) =>\n valueAsStrings.includes(option.value.toString()),\n )\n\n // Check if all values are present in options, if not, add a warning\n valueAsStrings.forEach((val) => {\n if (!options.find((option) => option.value === val)) {\n selectedOptions = [\n ...selectedOptions,\n {\n label: val,\n value: val,\n color: enableCustomValues\n ? 'var(--md-sys-color-surface-container)'\n : 'var(--md-sys-color-error)',\n icon: enableCustomValues ? undefined : 'warning',\n },\n ]\n }\n })\n const hasMultipleValues = selectedOptions.length > 1\n\n const dropdownRef = useRef<DropdownRef>(null)\n\n const handleClosedClick = (e: React.MouseEvent<HTMLSpanElement>) => {\n // if we click on the chevron icon, then we open the dropdown spright away (put it into editing mode)\n if (e.target instanceof HTMLElement && e.target.closest('.expand') && onOpen && !isReadOnly) {\n onOpen()\n // stop the event from propagating to the parent element because a single click on the cell would close the dropdown\n e.stopPropagation()\n }\n }\n\n const [dropdownOpen, setDropdownOpen] = useState(false)\n useEffect(() => {\n if (isEditing && dropdownRef.current && autoOpen) {\n !dropdownRef.current.isOpen && dropdownRef.current?.open()\n setDropdownOpen(true)\n } else {\n setDropdownOpen(false)\n }\n }, [isEditing, dropdownRef.current, autoOpen])\n\n // when the dropdown is open, focus the first item\n useEffect(() => {\n if (dropdownOpen) {\n const optionsUlEl = dropdownRef.current?.getOptions() as HTMLUListElement\n const firstItem = optionsUlEl?.querySelector('li')\n if (firstItem) {\n firstItem.focus()\n // set style of li to have no outline (no focus ring)\n firstItem.style.outline = 'none'\n }\n }\n }, [dropdownOpen])\n\n const isMultiSelect = !!type?.includes('list')\n\n const handleChange = (value: string[]) => {\n const filteredValue = enableCustomValues\n ? value\n : value.filter((v) => options.find((o) => o.value === v))\n\n if (type?.includes('list')) {\n onChange(filteredValue, 'Click')\n } else {\n // take first value as the type is not list]\n onChange(filteredValue[0], 'Click')\n }\n }\n\n if (isEditing) {\n return (\n <StyledDropdown\n options={options}\n value={valueAsStrings}\n ref={dropdownRef}\n valueTemplate={(_value, selected, isOpen) => (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={selected.length > 1}\n isOpen={isOpen}\n isReadOnly={isReadOnly}\n isMultiSelect={isMultiSelect}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-dropdown-value', pt?.template?.className)}\n />\n )}\n itemTemplate={(option, _isActive, isSelected) => (\n <EnumCellValue\n selectedOptions={[option]}\n hasMultipleValues={false}\n isOpen={false}\n isItem\n isMultiSelect={isMultiSelect}\n isSelected={isSelected}\n {...pt?.template}\n className={clsx('enum-dropdown-item', pt?.template?.className)}\n />\n )}\n widthExpand\n multiSelect={isMultiSelect}\n disableOpen={isReadOnly}\n disabled={isReadOnly}\n sortBySelected\n {...dropdownProps}\n onChange={handleChange}\n onClose={onCancelEdit}\n />\n )\n }\n\n return (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={hasMultipleValues}\n onClick={handleClosedClick}\n isMultiSelect={isMultiSelect}\n isReadOnly={isReadOnly}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-value', pt?.template?.className, dropdownProps.className)}\n />\n )\n },\n)\n\ninterface EnumTemplateProps extends React.HTMLAttributes<HTMLSpanElement> {\n selectedOptions: AttributeEnumItem[]\n placeholder?: string\n hasMultipleValues: boolean\n isMultiSelect: boolean\n isOpen?: boolean\n isItem?: boolean\n isSelected?: boolean\n isReadOnly?: boolean\n}\n\nconst EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n className,\n ...props\n}: EnumTemplateProps) => {\n // Check if all options have icons\n const allOptionsHaveIcon = selectedOptions.every((option) => option.icon)\n\n // Determine if we should show labels based on the requirements\n const showLabels = !hasMultipleValues \|\| !allOptionsHaveIcon\n // Show the colors be backgrounds instead of the text\n const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem\n\n const isPlaceholder = !selectedOptions.length && placeholder\n if (isPlaceholder) {\n selectedOptions = [\n {\n label: placeholder,\n value: '',\n },\n ]\n }\n\n return (\n <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n <StyledValuesContainer>\n {selectedOptions.map((option, i) => (\n <StyledValueWrapper key={option.value.toString() + i}>\n {option.icon && checkForImgSrc(option.icon) ? (\n <StyledImg\n src={option.icon}\n className={clsx({ avatar: checkAvatarImg(option.icon) })}\n />\n ) : option.icon ? (\n <Icon icon={option.icon} style={{ color: option.color }} />\n ) : null}\n\n {(showLabels \|\| !option.icon) && (\n <StyledValue\n style={{\n color: backgroundColor ? 'inherit' : option.color,\n backgroundColor: backgroundColor\n ? option.color \|\| 'var(--md-sys-color-surface-container)'\n : 'transparent',\n }}\n className={clsx({ placeholder: isPlaceholder })}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandIcon\n className=\"expand\"\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0' }}\n />\n )}\n {isItem && isSelected && isMultiSelect && (\n <Icon\n icon=\"close\"\n style={{ marginLeft: 'auto', marginRight: 4 }}\n aria-label=\"Deselect item\"\n />\n )}\n </StyledWidget>\n )\n}\n"],"names":["Icon","Dropdown","forwardRef","useRef","useState","useEffect","_a","value","jsx","jsxs"],"mappings":"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"}

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

@@ -192,6 +192,7 @@ const EnumWidget = forwardRef(
                 hasMultipleValues: false,
                 isOpen: false,
                 isItem: true,
+                isMultiSelect,
                 isSelected,
                 ...pt == null ? void 0 : pt.template,
                 className: clsx("enum-dropdown-item", (_a2 = pt == null ? void 0 : pt.template) == null ? void 0 : _a2.className)
@@ -276,6 +277,14 @@ const EnumCellValue = ({
         icon: "expand_more",
         style: { rotate: isOpen ? "180deg" : "0" }
       }
+    ),
+    isItem && isSelected && isMultiSelect && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Icon,
+      {
+        icon: "close",
+        style: { marginLeft: "auto", marginRight: 4 },
+        "aria-label": "Deselect item"
+      }
     )
   ] });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EnumWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\n\nconst StyledWidget = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0 2px;\n cursor: pointer;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n\n &.item {\n padding: 4px 2px;\n border-radius: 0;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &:hover {\n background-color: var(--md-sys-color-primary-container-hover);\n }\n }\n`\n\nconst StyledValuesContainer = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n`\n\nconst StyledValueWrapper = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n\n overflow: hidden;\n max-width: 100%;\n min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n /* push expand icon to the end */\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n text-overflow: ellipsis;\n text-align: left;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n text-align: center;\n\n &.placeholder {\n color: var(--md-sys-color-outline);\n }\n`\n\nconst StyledImg = styled.img`\n width: 20px;\n height: 20px;\n object-fit: cover;\n\n &.avatar {\n border-radius: 50%;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n margin-left: auto;\n transition: rotate 0.2s;\n`\n\nconst StyledDropdown = styled(Dropdown)`\n height: 100%;\n width: 100%;\n`\n\ninterface EnumWidgetProps extends Omit<DropdownProps, 'onChange' \| 'value'>, WidgetBaseProps {\n value: (string \| number \| boolean)[]\n options: AttributeEnumItem[]\n type?: AttributeData['type']\n autoOpen?: boolean\n isReadOnly?: boolean\n enableCustomValues?: boolean\n pt?: {\n template?: Partial<EnumTemplateProps>\n }\n onOpen?: () => void\n onNext?: () => void\n}\n\nconst checkForImgSrc = (icon: string \| undefined = ''): boolean => {\n return (\n icon.startsWith('/') \|\|\n icon.startsWith('./') \|\|\n icon.startsWith('../') \|\|\n icon.startsWith('http://') \|\|\n icon.startsWith('https://')\n )\n}\n\nconst checkAvatarImg = (src: string): boolean => src.includes('avatar')\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n (\n {\n value,\n isEditing,\n options,\n type,\n autoOpen = true,\n isReadOnly,\n enableCustomValues,\n onOpen,\n onChange,\n onCancelEdit,\n onNext,\n pt,\n ...dropdownProps\n },\n _ref,\n ) => {\n // convert value to string array\n const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n let selectedOptions = options.filter((option) =>\n valueAsStrings.includes(option.value.toString()),\n )\n\n // Check if all values are present in options, if not, add a warning\n valueAsStrings.forEach((val) => {\n if (!options.find((option) => option.value === val)) {\n selectedOptions = [\n ...selectedOptions,\n {\n label: val,\n value: val,\n color: enableCustomValues\n ? 'var(--md-sys-color-surface-container)'\n : 'var(--md-sys-color-error)',\n icon: enableCustomValues ? undefined : 'warning',\n },\n ]\n }\n })\n const hasMultipleValues = selectedOptions.length > 1\n\n const dropdownRef = useRef<DropdownRef>(null)\n\n const handleClosedClick = (e: React.MouseEvent<HTMLSpanElement>) => {\n // if we click on the chevron icon, then we open the dropdown spright away (put it into editing mode)\n if (e.target instanceof HTMLElement && e.target.closest('.expand') && onOpen && !isReadOnly) {\n onOpen()\n // stop the event from propagating to the parent element because a single click on the cell would close the dropdown\n e.stopPropagation()\n }\n }\n\n const [dropdownOpen, setDropdownOpen] = useState(false)\n useEffect(() => {\n if (isEditing && dropdownRef.current && autoOpen) {\n !dropdownRef.current.isOpen && dropdownRef.current?.open()\n setDropdownOpen(true)\n } else {\n setDropdownOpen(false)\n }\n }, [isEditing, dropdownRef.current, autoOpen])\n\n // when the dropdown is open, focus the first item\n useEffect(() => {\n if (dropdownOpen) {\n const optionsUlEl = dropdownRef.current?.getOptions() as HTMLUListElement\n const firstItem = optionsUlEl?.querySelector('li')\n if (firstItem) {\n firstItem.focus()\n // set style of li to have no outline (no focus ring)\n firstItem.style.outline = 'none'\n }\n }\n }, [dropdownOpen])\n\n const isMultiSelect = !!type?.includes('list')\n\n const handleChange = (value: string[]) => {\n const filteredValue = enableCustomValues\n ? value\n : value.filter((v) => options.find((o) => o.value === v))\n\n if (type?.includes('list')) {\n onChange(filteredValue, 'Click')\n } else {\n // take first value as the type is not list]\n onChange(filteredValue[0], 'Click')\n }\n }\n\n if (isEditing) {\n return (\n <StyledDropdown\n options={options}\n value={valueAsStrings}\n ref={dropdownRef}\n valueTemplate={(_value, selected, isOpen) => (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={selected.length > 1}\n isOpen={isOpen}\n isReadOnly={isReadOnly}\n isMultiSelect={isMultiSelect}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-dropdown-value', pt?.template?.className)}\n />\n )}\n itemTemplate={(option, _isActive, isSelected) => (\n <EnumCellValue\n selectedOptions={[option]}\n hasMultipleValues={false}\n isOpen={false}\n isItem\n isSelected={isSelected}\n {...pt?.template}\n className={clsx('enum-dropdown-item', pt?.template?.className)}\n />\n )}\n widthExpand\n multiSelect={isMultiSelect}\n disableOpen={isReadOnly}\n disabled={isReadOnly}\n sortBySelected\n {...dropdownProps}\n onChange={handleChange}\n onClose={onCancelEdit}\n />\n )\n }\n\n return (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={hasMultipleValues}\n onClick={handleClosedClick}\n isMultiSelect={isMultiSelect}\n isReadOnly={isReadOnly}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-value', pt?.template?.className, dropdownProps.className)}\n />\n )\n },\n)\n\ninterface EnumTemplateProps extends React.HTMLAttributes<HTMLSpanElement> {\n selectedOptions: AttributeEnumItem[]\n placeholder?: string\n hasMultipleValues: boolean\n isMultiSelect?: boolean\n isOpen?: boolean\n isItem?: boolean\n isSelected?: boolean\n isReadOnly?: boolean\n}\n\nconst EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n className,\n ...props\n}: EnumTemplateProps) => {\n // Check if all options have icons\n const allOptionsHaveIcon = selectedOptions.every((option) => option.icon)\n\n // Determine if we should show labels based on the requirements\n const showLabels = !hasMultipleValues \|\| !allOptionsHaveIcon\n // Show the colors be backgrounds instead of the text\n const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem\n\n const isPlaceholder = !selectedOptions.length && placeholder\n if (isPlaceholder) {\n selectedOptions = [\n {\n label: placeholder,\n value: '',\n },\n ]\n }\n\n return (\n <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n <StyledValuesContainer>\n {selectedOptions.map((option, i) => (\n <StyledValueWrapper key={option.value.toString() + i}>\n {option.icon && checkForImgSrc(option.icon) ? (\n <StyledImg\n src={option.icon}\n className={clsx({ avatar: checkAvatarImg(option.icon) })}\n />\n ) : option.icon ? (\n <Icon icon={option.icon} style={{ color: option.color }} />\n ) : null}\n\n {(showLabels \|\| !option.icon) && (\n <StyledValue\n style={{\n color: backgroundColor ? 'inherit' : option.color,\n backgroundColor: backgroundColor\n ? option.color \|\| 'var(--md-sys-color-surface-container)'\n : 'transparent',\n }}\n className={clsx({ placeholder: isPlaceholder })}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandIcon\n className=\"expand\"\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0' }}\n />\n )}\n </StyledWidget>\n )\n}\n"],"names":["_a","value","jsx","jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"EnumWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\n\nconst StyledWidget = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0 2px;\n cursor: pointer;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n\n &.item {\n padding: 4px 2px;\n border-radius: 0;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &:hover {\n background-color: var(--md-sys-color-primary-container-hover);\n }\n }\n`\n\nconst StyledValuesContainer = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n`\n\nconst StyledValueWrapper = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n\n overflow: hidden;\n max-width: 100%;\n min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n /* push expand icon to the end */\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n text-overflow: ellipsis;\n text-align: left;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n text-align: center;\n\n &.placeholder {\n color: var(--md-sys-color-outline);\n }\n`\n\nconst StyledImg = styled.img`\n width: 20px;\n height: 20px;\n object-fit: cover;\n\n &.avatar {\n border-radius: 50%;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n margin-left: auto;\n transition: rotate 0.2s;\n`\n\nconst StyledDropdown = styled(Dropdown)`\n height: 100%;\n width: 100%;\n`\n\nexport interface EnumWidgetProps\n extends Omit<DropdownProps, 'onChange' \| 'value'>,\n WidgetBaseProps {\n value: (string \| number \| boolean)[]\n options: AttributeEnumItem[]\n type?: AttributeData['type']\n autoOpen?: boolean\n isReadOnly?: boolean\n enableCustomValues?: boolean\n pt?: {\n template?: Partial<EnumTemplateProps>\n }\n onOpen?: () => void\n onNext?: () => void\n}\n\nconst checkForImgSrc = (icon: string \| undefined = ''): boolean => {\n return (\n icon.startsWith('/') \|\|\n icon.startsWith('./') \|\|\n icon.startsWith('../') \|\|\n icon.startsWith('http://') \|\|\n icon.startsWith('https://')\n )\n}\n\nconst checkAvatarImg = (src: string): boolean => src.includes('avatar')\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n (\n {\n value,\n isEditing,\n options,\n type,\n autoOpen = true,\n isReadOnly,\n enableCustomValues,\n onOpen,\n onChange,\n onCancelEdit,\n onNext,\n pt,\n ...dropdownProps\n },\n _ref,\n ) => {\n // convert value to string array\n const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n let selectedOptions = options.filter((option) =>\n valueAsStrings.includes(option.value.toString()),\n )\n\n // Check if all values are present in options, if not, add a warning\n valueAsStrings.forEach((val) => {\n if (!options.find((option) => option.value === val)) {\n selectedOptions = [\n ...selectedOptions,\n {\n label: val,\n value: val,\n color: enableCustomValues\n ? 'var(--md-sys-color-surface-container)'\n : 'var(--md-sys-color-error)',\n icon: enableCustomValues ? undefined : 'warning',\n },\n ]\n }\n })\n const hasMultipleValues = selectedOptions.length > 1\n\n const dropdownRef = useRef<DropdownRef>(null)\n\n const handleClosedClick = (e: React.MouseEvent<HTMLSpanElement>) => {\n // if we click on the chevron icon, then we open the dropdown spright away (put it into editing mode)\n if (e.target instanceof HTMLElement && e.target.closest('.expand') && onOpen && !isReadOnly) {\n onOpen()\n // stop the event from propagating to the parent element because a single click on the cell would close the dropdown\n e.stopPropagation()\n }\n }\n\n const [dropdownOpen, setDropdownOpen] = useState(false)\n useEffect(() => {\n if (isEditing && dropdownRef.current && autoOpen) {\n !dropdownRef.current.isOpen && dropdownRef.current?.open()\n setDropdownOpen(true)\n } else {\n setDropdownOpen(false)\n }\n }, [isEditing, dropdownRef.current, autoOpen])\n\n // when the dropdown is open, focus the first item\n useEffect(() => {\n if (dropdownOpen) {\n const optionsUlEl = dropdownRef.current?.getOptions() as HTMLUListElement\n const firstItem = optionsUlEl?.querySelector('li')\n if (firstItem) {\n firstItem.focus()\n // set style of li to have no outline (no focus ring)\n firstItem.style.outline = 'none'\n }\n }\n }, [dropdownOpen])\n\n const isMultiSelect = !!type?.includes('list')\n\n const handleChange = (value: string[]) => {\n const filteredValue = enableCustomValues\n ? value\n : value.filter((v) => options.find((o) => o.value === v))\n\n if (type?.includes('list')) {\n onChange(filteredValue, 'Click')\n } else {\n // take first value as the type is not list]\n onChange(filteredValue[0], 'Click')\n }\n }\n\n if (isEditing) {\n return (\n <StyledDropdown\n options={options}\n value={valueAsStrings}\n ref={dropdownRef}\n valueTemplate={(_value, selected, isOpen) => (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={selected.length > 1}\n isOpen={isOpen}\n isReadOnly={isReadOnly}\n isMultiSelect={isMultiSelect}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-dropdown-value', pt?.template?.className)}\n />\n )}\n itemTemplate={(option, _isActive, isSelected) => (\n <EnumCellValue\n selectedOptions={[option]}\n hasMultipleValues={false}\n isOpen={false}\n isItem\n isMultiSelect={isMultiSelect}\n isSelected={isSelected}\n {...pt?.template}\n className={clsx('enum-dropdown-item', pt?.template?.className)}\n />\n )}\n widthExpand\n multiSelect={isMultiSelect}\n disableOpen={isReadOnly}\n disabled={isReadOnly}\n sortBySelected\n {...dropdownProps}\n onChange={handleChange}\n onClose={onCancelEdit}\n />\n )\n }\n\n return (\n <EnumCellValue\n selectedOptions={selectedOptions}\n hasMultipleValues={hasMultipleValues}\n onClick={handleClosedClick}\n isMultiSelect={isMultiSelect}\n isReadOnly={isReadOnly}\n {...pt?.template}\n placeholder={dropdownProps.placeholder}\n className={clsx('enum-value', pt?.template?.className, dropdownProps.className)}\n />\n )\n },\n)\n\ninterface EnumTemplateProps extends React.HTMLAttributes<HTMLSpanElement> {\n selectedOptions: AttributeEnumItem[]\n placeholder?: string\n hasMultipleValues: boolean\n isMultiSelect: boolean\n isOpen?: boolean\n isItem?: boolean\n isSelected?: boolean\n isReadOnly?: boolean\n}\n\nconst EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n className,\n ...props\n}: EnumTemplateProps) => {\n // Check if all options have icons\n const allOptionsHaveIcon = selectedOptions.every((option) => option.icon)\n\n // Determine if we should show labels based on the requirements\n const showLabels = !hasMultipleValues \|\| !allOptionsHaveIcon\n // Show the colors be backgrounds instead of the text\n const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem\n\n const isPlaceholder = !selectedOptions.length && placeholder\n if (isPlaceholder) {\n selectedOptions = [\n {\n label: placeholder,\n value: '',\n },\n ]\n }\n\n return (\n <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n <StyledValuesContainer>\n {selectedOptions.map((option, i) => (\n <StyledValueWrapper key={option.value.toString() + i}>\n {option.icon && checkForImgSrc(option.icon) ? (\n <StyledImg\n src={option.icon}\n className={clsx({ avatar: checkAvatarImg(option.icon) })}\n />\n ) : option.icon ? (\n <Icon icon={option.icon} style={{ color: option.color }} />\n ) : null}\n\n {(showLabels \|\| !option.icon) && (\n <StyledValue\n style={{\n color: backgroundColor ? 'inherit' : option.color,\n backgroundColor: backgroundColor\n ? option.color \|\| 'var(--md-sys-color-surface-container)'\n : 'transparent',\n }}\n className={clsx({ placeholder: isPlaceholder })}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandIcon\n className=\"expand\"\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0' }}\n />\n )}\n {isItem && isSelected && isMultiSelect && (\n <Icon\n icon=\"close\"\n style={{ marginLeft: 'auto', marginRight: 4 }}\n aria-label=\"Deselect item\"\n />\n )}\n </StyledWidget>\n )\n}\n"],"names":["_a","value","jsx","jsxs"],"mappings":"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"}

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

@@ -4,17 +4,32 @@ const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
 const React = require("react");
 const TextWidgetInput = require("./TextWidgetInput.cjs.js");
 const styled = require("styled-components");
+const ayonReactComponents = require("@ynput/ayon-react-components");
 const StyledBaseTextWidget = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
+  gap: 4px;
 `;
 const TextWidget = React.forwardRef(
-  ({ value, isEditing, isInherited, onChange, onCancelEdit, ...props }, ref) => {
+  ({ value, option, isEditing, isInherited, onChange, onCancelEdit, style, ...props }, ref) => {
     if (isEditing) {
       return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TextWidgetInput.TextWidgetInput, { value, onChange, onCancel: onCancelEdit, type: "text" });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledBaseTextWidget, { ...props, ref, children: value });
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(StyledBaseTextWidget, { style: { color: option == null ? void 0 : option.color, ...style }, ...props, ref, children: [
+      (option == null ? void 0 : option.icon) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ayonReactComponents.Icon,
+        {
+          icon: option.icon,
+          style: {
+            color: option.color
+          }
+        }
+      ),
+      (option == null ? void 0 : option.label) || value
+    ] });
   }
 );
 exports.TextWidget = TextWidget;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\n\nconst StyledBaseTextWidget = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`\n\ntype AttributeType = AttributeData['type']\nexport type TextWidgetType = Extract<AttributeType, 'string' \| 'integer' \| 'float'>\n\~~ninterface~~ TextWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n isInherited?: boolean\n}\n\nexport const TextWidget = forwardRef<HTMLSpanElement, TextWidgetProps>(\n ({ value, isEditing, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n if (isEditing) {\n return (\n <TextWidgetInput value={value} onChange={onChange} onCancel={onCancelEdit} type={'text'} />\n )\n }\n\n return (\n <StyledBaseTextWidget {...props} ref={ref}>\n {value}\n </StyledBaseTextWidget>\n )\n },\n)\n"],"names":["forwardRef","TextWidgetInput","jsx"],"mappings":"~~;;;;;;AAMA~~,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;~~AAgB7B~~,MAAM,aAAaA,MAAA;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;~~AAC5E~~,QAAI,WAAW;AACb,8DACGC,iCAAgB,EAAA,OAAc,UAAoB,UAAU,cAAc,MAAM,QAAQ;AAAA,IAAA;AAI7F,WACGC,~~2BAAAA~~,~~kBAAAA~~,~~IAAA~~,sBAAA,~~EAAsB~~,GAAG,OAAO,~~KAC9B~~,~~UACH~~,OAAA;AAAA,EAAA;AAGN;;"}
1	+ {"version":3,"file":"TextWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\nimport { AttributeEnumItem } from '@shared/api'\nimport { Icon } from '@ynput/ayon-react-components'\n\nconst StyledBaseTextWidget = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n display: flex;\n gap: 4px;\n`\n\ntype AttributeType = AttributeData['type']\nexport type TextWidgetType = Extract<AttributeType, 'string' \| 'integer' \| 'float'>\n\nexport interface TextWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n option?: AttributeEnumItem\n isInherited?: boolean\n}\n\nexport const TextWidget = forwardRef<HTMLSpanElement, TextWidgetProps>(\n ({ value, option, isEditing, isInherited, onChange, onCancelEdit, style, ...props }, ref) => {\n if (isEditing) {\n return (\n <TextWidgetInput value={value} onChange={onChange} onCancel={onCancelEdit} type={'text'} />\n )\n }\n\n return (\n <StyledBaseTextWidget style={{ color: option?.color, ...style }} {...props} ref={ref}>\n {option?.icon && (\n <Icon\n icon={option.icon}\n style={{\n color: option.color,\n }}\n />\n )}\n {option?.label \|\| value}\n </StyledBaseTextWidget>\n )\n },\n)\n"],"names":["forwardRef","TextWidgetInput","jsxs","jsx","Icon"],"mappings":";;;;;;;AAQA,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB7B,MAAM,aAAaA,MAAA;AAAA,EACxB,CAAC,EAAE,OAAO,QAAQ,WAAW,aAAa,UAAU,cAAc,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC3F,QAAI,WAAW;AACb,8DACGC,iCAAgB,EAAA,OAAc,UAAoB,UAAU,cAAc,MAAM,QAAQ;AAAA,IAAA;AAI7F,WACGC,2BAAA,kBAAA,KAAA,sBAAA,EAAqB,OAAO,EAAE,OAAO,iCAAQ,OAAO,GAAG,MAAM,GAAI,GAAG,OAAO,KACzE,UAAA;AAAA,OAAA,iCAAQ,SACPC,2BAAA,kBAAA;AAAA,QAACC,oBAAA;AAAA,QAAA;AAAA,UACC,MAAM,OAAO;AAAA,UACb,OAAO;AAAA,YACL,OAAO,OAAO;AAAA,UAAA;AAAA,QAChB;AAAA,MACF;AAAA,OAED,iCAAQ,UAAS;AAAA,IAAA,GACpB;AAAA,EAAA;AAGN;;"}

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

@@ -2,17 +2,32 @@ import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.j
 import { forwardRef } from "react";
 import { TextWidgetInput } from "./TextWidgetInput.es.js";
 import styled from "styled-components";
+import { Icon } from "@ynput/ayon-react-components";
 const StyledBaseTextWidget = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
+  gap: 4px;
 `;
 const TextWidget = forwardRef(
-  ({ value, isEditing, isInherited, onChange, onCancelEdit, ...props }, ref) => {
+  ({ value, option, isEditing, isInherited, onChange, onCancelEdit, style, ...props }, ref) => {
     if (isEditing) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(TextWidgetInput, { value, onChange, onCancel: onCancelEdit, type: "text" });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledBaseTextWidget, { ...props, ref, children: value });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledBaseTextWidget, { style: { color: option == null ? void 0 : option.color, ...style }, ...props, ref, children: [
+      (option == null ? void 0 : option.icon) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Icon,
+        {
+          icon: option.icon,
+          style: {
+            color: option.color
+          }
+        }
+      ),
+      (option == null ? void 0 : option.label) || value
+    ] });
   }
 );
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\n\nconst StyledBaseTextWidget = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`\n\ntype AttributeType = AttributeData['type']\nexport type TextWidgetType = Extract<AttributeType, 'string' \| 'integer' \| 'float'>\n\~~ninterface~~ TextWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n isInherited?: boolean\n}\n\nexport const TextWidget = forwardRef<HTMLSpanElement, TextWidgetProps>(\n ({ value, isEditing, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n if (isEditing) {\n return (\n <TextWidgetInput value={value} onChange={onChange} onCancel={onCancelEdit} type={'text'} />\n )\n }\n\n return (\n <StyledBaseTextWidget {...props} ref={ref}>\n {value}\n </StyledBaseTextWidget>\n )\n },\n)\n"],"names":["jsx"],"mappings":"~~;;;;AAMA~~,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;~~AAgB7B~~,MAAM,aAAa;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;~~AAC5E~~,QAAI,WAAW;AACb,mDACG,iBAAgB,EAAA,OAAc,UAAoB,UAAU,cAAc,MAAM,QAAQ;AAAA,IAAA;AAI7F,WACGA,~~kCAAAA~~,~~IAAA~~,sBAAA,~~EAAsB~~,GAAG,OAAO,~~KAC9B~~,~~UACH~~,OAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"TextWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\nimport { AttributeEnumItem } from '@shared/api'\nimport { Icon } from '@ynput/ayon-react-components'\n\nconst StyledBaseTextWidget = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n display: flex;\n gap: 4px;\n`\n\ntype AttributeType = AttributeData['type']\nexport type TextWidgetType = Extract<AttributeType, 'string' \| 'integer' \| 'float'>\n\nexport interface TextWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n option?: AttributeEnumItem\n isInherited?: boolean\n}\n\nexport const TextWidget = forwardRef<HTMLSpanElement, TextWidgetProps>(\n ({ value, option, isEditing, isInherited, onChange, onCancelEdit, style, ...props }, ref) => {\n if (isEditing) {\n return (\n <TextWidgetInput value={value} onChange={onChange} onCancel={onCancelEdit} type={'text'} />\n )\n }\n\n return (\n <StyledBaseTextWidget style={{ color: option?.color, ...style }} {...props} ref={ref}>\n {option?.icon && (\n <Icon\n icon={option.icon}\n style={{\n color: option.color,\n }}\n />\n )}\n {option?.label \|\| value}\n </StyledBaseTextWidget>\n )\n },\n)\n"],"names":["jsxs","jsx"],"mappings":";;;;;AAQA,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB7B,MAAM,aAAa;AAAA,EACxB,CAAC,EAAE,OAAO,QAAQ,WAAW,aAAa,UAAU,cAAc,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC3F,QAAI,WAAW;AACb,mDACG,iBAAgB,EAAA,OAAc,UAAoB,UAAU,cAAc,MAAM,QAAQ;AAAA,IAAA;AAI7F,WACGA,kCAAA,KAAA,sBAAA,EAAqB,OAAO,EAAE,OAAO,iCAAQ,OAAO,GAAG,MAAM,GAAI,GAAG,OAAO,KACzE,UAAA;AAAA,OAAA,iCAAQ,SACPC,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,OAAO;AAAA,UACb,OAAO;AAAA,YACL,OAAO,OAAO;AAAA,UAAA;AAAA,QAChB;AAAA,MACF;AAAA,OAED,iCAAQ,UAAS;AAAA,IAAA,GACpB;AAAA,EAAA;AAGN;"}

package/dist/shared/src/containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js ADDED Viewed

@@ -0,0 +1,53 @@
+"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 React = require("react");
+const styled = require("styled-components");
+const Wrapper = styled.div`
+  position: absolute;
+  inset: 0;
+  padding: 4px;
+`;
+const Inner = styled.div`
+  position: relative;
+  max-height: 100%;
+  height: auto;
+  width: 100%;
+  aspect-ratio: 1.77;
+  background-color: var(--md-sys-color-surface-container-lowest);
+  border-radius: 2px;
+  overflow: hidden;
+`;
+const Image = styled.img`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 20;
+`;
+const StyledIcon = styled(ayonReactComponents.Icon)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+`;
+const ThumbnailWidgetWrapper = ({
+  projectName,
+  entityType,
+  entityId,
+  updatedAt,
+  icon
+}) => {
+  const valid = projectName && entityType && entityId && updatedAt;
+  const url = projectName && `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail?updatedAt=${updatedAt}`;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Wrapper, { className: "thumbnail-widget", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Inner, { children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledIcon, { icon }),
+    valid && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Image, { src: url })
+  ] }) }, url);
+};
+const ThumbnailWidget = React.memo(ThumbnailWidgetWrapper);
+exports.ThumbnailWidget = ThumbnailWidget;
+//# sourceMappingURL=ThumbnailWidget.cjs.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ThumbnailWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/ThumbnailWidget.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport { FC, memo } from 'react'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.div`\n position: absolute;\n inset: 0;\n padding: 4px;\n`\n\nconst Inner = styled.div`\n position: relative;\n max-height: 100%;\n height: auto;\n width: 100%;\n aspect-ratio: 1.77;\n\n background-color: var(--md-sys-color-surface-container-lowest);\n border-radius: 2px;\n overflow: hidden;\n`\n\nconst Image = styled.img`\n position: relative;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 20;\n`\n\nconst StyledIcon = styled(Icon)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n`\n\ninterface ThumbnailWidgetProps {\n projectName: string\n entityType: string\n entityId: string\n updatedAt?: string\n icon?: string | null\n}\n\nconst ThumbnailWidgetWrapper: FC<ThumbnailWidgetProps> = ({\n projectName,\n entityType,\n entityId,\n updatedAt,\n icon,\n}) => {\n const valid = projectName && entityType && entityId && updatedAt\n const url =\n projectName &&\n `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail?updatedAt=${updatedAt}`\n\n return (\n <Wrapper className=\"thumbnail-widget\" key={url}>\n <Inner>\n {icon && <StyledIcon icon={icon} />}\n {valid && <Image src={url} />}\n </Inner>\n </Wrapper>\n )\n}\n\nexport const ThumbnailWidget = memo(ThumbnailWidgetWrapper)\n"],"names":["Icon","jsx","memo"],"mappings":";;;;;;AAIA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrB,MAAM,aAAa,OAAOA,wBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB9B,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,QAAQ,eAAe,cAAc,YAAY;AACjD,QAAA,MACJ,eACA,iBAAiB,WAAW,IAAI,UAAU,KAAK,QAAQ,wBAAwB,SAAS;AAE1F,SACGC,2BAAA,kBAAA,IAAA,SAAA,EAAQ,WAAU,oBACjB,4DAAC,OACE,EAAA,UAAA;AAAA,IAAQ,QAAAA,2BAAA,kBAAA,IAAC,cAAW,KAAY,CAAA;AAAA,IAChC,SAASA,2BAAAA,kBAAAA,IAAC,OAAM,EAAA,KAAK,IAAK,CAAA;AAAA,EAAA,EAC7B,CAAA,KAJyC,GAK3C;AAEJ;AAEa,MAAA,kBAAkBC,WAAK,sBAAsB;;"}