@ynput/ayon-frontend-shared 0.2.18 → 0.2.20

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

@@ -5,91 +5,11 @@ const ayonReactComponents = require("@ynput/ayon-react-components");
 const clsx = require("clsx");
 const React = require("react");
 const styled = require("styled-components");
-const StyledWidget = styled.div`
-  display: flex;
-  gap: var(--base-gap-small);
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: var(--border-radius-m);
-  padding: 0 2px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--md-sys-color-surface-container-high-hover);
-  }
-
-  &.item {
-    padding: 4px 2px;
-    border-radius: 0;
-
-    &:hover {
-      background-color: var(--md-sys-color-surface-container-hover);
-    }
-  }
-
-  &.selected {
-    background-color: var(--md-sys-color-primary-container);
-
-    &:hover {
-      background-color: var(--md-sys-color-primary-container-hover);
-    }
-  }
-`;
-const StyledValuesContainer = styled.div`
-  display: flex;
-  gap: var(--base-gap-small);
-  align-items: center;
-  overflow: hidden;
-  border-radius: var(--border-radius-m);
-`;
-const StyledValueWrapper = styled.div`
-  display: flex;
-  gap: var(--base-gap-small);
-  align-items: center;
-
-  overflow: hidden;
-  max-width: 100%;
-  min-width: 20px;
-`;
-const StyledValue = styled.span`
-  /* push expand icon to the end */
-  flex: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  text-overflow: ellipsis;
-  text-align: left;
-  border-radius: var(--border-radius-m);
-  padding: 0px 2px;
-  text-align: center;
-
-  &.placeholder {
-    color: var(--md-sys-color-outline);
-  }
-`;
-const StyledImg = styled.img`
-  width: 20px;
-  height: 20px;
-  object-fit: cover;
-
-  &.avatar {
-    border-radius: 50%;
-  }
-`;
-const StyledExpandIcon = styled(ayonReactComponents.Icon)`
-  margin-left: auto;
-  transition: rotate 0.2s;
-`;
+const EnumCellValue = require("./EnumCellValue.cjs.js");
 const StyledDropdown = styled(ayonReactComponents.Dropdown)`
   height: 100%;
   width: 100%;
 `;
-const checkForImgSrc = (icon = "") => {
-  return icon.startsWith("/") || icon.startsWith("./") || icon.startsWith("../") || icon.startsWith("http://") || icon.startsWith("https://");
-};
-const checkAvatarImg = (src) => src.includes("avatar");
 const EnumWidget = React.forwardRef(
   ({
     value,
@@ -172,7 +92,7 @@ const EnumWidget = React.forwardRef(
           valueTemplate: (_value, selected, isOpen) => {
             var _a2;
             return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              EnumCellValue,
+              EnumCellValue.EnumCellValue,
               {
                 selectedOptions,
                 hasMultipleValues: selected.length > 1,
@@ -188,7 +108,7 @@ const EnumWidget = React.forwardRef(
           itemTemplate: (option, _isActive, isSelected) => {
             var _a2;
             return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              EnumCellValue,
+              EnumCellValue.EnumCellValue,
               {
                 selectedOptions: [option],
                 hasMultipleValues: false,
@@ -213,7 +133,7 @@ const EnumWidget = React.forwardRef(
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      EnumCellValue,
+      EnumCellValue.EnumCellValue,
       {
         selectedOptions,
         hasMultipleValues,
@@ -227,68 +147,5 @@ const EnumWidget = React.forwardRef(
     );
   }
 );
-const EnumCellValue = ({
-  selectedOptions,
-  placeholder,
-  hasMultipleValues,
-  isMultiSelect,
-  isOpen,
-  isItem,
-  isSelected,
-  isReadOnly,
-  className,
-  ...props
-}) => {
-  const allOptionsHaveIcon = selectedOptions.every((option) => option.icon);
-  const showLabels = !hasMultipleValues || !allOptionsHaveIcon;
-  const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem;
-  const isPlaceholder = !selectedOptions.length && placeholder;
-  if (isPlaceholder) {
-    selectedOptions = [
-      {
-        label: placeholder,
-        value: ""
-      }
-    ];
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(StyledWidget, { className: clsx(className, { selected: isSelected, item: isItem }), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledValuesContainer, { children: selectedOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(StyledValueWrapper, { children: [
-      option.icon && checkForImgSrc(option.icon) ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-        StyledImg,
-        {
-          src: option.icon,
-          className: clsx({ avatar: checkAvatarImg(option.icon) })
-        }
-      ) : option.icon ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: option.icon, style: { color: option.color } }) : null,
-      (showLabels || !option.icon) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-        StyledValue,
-        {
-          style: {
-            color: backgroundColor ? "inherit" : option.color,
-            backgroundColor: backgroundColor ? option.color || "var(--md-sys-color-surface-container)" : "transparent"
-          },
-          className: clsx({ placeholder: isPlaceholder }),
-          children: option.label
-        }
-      )
-    ] }, option.value.toString() + i)) }),
-    !isItem && !isReadOnly && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      StyledExpandIcon,
-      {
-        className: "expand",
-        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"
-      }
-    )
-  ] });
-};
 exports.EnumWidget = EnumWidget;
 //# sourceMappingURL=EnumWidget.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EnumWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef, 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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"}
+{"version":3,"file":"EnumWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\nimport { EnumCellValue, EnumTemplateProps } from './EnumCellValue'\n\nconst StyledDropdown = styled(Dropdown)`\n  height: 100%;\n  width: 100%;\n`\n\nexport interface EnumWidgetProps\n  extends Omit<DropdownProps, 'onChange' | 'value'>,\n    WidgetBaseProps {\n  value: (string | number | boolean)[]\n  options: AttributeEnumItem[]\n  type?: AttributeData['type']\n  autoOpen?: boolean\n  isReadOnly?: boolean\n  enableCustomValues?: boolean\n  pt?: {\n    template?: Partial<EnumTemplateProps>\n  }\n  onOpen?: () => void\n  onNext?: () => void\n}\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n  (\n    {\n      value,\n      isEditing,\n      options,\n      type,\n      autoOpen = true,\n      isReadOnly,\n      enableCustomValues,\n      onOpen,\n      onChange,\n      onCancelEdit,\n      onNext,\n      pt,\n      ...dropdownProps\n    },\n    _ref,\n  ) => {\n    // convert value to string array\n    const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n    let selectedOptions = options.filter((option) =>\n      valueAsStrings.includes(option.value.toString()),\n    )\n\n    // Check if all values are present in options, if not, add a warning\n    valueAsStrings.forEach((val) => {\n      if (!options.find((option) => option.value === val)) {\n        selectedOptions = [\n          ...selectedOptions,\n          {\n            label: val,\n            value: val,\n            color: enableCustomValues\n              ? 'var(--md-sys-color-surface-container)'\n              : 'var(--md-sys-color-error)',\n            icon: enableCustomValues ? undefined : 'warning',\n          },\n        ]\n      }\n    })\n    const hasMultipleValues = selectedOptions.length > 1\n\n    const dropdownRef = useRef<DropdownRef>(null)\n\n    const 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"],"names":["Dropdown","forwardRef","useRef","useState","useEffect","_a","value","jsx","EnumCellValue"],"mappings":"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"}

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

@@ -1,93 +1,13 @@
 import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
-import { Icon, Dropdown } from "@ynput/ayon-react-components";
+import { Dropdown } from "@ynput/ayon-react-components";
 import clsx from "clsx";
 import { forwardRef, useRef, useState, useEffect } from "react";
 import styled from "styled-components";
-const StyledWidget = styled.div`
-  display: flex;
-  gap: var(--base-gap-small);
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: var(--border-radius-m);
-  padding: 0 2px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--md-sys-color-surface-container-high-hover);
-  }
-
-  &.item {
-    padding: 4px 2px;
-    border-radius: 0;
-
-    &:hover {
-      background-color: var(--md-sys-color-surface-container-hover);
-    }
-  }
-
-  &.selected {
-    background-color: var(--md-sys-color-primary-container);
-
-    &:hover {
-      background-color: var(--md-sys-color-primary-container-hover);
-    }
-  }
-`;
-const StyledValuesContainer = styled.div`
-  display: flex;
-  gap: var(--base-gap-small);
-  align-items: center;
-  overflow: hidden;
-  border-radius: var(--border-radius-m);
-`;
-const StyledValueWrapper = styled.div`
-  display: flex;
-  gap: var(--base-gap-small);
-  align-items: center;
-
-  overflow: hidden;
-  max-width: 100%;
-  min-width: 20px;
-`;
-const StyledValue = styled.span`
-  /* push expand icon to the end */
-  flex: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  text-overflow: ellipsis;
-  text-align: left;
-  border-radius: var(--border-radius-m);
-  padding: 0px 2px;
-  text-align: center;
-
-  &.placeholder {
-    color: var(--md-sys-color-outline);
-  }
-`;
-const StyledImg = styled.img`
-  width: 20px;
-  height: 20px;
-  object-fit: cover;
-
-  &.avatar {
-    border-radius: 50%;
-  }
-`;
-const StyledExpandIcon = styled(Icon)`
-  margin-left: auto;
-  transition: rotate 0.2s;
-`;
+import { EnumCellValue } from "./EnumCellValue.es.js";
 const StyledDropdown = styled(Dropdown)`
   height: 100%;
   width: 100%;
 `;
-const checkForImgSrc = (icon = "") => {
-  return icon.startsWith("/") || icon.startsWith("./") || icon.startsWith("../") || icon.startsWith("http://") || icon.startsWith("https://");
-};
-const checkAvatarImg = (src) => src.includes("avatar");
 const EnumWidget = forwardRef(
   ({
     value,
@@ -225,69 +145,6 @@ const EnumWidget = forwardRef(
     );
   }
 );
-const EnumCellValue = ({
-  selectedOptions,
-  placeholder,
-  hasMultipleValues,
-  isMultiSelect,
-  isOpen,
-  isItem,
-  isSelected,
-  isReadOnly,
-  className,
-  ...props
-}) => {
-  const allOptionsHaveIcon = selectedOptions.every((option) => option.icon);
-  const showLabels = !hasMultipleValues || !allOptionsHaveIcon;
-  const backgroundColor = !allOptionsHaveIcon && isMultiSelect && !isItem;
-  const isPlaceholder = !selectedOptions.length && placeholder;
-  if (isPlaceholder) {
-    selectedOptions = [
-      {
-        label: placeholder,
-        value: ""
-      }
-    ];
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledWidget, { className: clsx(className, { selected: isSelected, item: isItem }), ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledValuesContainer, { children: selectedOptions.map((option, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledValueWrapper, { children: [
-      option.icon && checkForImgSrc(option.icon) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledImg,
-        {
-          src: option.icon,
-          className: clsx({ avatar: checkAvatarImg(option.icon) })
-        }
-      ) : option.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: option.icon, style: { color: option.color } }) : null,
-      (showLabels || !option.icon) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledValue,
-        {
-          style: {
-            color: backgroundColor ? "inherit" : option.color,
-            backgroundColor: backgroundColor ? option.color || "var(--md-sys-color-surface-container)" : "transparent"
-          },
-          className: clsx({ placeholder: isPlaceholder }),
-          children: option.label
-        }
-      )
-    ] }, option.value.toString() + i)) }),
-    !isItem && !isReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      StyledExpandIcon,
-      {
-        className: "expand",
-        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"
-      }
-    )
-  ] });
-};
 export {
   EnumWidget
 };

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

@@ -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\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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"}
+{"version":3,"file":"EnumWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumWidget.tsx"],"sourcesContent":["import { Dropdown, DropdownProps, DropdownRef } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { AttributeData, AttributeEnumItem } from '../types'\nimport { EnumCellValue, EnumTemplateProps } from './EnumCellValue'\n\nconst StyledDropdown = styled(Dropdown)`\n  height: 100%;\n  width: 100%;\n`\n\nexport interface EnumWidgetProps\n  extends Omit<DropdownProps, 'onChange' | 'value'>,\n    WidgetBaseProps {\n  value: (string | number | boolean)[]\n  options: AttributeEnumItem[]\n  type?: AttributeData['type']\n  autoOpen?: boolean\n  isReadOnly?: boolean\n  enableCustomValues?: boolean\n  pt?: {\n    template?: Partial<EnumTemplateProps>\n  }\n  onOpen?: () => void\n  onNext?: () => void\n}\n\nexport const EnumWidget = forwardRef<HTMLDivElement, EnumWidgetProps>(\n  (\n    {\n      value,\n      isEditing,\n      options,\n      type,\n      autoOpen = true,\n      isReadOnly,\n      enableCustomValues,\n      onOpen,\n      onChange,\n      onCancelEdit,\n      onNext,\n      pt,\n      ...dropdownProps\n    },\n    _ref,\n  ) => {\n    // convert value to string array\n    const valueAsStrings = value.map((v) => v?.toString()).filter((v) => !!v)\n    let selectedOptions = options.filter((option) =>\n      valueAsStrings.includes(option.value.toString()),\n    )\n\n    // Check if all values are present in options, if not, add a warning\n    valueAsStrings.forEach((val) => {\n      if (!options.find((option) => option.value === val)) {\n        selectedOptions = [\n          ...selectedOptions,\n          {\n            label: val,\n            value: val,\n            color: enableCustomValues\n              ? 'var(--md-sys-color-surface-container)'\n              : 'var(--md-sys-color-error)',\n            icon: enableCustomValues ? undefined : 'warning',\n          },\n        ]\n      }\n    })\n    const hasMultipleValues = selectedOptions.length > 1\n\n    const dropdownRef = useRef<DropdownRef>(null)\n\n    const 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"],"names":["_a","value","jsx"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const PlayableIcon = require("../../../components/PlayableIcon/PlayableIcon.cjs.js");
 const React = require("react");
 const styled = require("styled-components");
 const Wrapper = styled.div`
@@ -22,20 +23,29 @@ const Image = styled.img`
   position: relative;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   z-index: 20;
 `;
+const StyledPlayableIcon = styled(PlayableIcon.PlayableIcon)`
+  right: 5px;
+  top: 5px;
+`;
 const ThumbnailWidgetWrapper = ({
   projectName,
   entityType,
   entityId,
   updatedAt,
   icon,
+  isPlayable,
+  id,
   ...props
 }) => {
   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.jsx(Inner, { ...props, children: valid && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Image, { src: url }) }) }, url);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Wrapper, { className: "thumbnail-widget", id, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Inner, { ...props, children: valid && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Image, { src: url }) }),
+    isPlayable && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledPlayableIcon, {})
+  ] }, url);
 };
 const ThumbnailWidget = React.memo(ThumbnailWidgetWrapper);
 exports.ThumbnailWidget = ThumbnailWidget;

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

@@ -1 +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  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\ninterface ThumbnailWidgetProps extends React.HTMLAttributes<HTMLDivElement> {\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  ...props\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 {...props}>{valid && <Image src={url} />}</Inner>\n    </Wrapper>\n  )\n}\n\nexport const ThumbnailWidget = memo(ThumbnailWidgetWrapper)\n"],"names":["jsx","memo"],"mappings":";;;;;AAIA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBrB,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,QAAQ,eAAe,cAAc,YAAY;AACjD,QAAA,MACJ,eACA,iBAAiB,WAAW,IAAI,UAAU,KAAK,QAAQ,wBAAwB,SAAS;AAE1F,SACGA,2BAAA,kBAAA,IAAA,SAAA,EAAQ,WAAU,oBACjB,2DAAC,OAAO,EAAA,GAAG,OAAQ,UAAA,0DAAU,OAAM,EAAA,KAAK,KAAK,EAAA,CAAG,KADP,GAE3C;AAEJ;AAEa,MAAA,kBAAkBC,WAAK,sBAAsB;;"}
+{"version":3,"file":"ThumbnailWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/ThumbnailWidget.tsx"],"sourcesContent":["import { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\nimport { 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  border-radius: 2px;\n  overflow: hidden;\n`\n\nconst Image = styled.img`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  z-index: 20;\n`\n\nconst StyledPlayableIcon = styled(PlayableIcon)`\n  right: 5px;\n  top: 5px;\n`\n\ninterface ThumbnailWidgetProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  updatedAt?: string\n  icon?: string | null\n  isPlayable?: boolean\n}\n\nconst ThumbnailWidgetWrapper: FC<ThumbnailWidgetProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  updatedAt,\n  icon,\n  isPlayable,\n  id,\n  ...props\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} id={id}>\n      <Inner {...props}>{valid && <Image src={url} />}</Inner>\n      {isPlayable && <StyledPlayableIcon />}\n    </Wrapper>\n  )\n}\n\nexport const ThumbnailWidget = memo(ThumbnailWidgetWrapper)\n"],"names":["PlayableIcon","jsxs","jsx","memo"],"mappings":";;;;;;AAKA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrB,MAAM,qBAAqB,OAAOA,yBAAY;AAAA;AAAA;AAAA;AAc9C,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,QAAQ,eAAe,cAAc,YAAY;AACjD,QAAA,MACJ,eACA,iBAAiB,WAAW,IAAI,UAAU,KAAK,QAAQ,wBAAwB,SAAS;AAE1F,SACGC,2BAAAA,kBAAAA,KAAA,SAAA,EAAQ,WAAU,oBAA6B,IAC9C,UAAA;AAAA,IAACC,2BAAAA,kBAAAA,IAAA,OAAA,EAAO,GAAG,OAAQ,UAAA,0DAAU,OAAM,EAAA,KAAK,KAAK,EAAG,CAAA;AAAA,IAC/C,+DAAe,oBAAmB,CAAA,CAAA;AAAA,EAAA,EAAA,GAFM,GAG3C;AAEJ;AAEa,MAAA,kBAAkBC,WAAK,sBAAsB;;"}

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

@@ -1,4 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { PlayableIcon } from "../../../components/PlayableIcon/PlayableIcon.es.js";
 import { memo } from "react";
 import styled from "styled-components";
 const Wrapper = styled.div`
@@ -20,20 +21,29 @@ const Image = styled.img`
   position: relative;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   z-index: 20;
 `;
+const StyledPlayableIcon = styled(PlayableIcon)`
+  right: 5px;
+  top: 5px;
+`;
 const ThumbnailWidgetWrapper = ({
   projectName,
   entityType,
   entityId,
   updatedAt,
   icon,
+  isPlayable,
+  id,
   ...props
 }) => {
   const valid = projectName && entityType && entityId && updatedAt;
   const url = projectName && `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail?updatedAt=${updatedAt}`;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { className: "thumbnail-widget", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Inner, { ...props, children: valid && /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { src: url }) }) }, url);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper, { className: "thumbnail-widget", id, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Inner, { ...props, children: valid && /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { src: url }) }),
+    isPlayable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledPlayableIcon, {})
+  ] }, url);
 };
 const ThumbnailWidget = memo(ThumbnailWidgetWrapper);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailWidget.es.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  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\ninterface ThumbnailWidgetProps extends React.HTMLAttributes<HTMLDivElement> {\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  ...props\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 {...props}>{valid && <Image src={url} />}</Inner>\n    </Wrapper>\n  )\n}\n\nexport const ThumbnailWidget = memo(ThumbnailWidgetWrapper)\n"],"names":["jsx"],"mappings":";;;AAIA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBrB,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,QAAQ,eAAe,cAAc,YAAY;AACjD,QAAA,MACJ,eACA,iBAAiB,WAAW,IAAI,UAAU,KAAK,QAAQ,wBAAwB,SAAS;AAE1F,SACGA,kCAAA,IAAA,SAAA,EAAQ,WAAU,oBACjB,gDAAC,OAAO,EAAA,GAAG,OAAQ,UAAA,+CAAU,OAAM,EAAA,KAAK,KAAK,EAAA,CAAG,KADP,GAE3C;AAEJ;AAEa,MAAA,kBAAkB,KAAK,sBAAsB;"}
+{"version":3,"file":"ThumbnailWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/ThumbnailWidget.tsx"],"sourcesContent":["import { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\nimport { 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  border-radius: 2px;\n  overflow: hidden;\n`\n\nconst Image = styled.img`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  z-index: 20;\n`\n\nconst StyledPlayableIcon = styled(PlayableIcon)`\n  right: 5px;\n  top: 5px;\n`\n\ninterface ThumbnailWidgetProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  updatedAt?: string\n  icon?: string | null\n  isPlayable?: boolean\n}\n\nconst ThumbnailWidgetWrapper: FC<ThumbnailWidgetProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  updatedAt,\n  icon,\n  isPlayable,\n  id,\n  ...props\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} id={id}>\n      <Inner {...props}>{valid && <Image src={url} />}</Inner>\n      {isPlayable && <StyledPlayableIcon />}\n    </Wrapper>\n  )\n}\n\nexport const ThumbnailWidget = memo(ThumbnailWidgetWrapper)\n"],"names":["jsxs","jsx"],"mappings":";;;;AAKA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrB,MAAM,qBAAqB,OAAO,YAAY;AAAA;AAAA;AAAA;AAc9C,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,QAAQ,eAAe,cAAc,YAAY;AACjD,QAAA,MACJ,eACA,iBAAiB,WAAW,IAAI,UAAU,KAAK,QAAQ,wBAAwB,SAAS;AAE1F,SACGA,kCAAAA,KAAA,SAAA,EAAQ,WAAU,oBAA6B,IAC9C,UAAA;AAAA,IAACC,kCAAAA,IAAA,OAAA,EAAO,GAAG,OAAQ,UAAA,+CAAU,OAAM,EAAA,KAAK,KAAK,EAAG,CAAA;AAAA,IAC/C,oDAAe,oBAAmB,CAAA,CAAA;AAAA,EAAA,EAAA,GAFM,GAG3C;AAEJ;AAEa,MAAA,kBAAkB,KAAK,sBAAsB;"}

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

@@ -53,6 +53,7 @@ require("../../api/generated/versions.cjs.js");
 require("../../api/generated/workfiles.cjs.js");
 require("../../api/generated/ynputCloud.cjs.js");
 require("../../api/generated/grouping.cjs.js");
+require("../../api/generated/views.cjs.js");
 require("../../api/queries/actions/getActions.cjs.js");
 require("../../api/queries/activities/getActivities.cjs.js");
 require("../../api/queries/activities/updateActivities.cjs.js");
@@ -86,6 +87,9 @@ require("../../api/queries/permissions/getPermissions.cjs.js");
 require("../../api/queries/grouping/getGrouping.cjs.js");
 require("../../api/queries/versions/updateVersions.cjs.js");
 require("../../api/queries/products/createProduct.cjs.js");
+require("../../api/queries/cloud/cloud.cjs.js");
+require("../../api/queries/views/getViews.cjs.js");
+require("../../api/queries/views/updateViews.cjs.js");
 require("@dnd-kit/core");
 require("@dnd-kit/sortable");
 require("../../components/ReviewablesList/ReviewablesList.styled.cjs.js");
@@ -143,6 +147,11 @@ require("../ProjectTreeTable/context/ColumnSettingsContext.cjs.js");
 require("../ProjectTreeTable/context/ProjectTableContext.cjs.js");
 require("../ProjectTreeTable/context/ProjectTableQueriesContext.cjs.js");
 require("../ProjectTreeTable/context/SelectedRowsContext.cjs.js");
+require("../../../../_virtual/runtime.cjs.js");
+require("../../../../_virtual/semver.cjs.js");
+require("react-redux");
+require("custom-protocol-check");
+require("../ProjectTreeTable/components/GroupSettingsFallback.cjs.js");
 require("../ProjectTreeTable/context/ProjectDataContext.cjs.js");
 require("../ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
 require("../ProjectTreeTable/widgets/DateWidget.cjs.js");
@@ -157,15 +166,11 @@ require("../ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
 require("../ProjectTreeTable/components/SelectionCell.cjs.js");
 require("../ProjectTreeTable/components/RowSelectionHeader.cjs.js");
 require("../ProjectTreeTable/widgets/LoadMoreWidget.cjs.js");
-require("../../../../_virtual/runtime.cjs.js");
-require("../../../../_virtual/semver.cjs.js");
-require("react-redux");
-require("custom-protocol-check");
-require("../ProjectTreeTable/components/GroupSettingsFallback.cjs.js");
 const versionsToRepresentations = require("./versionsToRepresentations.cjs.js");
 require("../DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../DetailsPanel/FeedFilters/FeedFilters.styled.cjs.js");
 require("../DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js");
+require("../../components/PlayableIcon/PlayableIcon.cjs.js");
 require("../DetailsPanel/DetailsPanelFiles/DetailsPanelFiles.cjs.js");
 require("../DetailsPanel/DetailsPanelSlideOut/DetailsPanelSlideOut.styled.cjs.js");
 require("../DetailsPanel/DetailsPanelFloating/DetailsPanelFloating.styled.cjs.js");
@@ -182,6 +187,7 @@ require("../../components/ProjectTableSettings/ProjectTableSettings.cjs.js");
 require("../../components/Powerpack/PowerpackButton.cjs.js");
 require("../../components/Powerpack/PricingLink.cjs.js");
 require("../../components/Powerpack/PowerpackDialog.styled.cjs.js");
+require("../../components/Powerpack/CTAButton.cjs.js");
 require("../../components/SettingsPanel/SettingsPanel.cjs.js");
 require("../../components/SettingsPanel/SettingsPanelItemTemplate.cjs.js");
 require("../../components/AttributeEditor/components/MinMaxField.cjs.js");
@@ -190,6 +196,11 @@ require("../../components/SearchFilter/filterDates.cjs.js");
 require("../../components/Badge/Badge.cjs.js");
 require("../../components/VersionUploader/components/UploadVersionDialog.cjs.js");
 require("../../components/VersionUploader/context/VersionUploadContext.cjs.js");
+require("../../components/Feedback/FeedbackContext.cjs.js");
+require("../../components/Feedback/SupportBubble.cjs.js");
+require("../../components/Views/context/ViewsContext.cjs.js");
+require("../../components/Views/Views.styled.cjs.js");
+require("../../components/Views/ViewsMenuContainer/ViewsMenuContainer.cjs.js");
 const columns = [
   {
     field: "name",