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

@ynput/ayon-frontend-shared 0.2.31 → 0.2.32

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

Files changed (154) hide show

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

@@ -1,15 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../_virtual/jsx-runtime.cjs.js"),o=require("@ynput/ayon-react-components"),t=require("clsx"),r=require("styled-components"),F="edit-trigger",H=r.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../_virtual/jsx-runtime.cjs.js"),o=require("@ynput/ayon-react-components"),t=require("clsx"),r=require("styled-components"),H="edit-trigger",J=r.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: visible;
   border-radius: var(--border-radius-m);
+  padding: 0 1px;
   &.item {
     padding: 4px 2px;
     border-radius: 0;
+    overflow: hidden;
     &:hover {
       background-color: var(--md-sys-color-surface-container-hover);
@@ -23,7 +25,7 @@
       background-color: var(--md-sys-color-primary-container-hover);
     }
   }
-`,z=r.div`
+`,K=r.div`
   flex: 1;
   display: flex;
   gap: var(--base-gap-small);
@@ -31,27 +33,31 @@
   overflow: hidden;
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
-`,J=r.div`
+  flex-wrap: nowrap;
+  &.wrap {
+    flex-wrap: wrap;
+  }
+`,M=r.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
-  overflow: hidden;
   max-width: 100%;
   min-width: 20px;
-`,K=r.span`
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  text-overflow: ellipsis;
+`,Q=r.span`
   text-align: left;
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
   &.placeholder {
     color: var(--md-sys-color-outline);
   }
-`,M=r.img`
+`,U=r.img`
   width: 20px;
   height: 20px;
   object-fit: cover;
@@ -59,14 +65,17 @@
   &.avatar {
     border-radius: 50%;
   }
-`,Q=r.div`
+`,X=r.div`
   width: 32px;
-  height: 32px;
+  height: fit-content;
+  min-height: 32px;
+  aspect-ratio: 1;
   border-radius: var(--border-radius-m);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  flex-shrink: 0;
   &:hover {
     background-color: var(--md-sys-color-surface-container-highest-hover);
@@ -75,7 +84,7 @@
   &.open {
     background-color: transparent;
   }
-`,U=r(o.Icon)`
+`,Y=r(o.Icon)`
   transition: rotate 0.2s;
-`,X=({selectedOptions:a,placeholder:n,hasMultipleValues:p,isMultiSelect:c,isOpen:i,isItem:l,isSelected:d,isReadOnly:g,className:h,pt:v,...y})=>{const{icon:b={},img:j={},value:f={},expand:R={},close:E={}}=v||{},{style:N,className:S,...w}=b,{style:C,className:k,...I}=j,{style:W,className:V,...q}=f,{style:L,className:T,..._}=R,{style:A,className:D,...G}=E,m=a.every(e=>e.icon),P=!p||!m,u=!m&&c&&!l,x=!a.length&&n;return x&&(a=[{label:n,value:""}]),s.jsxRuntimeExports.jsxs(H,{className:t(h,{selected:d,item:l}),...y,children:[s.jsxRuntimeExports.jsx(z,{children:a.map((e,B)=>s.jsxRuntimeExports.jsxs(J,{children:[e.icon&&Y(e.icon)?s.jsxRuntimeExports.jsx(M,{src:e.icon,className:t({avatar:Z(e.icon)},k),style:C,"data-tooltip":e.label,...I}):e.icon?s.jsxRuntimeExports.jsx(o.Icon,{icon:e.icon,style:{color:e.color,...N},className:S,...w}):null,(P||!e.icon)&&s.jsxRuntimeExports.jsx(K,{style:{color:u?"inherit":e.color,backgroundColor:u?e.color||"var(--md-sys-color-surface-container)":"transparent",...W},className:t({placeholder:x},V),"aria-label":e.label,...q,children:e.label})]},e.value.toString()+B))}),!l&&!g&&s.jsxRuntimeExports.jsx(Q,{className:t("expand",F,{open:i},T),children:s.jsxRuntimeExports.jsx(U,{icon:"expand_more",style:{rotate:i?"180deg":"0",...L},"aria-label":"Expand options",..._})}),l&&d&&c&&s.jsxRuntimeExports.jsx(o.Icon,{icon:"close",style:{marginLeft:"auto",marginRight:4,...A},"aria-label":"Deselect item",className:t("close",D),...G})]})},Y=(a="")=>a.startsWith("/")||a.startsWith("./")||a.startsWith("../")||a.startsWith("http://")||a.startsWith("https://"),Z=a=>a.includes("avatar");exports.EnumCellValue=X;
+`,Z=({selectedOptions:a,placeholder:n,hasMultipleValues:g,isMultiSelect:c,isOpen:i,isItem:l,isSelected:d,isReadOnly:h,rowHeight:m,className:v,pt:y,...b})=>{const{icon:f={},img:j={},value:w={},expand:R={},close:E={}}=y||{},{style:N,className:S,...C}=f,{style:k,className:I,...W}=j,{style:V,className:q,...L}=w,{style:T,className:_,...A}=R,{style:D,className:G,...P}=E,p=a.every(e=>e.icon),B=!g||!p,x=!p&&c&&!l,u=!a.length&&n;u&&(a=[{label:n,value:""}]);const F=m!==void 0&&m>100;return s.jsxRuntimeExports.jsxs(J,{className:t(v,{selected:d,item:l}),...b,children:[s.jsxRuntimeExports.jsx(K,{className:t({wrap:F}),children:a.map((e,z)=>s.jsxRuntimeExports.jsxs(M,{children:[e.icon&&$(e.icon)?s.jsxRuntimeExports.jsx(U,{src:e.icon,className:t({avatar:O(e.icon)},I),style:k,"data-tooltip":e.label,...W}):e.icon?s.jsxRuntimeExports.jsx(o.Icon,{icon:e.icon,style:{color:e.color,...N},className:S,...C}):null,(B||!e.icon)&&s.jsxRuntimeExports.jsx(Q,{style:{color:x?"inherit":e.color,backgroundColor:x?e.color||"var(--md-sys-color-surface-container)":"transparent",...V},className:t({placeholder:u},q),"aria-label":e.label,...L,children:e.label})]},e.value.toString()+z))}),!l&&!h&&s.jsxRuntimeExports.jsx(X,{className:t("expand",H,{open:i},_),children:s.jsxRuntimeExports.jsx(Y,{icon:"expand_more",style:{rotate:i?"180deg":"0",...T},"aria-label":"Expand options",...A})}),l&&d&&c&&s.jsxRuntimeExports.jsx(o.Icon,{icon:"close",style:{marginLeft:"auto",marginRight:4,...D},"aria-label":"Deselect item",className:t("close",G),...P})]})},$=(a="")=>a.startsWith("/")||a.startsWith("./")||a.startsWith("../")||a.startsWith("http://")||a.startsWith("https://"),O=a=>a.includes("avatar");exports.EnumCellValue=Z;
 //# sourceMappingURL=EnumCellValue.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EnumCellValue.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import { AttributeEnumItem } from '@shared/api'\nimport { Icon, IconProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\n// Inline the edit trigger class to avoid runtime import and circular dependency with CellWidget\nconst EDIT_TRIGGER_CLASS = 'edit-trigger'\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\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 flex: 1;\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\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 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\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 StyledExpandButton = styled.div`\n width: 32px;\n height: 32px;\n border-radius: var(--border-radius-m);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-highest-hover);\n }\n\n &.open {\n background-color: transparent;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n transition: rotate 0.2s;\n`\n\nexport interface 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 pt?: {\n icon?: Partial<IconProps>\n img?: Partial<React.ImgHTMLAttributes<HTMLImageElement>>\n value?: Partial<React.ImgHTMLAttributes<HTMLSpanElement>>\n expand?: Partial<IconProps>\n close?: Partial<IconProps>\n }\n}\n\nexport const EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n className,\n pt,\n ...props\n}: EnumTemplateProps) => {\n // Destructure pt subprops and their relevant props at the top\n const {\n icon: ptIcon = {},\n img: ptImg = {},\n value: ptValue = {},\n expand: ptExpand = {},\n close: ptClose = {},\n } = pt \|\| {}\n\n const { style: iconStyle, className: iconClassName, ...iconRest } = ptIcon\n const { style: imgStyle, className: imgClassName, ...imgRest } = ptImg\n const { style: valueStyle, className: valueClassName, ...valueRest } = ptValue\n const { style: expandStyle, className: expandClassName, ...expandRest } = ptExpand\n const { style: closeStyle, className: closeClassName, ...closeRest } = ptClose\n\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) }, imgClassName)}\n style={imgStyle}\n data-tooltip={option.label}\n {...imgRest}\n />\n ) : option.icon ? (\n <Icon\n icon={option.icon}\n style={{ color: option.color, ...iconStyle }}\n className={iconClassName}\n {...iconRest}\n />\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 ...valueStyle,\n }}\n className={clsx({ placeholder: isPlaceholder }, valueClassName)}\n aria-label={option.label}\n {...valueRest}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandButton\n className={clsx('expand', EDIT_TRIGGER_CLASS, { open: isOpen }, expandClassName)}\n >\n <StyledExpandIcon\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0', ...expandStyle }}\n aria-label=\"Expand options\"\n {...expandRest}\n />\n </StyledExpandButton>\n )}\n {isItem && isSelected && isMultiSelect && (\n <Icon\n icon=\"close\"\n style={{ marginLeft: 'auto', marginRight: 4, ...closeStyle }}\n aria-label=\"Deselect item\"\n className={clsx('close', closeClassName)}\n {...closeRest}\n />\n )}\n </StyledWidget>\n )\n}\n\n// Helper functions to check if the icon is a valid image source\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"],"names":["EDIT_TRIGGER_CLASS","StyledWidget","styled","StyledValuesContainer","StyledValueWrapper","StyledValue","StyledImg","StyledExpandButton","StyledExpandIcon","Icon","EnumCellValue","selectedOptions","placeholder","hasMultipleValues","isMultiSelect","isOpen","isItem","isSelected","isReadOnly","className","pt","props","ptIcon","ptImg","ptValue","ptExpand","ptClose","iconStyle","iconClassName","iconRest","imgStyle","imgClassName","imgRest","valueStyle","valueClassName","valueRest","expandStyle","expandClassName","expandRest","closeStyle","closeClassName","closeRest","allOptionsHaveIcon","option","showLabels","backgroundColor","isPlaceholder","jsxs","clsx","jsx","i","checkForImgSrc","checkAvatarImg","icon","src"],"mappings":"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"}
1	+ {"version":3,"file":"EnumCellValue.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import { AttributeEnumItem } from '@shared/api'\nimport { Icon, IconProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\n// Inline the edit trigger class to avoid runtime import and circular dependency with CellWidget\nconst EDIT_TRIGGER_CLASS = 'edit-trigger'\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: visible;\n border-radius: var(--border-radius-m);\n padding: 0 1px;\n\n &.item {\n padding: 4px 2px;\n border-radius: 0;\n overflow: hidden;\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 flex: 1;\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n flex-wrap: nowrap;\n\n &.wrap {\n flex-wrap: wrap;\n }\n`\n\nconst StyledValueWrapper = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n\n max-width: 100%;\n min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n text-align: left;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\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 StyledExpandButton = styled.div`\n width: 32px;\n height: fit-content;\n min-height: 32px;\n aspect-ratio: 1;\n border-radius: var(--border-radius-m);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n flex-shrink: 0;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-highest-hover);\n }\n\n &.open {\n background-color: transparent;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n transition: rotate 0.2s;\n`\n\nexport interface 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 rowHeight?: number\n pt?: {\n icon?: Partial<IconProps>\n img?: Partial<React.ImgHTMLAttributes<HTMLImageElement>>\n value?: Partial<React.ImgHTMLAttributes<HTMLSpanElement>>\n expand?: Partial<IconProps>\n close?: Partial<IconProps>\n }\n}\n\nexport const EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n rowHeight,\n className,\n pt,\n ...props\n}: EnumTemplateProps) => {\n // Destructure pt subprops and their relevant props at the top\n const {\n icon: ptIcon = {},\n img: ptImg = {},\n value: ptValue = {},\n expand: ptExpand = {},\n close: ptClose = {},\n } = pt \|\| {}\n\n const { style: iconStyle, className: iconClassName, ...iconRest } = ptIcon\n const { style: imgStyle, className: imgClassName, ...imgRest } = ptImg\n const { style: valueStyle, className: valueClassName, ...valueRest } = ptValue\n const { style: expandStyle, className: expandClassName, ...expandRest } = ptExpand\n const { style: closeStyle, className: closeClassName, ...closeRest } = ptClose\n\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 // Allow wrapping when row height is above 100px\n const allowWrap = rowHeight !== undefined && rowHeight > 100\n\n return (\n <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n <StyledValuesContainer className={clsx({ wrap: allowWrap })}>\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) }, imgClassName)}\n style={imgStyle}\n data-tooltip={option.label}\n {...imgRest}\n />\n ) : option.icon ? (\n <Icon\n icon={option.icon}\n style={{ color: option.color, ...iconStyle }}\n className={iconClassName}\n {...iconRest}\n />\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 ...valueStyle,\n }}\n className={clsx({ placeholder: isPlaceholder }, valueClassName)}\n aria-label={option.label}\n {...valueRest}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandButton\n className={clsx('expand', EDIT_TRIGGER_CLASS, { open: isOpen }, expandClassName)}\n >\n <StyledExpandIcon\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0', ...expandStyle }}\n aria-label=\"Expand options\"\n {...expandRest}\n />\n </StyledExpandButton>\n )}\n {isItem && isSelected && isMultiSelect && (\n <Icon\n icon=\"close\"\n style={{ marginLeft: 'auto', marginRight: 4, ...closeStyle }}\n aria-label=\"Deselect item\"\n className={clsx('close', closeClassName)}\n {...closeRest}\n />\n )}\n </StyledWidget>\n )\n}\n\n// Helper functions to check if the icon is a valid image source\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"],"names":["EDIT_TRIGGER_CLASS","StyledWidget","styled","StyledValuesContainer","StyledValueWrapper","StyledValue","StyledImg","StyledExpandButton","StyledExpandIcon","Icon","EnumCellValue","selectedOptions","placeholder","hasMultipleValues","isMultiSelect","isOpen","isItem","isSelected","isReadOnly","rowHeight","className","pt","props","ptIcon","ptImg","ptValue","ptExpand","ptClose","iconStyle","iconClassName","iconRest","imgStyle","imgClassName","imgRest","valueStyle","valueClassName","valueRest","expandStyle","expandClassName","expandRest","closeStyle","closeClassName","closeRest","allOptionsHaveIcon","option","showLabels","backgroundColor","isPlaceholder","allowWrap","jsxs","clsx","jsx","i","checkForImgSrc","checkAvatarImg","icon","src"],"mappings":"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"}

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

@@ -2,18 +2,20 @@ import { j as r } from "../../../../../_virtual/jsx-runtime.es.js";
 import { Icon as o } from "@ynput/ayon-react-components";
 import l from "clsx";
 import s from "styled-components";
-const P = "edit-trigger", q = s.div`
+const H = "edit-trigger", J = s.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: visible;
   border-radius: var(--border-radius-m);
+  padding: 0 1px;
   &.item {
     padding: 4px 2px;
     border-radius: 0;
+    overflow: hidden;
     &:hover {
       background-color: var(--md-sys-color-surface-container-hover);
@@ -27,7 +29,7 @@ const P = "edit-trigger", q = s.div`
       background-color: var(--md-sys-color-primary-container-hover);
     }
   }
-`, z = s.div`
+`, K = s.div`
   flex: 1;
   display: flex;
   gap: var(--base-gap-small);
@@ -35,27 +37,31 @@ const P = "edit-trigger", q = s.div`
   overflow: hidden;
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
-`, J = s.div`
+  flex-wrap: nowrap;
+  &.wrap {
+    flex-wrap: wrap;
+  }
+`, Q = s.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
-  overflow: hidden;
   max-width: 100%;
   min-width: 20px;
-`, K = s.span`
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  text-overflow: ellipsis;
+`, U = s.span`
   text-align: left;
   border-radius: var(--border-radius-m);
   padding: 0px 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
   &.placeholder {
     color: var(--md-sys-color-outline);
   }
-`, Q = s.img`
+`, X = s.img`
   width: 20px;
   height: 20px;
   object-fit: cover;
@@ -63,14 +69,17 @@ const P = "edit-trigger", q = s.div`
   &.avatar {
     border-radius: 50%;
   }
-`, U = s.div`
+`, Y = s.div`
   width: 32px;
-  height: 32px;
+  height: fit-content;
+  min-height: 32px;
+  aspect-ratio: 1;
   border-radius: var(--border-radius-m);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  flex-shrink: 0;
   &:hover {
     background-color: var(--md-sys-color-surface-container-highest-hover);
@@ -79,79 +88,82 @@ const P = "edit-trigger", q = s.div`
   &.open {
     background-color: transparent;
   }
-`, X = s(o)`
+`, Z = s(o)`
   transition: rotate 0.2s;
-`, ae = ({
-  selectedOptions: a,
+`, sa = ({
+  selectedOptions: e,
   placeholder: c,
   hasMultipleValues: g,
   isMultiSelect: n,
   isOpen: i,
   isItem: t,
   isSelected: d,
-  isReadOnly: x,
+  isReadOnly: v,
+  rowHeight: m,
   className: u,
-  pt: v,
-  ...y
+  pt: y,
+  ...b
 }) => {
   const {
-    icon: b = {},
-    img: f = {},
+    icon: f = {},
+    img: w = {},
     value: N = {},
-    expand: w = {},
-    close: S = {}
-  } = v || {}, { style: j, className: C, ...k } = b, { style: R, className: E, ...I } = f, { style: W, className: V, ...L } = N, { style: _, className: A, ...D } = w, { style: G, className: T, ...B } = S, m = a.every((e) => e.icon), F = !g || !m, p = !m && n && !t, h = !a.length && c;
-  return h && (a = [
+    expand: S = {},
+    close: j = {}
+  } = y || {}, { style: C, className: k, ...R } = f, { style: E, className: W, ...I } = w, { style: V, className: L, ..._ } = N, { style: A, className: D, ...G } = S, { style: T, className: B, ...F } = j, p = e.every((a) => a.icon), P = !g || !p, x = !p && n && !t, h = !e.length && c;
+  h && (e = [
     {
       label: c,
       value: ""
     }
-  ]), /* @__PURE__ */ r.jsxs(q, { className: l(u, { selected: d, item: t }), ...y, children: [
-    /* @__PURE__ */ r.jsx(z, { children: a.map((e, H) => /* @__PURE__ */ r.jsxs(J, { children: [
-      e.icon && Y(e.icon) ? /* @__PURE__ */ r.jsx(
-        Q,
+  ]);
+  const q = m !== void 0 && m > 100;
+  return /* @__PURE__ */ r.jsxs(J, { className: l(u, { selected: d, item: t }), ...b, children: [
+    /* @__PURE__ */ r.jsx(K, { className: l({ wrap: q }), children: e.map((a, z) => /* @__PURE__ */ r.jsxs(Q, { children: [
+      a.icon && $(a.icon) ? /* @__PURE__ */ r.jsx(
+        X,
         {
-          src: e.icon,
-          className: l({ avatar: Z(e.icon) }, E),
-          style: R,
-          "data-tooltip": e.label,
+          src: a.icon,
+          className: l({ avatar: M(a.icon) }, W),
+          style: E,
+          "data-tooltip": a.label,
           ...I
         }
-      ) : e.icon ? /* @__PURE__ */ r.jsx(
+      ) : a.icon ? /* @__PURE__ */ r.jsx(
         o,
         {
-          icon: e.icon,
-          style: { color: e.color, ...j },
-          className: C,
-          ...k
+          icon: a.icon,
+          style: { color: a.color, ...C },
+          className: k,
+          ...R
         }
       ) : null,
-      (F || !e.icon) && /* @__PURE__ */ r.jsx(
-        K,
+      (P || !a.icon) && /* @__PURE__ */ r.jsx(
+        U,
         {
           style: {
-            color: p ? "inherit" : e.color,
-            backgroundColor: p ? e.color || "var(--md-sys-color-surface-container)" : "transparent",
-            ...W
+            color: x ? "inherit" : a.color,
+            backgroundColor: x ? a.color || "var(--md-sys-color-surface-container)" : "transparent",
+            ...V
           },
-          className: l({ placeholder: h }, V),
-          "aria-label": e.label,
-          ...L,
-          children: e.label
+          className: l({ placeholder: h }, L),
+          "aria-label": a.label,
+          ..._,
+          children: a.label
         }
       )
-    ] }, e.value.toString() + H)) }),
-    !t && !x && /* @__PURE__ */ r.jsx(
-      U,
+    ] }, a.value.toString() + z)) }),
+    !t && !v && /* @__PURE__ */ r.jsx(
+      Y,
       {
-        className: l("expand", P, { open: i }, A),
+        className: l("expand", H, { open: i }, D),
         children: /* @__PURE__ */ r.jsx(
-          X,
+          Z,
           {
             icon: "expand_more",
-            style: { rotate: i ? "180deg" : "0", ..._ },
+            style: { rotate: i ? "180deg" : "0", ...A },
             "aria-label": "Expand options",
-            ...D
+            ...G
           }
         )
       }
@@ -160,15 +172,15 @@ const P = "edit-trigger", q = s.div`
       o,
       {
         icon: "close",
-        style: { marginLeft: "auto", marginRight: 4, ...G },
+        style: { marginLeft: "auto", marginRight: 4, ...T },
         "aria-label": "Deselect item",
-        className: l("close", T),
-        ...B
+        className: l("close", B),
+        ...F
       }
     )
   ] });
-}, Y = (a = "") => a.startsWith("/") || a.startsWith("./") || a.startsWith("../") || a.startsWith("http://") || a.startsWith("https://"), Z = (a) => a.includes("avatar");
+}, $ = (e = "") => e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("http://") || e.startsWith("https://"), M = (e) => e.includes("avatar");
 export {
-  ae as EnumCellValue
+  sa as EnumCellValue
 };
 //# sourceMappingURL=EnumCellValue.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EnumCellValue.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import { AttributeEnumItem } from '@shared/api'\nimport { Icon, IconProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\n// Inline the edit trigger class to avoid runtime import and circular dependency with CellWidget\nconst EDIT_TRIGGER_CLASS = 'edit-trigger'\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\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 flex: 1;\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\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 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\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 StyledExpandButton = styled.div`\n width: 32px;\n height: 32px;\n border-radius: var(--border-radius-m);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-highest-hover);\n }\n\n &.open {\n background-color: transparent;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n transition: rotate 0.2s;\n`\n\nexport interface 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 pt?: {\n icon?: Partial<IconProps>\n img?: Partial<React.ImgHTMLAttributes<HTMLImageElement>>\n value?: Partial<React.ImgHTMLAttributes<HTMLSpanElement>>\n expand?: Partial<IconProps>\n close?: Partial<IconProps>\n }\n}\n\nexport const EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n className,\n pt,\n ...props\n}: EnumTemplateProps) => {\n // Destructure pt subprops and their relevant props at the top\n const {\n icon: ptIcon = {},\n img: ptImg = {},\n value: ptValue = {},\n expand: ptExpand = {},\n close: ptClose = {},\n } = pt \|\| {}\n\n const { style: iconStyle, className: iconClassName, ...iconRest } = ptIcon\n const { style: imgStyle, className: imgClassName, ...imgRest } = ptImg\n const { style: valueStyle, className: valueClassName, ...valueRest } = ptValue\n const { style: expandStyle, className: expandClassName, ...expandRest } = ptExpand\n const { style: closeStyle, className: closeClassName, ...closeRest } = ptClose\n\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) }, imgClassName)}\n style={imgStyle}\n data-tooltip={option.label}\n {...imgRest}\n />\n ) : option.icon ? (\n <Icon\n icon={option.icon}\n style={{ color: option.color, ...iconStyle }}\n className={iconClassName}\n {...iconRest}\n />\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 ...valueStyle,\n }}\n className={clsx({ placeholder: isPlaceholder }, valueClassName)}\n aria-label={option.label}\n {...valueRest}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandButton\n className={clsx('expand', EDIT_TRIGGER_CLASS, { open: isOpen }, expandClassName)}\n >\n <StyledExpandIcon\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0', ...expandStyle }}\n aria-label=\"Expand options\"\n {...expandRest}\n />\n </StyledExpandButton>\n )}\n {isItem && isSelected && isMultiSelect && (\n <Icon\n icon=\"close\"\n style={{ marginLeft: 'auto', marginRight: 4, ...closeStyle }}\n aria-label=\"Deselect item\"\n className={clsx('close', closeClassName)}\n {...closeRest}\n />\n )}\n </StyledWidget>\n )\n}\n\n// Helper functions to check if the icon is a valid image source\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"],"names":["EDIT_TRIGGER_CLASS","StyledWidget","styled","StyledValuesContainer","StyledValueWrapper","StyledValue","StyledImg","StyledExpandButton","StyledExpandIcon","Icon","EnumCellValue","selectedOptions","placeholder","hasMultipleValues","isMultiSelect","isOpen","isItem","isSelected","isReadOnly","className","pt","props","ptIcon","ptImg","ptValue","ptExpand","ptClose","iconStyle","iconClassName","iconRest","imgStyle","imgClassName","imgRest","valueStyle","valueClassName","valueRest","expandStyle","expandClassName","expandRest","closeStyle","closeClassName","closeRest","allOptionsHaveIcon","option","showLabels","backgroundColor","isPlaceholder","jsxs","clsx","jsx","i","checkForImgSrc","checkAvatarImg","icon","src"],"mappings":"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"}
1	+ {"version":3,"file":"EnumCellValue.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/EnumCellValue.tsx"],"sourcesContent":["import { AttributeEnumItem } from '@shared/api'\nimport { Icon, IconProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport styled from 'styled-components'\n// Inline the edit trigger class to avoid runtime import and circular dependency with CellWidget\nconst EDIT_TRIGGER_CLASS = 'edit-trigger'\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: visible;\n border-radius: var(--border-radius-m);\n padding: 0 1px;\n\n &.item {\n padding: 4px 2px;\n border-radius: 0;\n overflow: hidden;\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 flex: 1;\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n overflow: hidden;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n flex-wrap: nowrap;\n\n &.wrap {\n flex-wrap: wrap;\n }\n`\n\nconst StyledValueWrapper = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n\n max-width: 100%;\n min-width: 20px;\n`\n\nconst StyledValue = styled.span`\n text-align: left;\n border-radius: var(--border-radius-m);\n padding: 0px 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\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 StyledExpandButton = styled.div`\n width: 32px;\n height: fit-content;\n min-height: 32px;\n aspect-ratio: 1;\n border-radius: var(--border-radius-m);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n flex-shrink: 0;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-highest-hover);\n }\n\n &.open {\n background-color: transparent;\n }\n`\n\nconst StyledExpandIcon = styled(Icon)`\n transition: rotate 0.2s;\n`\n\nexport interface 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 rowHeight?: number\n pt?: {\n icon?: Partial<IconProps>\n img?: Partial<React.ImgHTMLAttributes<HTMLImageElement>>\n value?: Partial<React.ImgHTMLAttributes<HTMLSpanElement>>\n expand?: Partial<IconProps>\n close?: Partial<IconProps>\n }\n}\n\nexport const EnumCellValue = ({\n selectedOptions,\n placeholder,\n hasMultipleValues,\n isMultiSelect,\n isOpen,\n isItem,\n isSelected,\n isReadOnly,\n rowHeight,\n className,\n pt,\n ...props\n}: EnumTemplateProps) => {\n // Destructure pt subprops and their relevant props at the top\n const {\n icon: ptIcon = {},\n img: ptImg = {},\n value: ptValue = {},\n expand: ptExpand = {},\n close: ptClose = {},\n } = pt \|\| {}\n\n const { style: iconStyle, className: iconClassName, ...iconRest } = ptIcon\n const { style: imgStyle, className: imgClassName, ...imgRest } = ptImg\n const { style: valueStyle, className: valueClassName, ...valueRest } = ptValue\n const { style: expandStyle, className: expandClassName, ...expandRest } = ptExpand\n const { style: closeStyle, className: closeClassName, ...closeRest } = ptClose\n\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 // Allow wrapping when row height is above 100px\n const allowWrap = rowHeight !== undefined && rowHeight > 100\n\n return (\n <StyledWidget className={clsx(className, { selected: isSelected, item: isItem })} {...props}>\n <StyledValuesContainer className={clsx({ wrap: allowWrap })}>\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) }, imgClassName)}\n style={imgStyle}\n data-tooltip={option.label}\n {...imgRest}\n />\n ) : option.icon ? (\n <Icon\n icon={option.icon}\n style={{ color: option.color, ...iconStyle }}\n className={iconClassName}\n {...iconRest}\n />\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 ...valueStyle,\n }}\n className={clsx({ placeholder: isPlaceholder }, valueClassName)}\n aria-label={option.label}\n {...valueRest}\n >\n {option.label}\n </StyledValue>\n )}\n </StyledValueWrapper>\n ))}\n </StyledValuesContainer>\n {!isItem && !isReadOnly && (\n <StyledExpandButton\n className={clsx('expand', EDIT_TRIGGER_CLASS, { open: isOpen }, expandClassName)}\n >\n <StyledExpandIcon\n icon=\"expand_more\"\n style={{ rotate: isOpen ? '180deg' : '0', ...expandStyle }}\n aria-label=\"Expand options\"\n {...expandRest}\n />\n </StyledExpandButton>\n )}\n {isItem && isSelected && isMultiSelect && (\n <Icon\n icon=\"close\"\n style={{ marginLeft: 'auto', marginRight: 4, ...closeStyle }}\n aria-label=\"Deselect item\"\n className={clsx('close', closeClassName)}\n {...closeRest}\n />\n )}\n </StyledWidget>\n )\n}\n\n// Helper functions to check if the icon is a valid image source\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"],"names":["EDIT_TRIGGER_CLASS","StyledWidget","styled","StyledValuesContainer","StyledValueWrapper","StyledValue","StyledImg","StyledExpandButton","StyledExpandIcon","Icon","EnumCellValue","selectedOptions","placeholder","hasMultipleValues","isMultiSelect","isOpen","isItem","isSelected","isReadOnly","rowHeight","className","pt","props","ptIcon","ptImg","ptValue","ptExpand","ptClose","iconStyle","iconClassName","iconRest","imgStyle","imgClassName","imgRest","valueStyle","valueClassName","valueRest","expandStyle","expandClassName","expandRest","closeStyle","closeClassName","closeRest","allOptionsHaveIcon","option","showLabels","backgroundColor","isPlaceholder","allowWrap","jsxs","clsx","jsx","i","checkForImgSrc","checkAvatarImg","icon","src"],"mappings":"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"}

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

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../../../_virtual/jsx-runtime.cjs.js"),d=require("../../../components/PlayableIcon/PlayableIcon.cjs.js"),x=require("react"),i=require("styled-components"),p=i.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../../../_virtual/jsx-runtime.cjs.js"),u=require("../../../components/PlayableIcon/PlayableIcon.cjs.js"),x=require("react"),i=require("styled-components"),p=i.div`
   position: absolute;
   inset: 0;
   padding: 4px;
+  display: flex;
 `,h=i.div`
   position: relative;
   max-height: 100%;
-  height: auto;
+  height: 100%;
   width: 100%;
-  aspect-ratio: 1.77;
+  //aspect-ratio: 1.77;
-  border-radius: 2px;
   overflow: hidden;
 `,m=i.img`
   position: relative;
@@ -17,8 +17,8 @@
   height: 100%;
   object-fit: contain;
   z-index: 20;
-`,b=i(d.PlayableIcon)`
+`,g=i(u.PlayableIcon)`
   right: 5px;
   top: 5px;
-`,g=({projectName:e,entityType:s,entityId:n,updatedAt:o,icon:v,isPlayable:a,id:c,...l})=>{const u=e&&s&&n&&o,r=e&&`/api/projects/${e}/${s}s/${n}/thumbnail?updatedAt=${o}`;return t.jsxRuntimeExports.jsxs(p,{className:"thumbnail-widget",id:c,children:[t.jsxRuntimeExports.jsx(h,{...l,children:u&&t.jsxRuntimeExports.jsx(m,{src:r})}),a&&t.jsxRuntimeExports.jsx(b,{})]},r)},j=x.memo(g);exports.ThumbnailWidget=j;
+`,b=({projectName:e,entityType:s,entityId:n,updatedAt:o,icon:v,isPlayable:a,id:l,...c})=>{const d=e&&s&&n&&o,r=e&&`/api/projects/${e}/${s}s/${n}/thumbnail?updatedAt=${o}`;return t.jsxRuntimeExports.jsxs(p,{className:"thumbnail-widget",id:l,children:[t.jsxRuntimeExports.jsx(h,{...c,children:d&&t.jsxRuntimeExports.jsx(m,{src:r})}),a&&t.jsxRuntimeExports.jsx(g,{})]},r)},j=x.memo(b);exports.ThumbnailWidget=j;
 //# sourceMappingURL=ThumbnailWidget.cjs.js.map

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

	@@ -1 +1 @@
1	- {"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":["Wrapper","styled","Inner","Image","StyledPlayableIcon","PlayableIcon","ThumbnailWidgetWrapper","projectName","entityType","entityId","updatedAt","icon","isPlayable","id","props","valid","url","jsxs","jsx","ThumbnailWidget","memo"],"mappings":"kQAKMA,EAAUC,EAAO;AAAA;AAAA;AAAA;AAAA,~~EAMjBC~~,EAAQD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA~~;AAAA~~,~~EAWfE~~,EAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQfG,EAAqBH,EAAOI,cAAY;AAAA;AAAA;AAAA,EAcxCC,EAAmD,CAAC,CACxD,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,WAAAC,EACA,GAAAC,EACA,GAAGC,CACL,IAAM,CACE,MAAAC,EAAQR,GAAeC,GAAcC,GAAYC,EACjDM,EACJT,GACA,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,wBAAwBC,CAAS,GAE1F,OACGO,EAAAA,kBAAAA,KAAAjB,EAAA,CAAQ,UAAU,mBAA6B,GAAAa,EAC9C,SAAA,CAACK,EAAAA,kBAAAA,IAAAhB,EAAA,CAAO,GAAGY,EAAQ,SAAAC,2BAAUZ,EAAM,CAAA,IAAKa,EAAK,CAAG,CAAA,EAC/CJ,2BAAeR,EAAmB,CAAA,CAAA,CAAA,CAAA,EAFMY,CAG3C,CAEJ,EAEaG,EAAkBC,OAAKd,CAAsB"}
1	+ {"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 display: flex;\n`\n\nconst Inner = styled.div`\n position: relative;\n max-height: 100%;\n height: 100%;\n width: 100%;\n //aspect-ratio: 1.77;\n\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":["Wrapper","styled","Inner","Image","StyledPlayableIcon","PlayableIcon","ThumbnailWidgetWrapper","projectName","entityType","entityId","updatedAt","icon","isPlayable","id","props","valid","url","jsxs","jsx","ThumbnailWidget","memo"],"mappings":"kQAKMA,EAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjBC,EAAQD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUfE,EAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQfG,EAAqBH,EAAOI,cAAY;AAAA;AAAA;AAAA,EAcxCC,EAAmD,CAAC,CACxD,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,WAAAC,EACA,GAAAC,EACA,GAAGC,CACL,IAAM,CACE,MAAAC,EAAQR,GAAeC,GAAcC,GAAYC,EACjDM,EACJT,GACA,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,wBAAwBC,CAAS,GAE1F,OACGO,EAAAA,kBAAAA,KAAAjB,EAAA,CAAQ,UAAU,mBAA6B,GAAAa,EAC9C,SAAA,CAACK,EAAAA,kBAAAA,IAAAhB,EAAA,CAAO,GAAGY,EAAQ,SAAAC,2BAAUZ,EAAM,CAAA,IAAKa,EAAK,CAAG,CAAA,EAC/CJ,2BAAeR,EAAmB,CAAA,CAAA,CAAA,CAAA,EAFMY,CAG3C,CAEJ,EAEaG,EAAkBC,OAAKd,CAAsB"}

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

@@ -1,19 +1,19 @@
 import { j as i } from "../../../../../_virtual/jsx-runtime.es.js";
-import { PlayableIcon as c } from "../../../components/PlayableIcon/PlayableIcon.es.js";
+import { PlayableIcon as d } from "../../../components/PlayableIcon/PlayableIcon.es.js";
 import { memo as m } from "react";
 import t from "styled-components";
 const h = t.div`
   position: absolute;
   inset: 0;
   padding: 4px;
+  display: flex;
 `, x = t.div`
   position: relative;
   max-height: 100%;
-  height: auto;
+  height: 100%;
   width: 100%;
-  aspect-ratio: 1.77;
+  //aspect-ratio: 1.77;
-  border-radius: 2px;
   overflow: hidden;
 `, g = t.img`
   position: relative;
@@ -21,25 +21,25 @@ const h = t.div`
   height: 100%;
   object-fit: contain;
   z-index: 20;
-`, u = t(c)`
+`, b = t(d)`
   right: 5px;
   top: 5px;
-`, b = ({
+`, u = ({
   projectName: o,
   entityType: s,
   entityId: n,
-  updatedAt: r,
+  updatedAt: e,
   icon: f,
   isPlayable: a,
   id: l,
   ...p
 }) => {
-  const d = o && s && n && r, e = o && `/api/projects/${o}/${s}s/${n}/thumbnail?updatedAt=${r}`;
+  const c = o && s && n && e, r = o && `/api/projects/${o}/${s}s/${n}/thumbnail?updatedAt=${e}`;
   return /* @__PURE__ */ i.jsxs(h, { className: "thumbnail-widget", id: l, children: [
-    /* @__PURE__ */ i.jsx(x, { ...p, children: d && /* @__PURE__ */ i.jsx(g, { src: e }) }),
-    a && /* @__PURE__ */ i.jsx(u, {})
-  ] }, e);
-}, $ = m(b);
+    /* @__PURE__ */ i.jsx(x, { ...p, children: c && /* @__PURE__ */ i.jsx(g, { src: r }) }),
+    a && /* @__PURE__ */ i.jsx(b, {})
+  ] }, r);
+}, $ = m(u);
 export {
   $ as ThumbnailWidget
 };

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

	@@ -1 +1 @@
1	- {"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":["Wrapper","styled","Inner","Image","StyledPlayableIcon","PlayableIcon","ThumbnailWidgetWrapper","projectName","entityType","entityId","updatedAt","icon","isPlayable","id","props","valid","url","jsxs","jsx","ThumbnailWidget","memo"],"mappings":";;;;AAKA,MAAMA,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA,~~GAMjBC~~,IAAQD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA~~;AAAA~~,~~GAWfE~~,IAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQfG,IAAqBH,EAAOI,CAAY;AAAA;AAAA;AAAA,GAcxCC,IAAmD,CAAC;AAAA,EACxD,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAQR,KAAeC,KAAcC,KAAYC,GACjDM,IACJT,KACA,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,wBAAwBC,CAAS;AAE1F,SACGO,gBAAAA,EAAAA,KAAAjB,GAAA,EAAQ,WAAU,oBAA6B,IAAAa,GAC9C,UAAA;AAAA,IAACK,gBAAAA,EAAAA,IAAAhB,GAAA,EAAO,GAAGY,GAAQ,UAAAC,2BAAUZ,GAAM,EAAA,KAAKa,GAAK,EAAG,CAAA;AAAA,IAC/CJ,2BAAeR,GAAmB,CAAA,CAAA;AAAA,EAAA,EAAA,GAFMY,CAG3C;AAEJ,GAEaG,IAAkBC,EAAKd,CAAsB;"}
1	+ {"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 display: flex;\n`\n\nconst Inner = styled.div`\n position: relative;\n max-height: 100%;\n height: 100%;\n width: 100%;\n //aspect-ratio: 1.77;\n\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":["Wrapper","styled","Inner","Image","StyledPlayableIcon","PlayableIcon","ThumbnailWidgetWrapper","projectName","entityType","entityId","updatedAt","icon","isPlayable","id","props","valid","url","jsxs","jsx","ThumbnailWidget","memo"],"mappings":";;;;AAKA,MAAMA,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOjBC,IAAQD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUfE,IAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQfG,IAAqBH,EAAOI,CAAY;AAAA;AAAA;AAAA,GAcxCC,IAAmD,CAAC;AAAA,EACxD,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAAC,IAAQR,KAAeC,KAAcC,KAAYC,GACjDM,IACJT,KACA,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,wBAAwBC,CAAS;AAE1F,SACGO,gBAAAA,EAAAA,KAAAjB,GAAA,EAAQ,WAAU,oBAA6B,IAAAa,GAC9C,UAAA;AAAA,IAACK,gBAAAA,EAAAA,IAAAhB,GAAA,EAAO,GAAGY,GAAQ,UAAAC,2BAAUZ,GAAM,EAAA,KAAKa,GAAK,EAAG,CAAA;AAAA,IAC/CJ,2BAAeR,GAAmB,CAAA,CAAA;AAAA,EAAA,EAAA,GAFMY,CAG3C;AAEJ,GAEaG,IAAkBC,EAAKd,CAAsB;"}

package/dist/shared/src/util/columnConfigConverter.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function S(n){const{columns:r=[],groupBy:s,showEmptyGroups:e,sortBy:t,sortDesc:i}=n||{},c={},o={left:[],right:[]},f=[],a={};return r.forEach(d=>{var l;const{name:g,visible:m,pinned:v,width:h}=d;c[g]=m!==!1,f.push(g),v&&((l=o.left)==null||l.push(g)),h!==void 0&&(a[g]=h)}),{columnVisibility:c,columnPinning:o,columnOrder:f,columnSizing:a,sorting:t?[{id:t,desc:i||!1}]:[],groupBy:s?{id:s,desc:!1}:void 0,groupByConfig:{showEmpty:e||!1}}}function B(n,r,s){const e=[...n],t=r.filter(i=>!n.includes(i)&&s.has(i));return[...e,...t]}function C(n,r,s,e){var i,c;const t=new Set;return Object.keys(n).forEach(o=>t.add(o)),Object.keys(r).forEach(o=>t.add(o)),(i=s.left)==null||i.forEach(o=>t.add(o)),(c=s.right)==null||c.forEach(o=>t.add(o)),e==null||e.forEach(o=>t.add(o)),t}function E(n,r,s,e){var o,f;const t={name:n};r.hasOwnProperty(n)&&(t.visible=r[n]);const i=(o=s.left)==null?void 0:o.includes(n),c=(f=s.right)==null?void 0:f.includes(n);return(i||c)&&(t.pinned=!0),e[n]!==void 0&&(t.width=e[n]),t}function w(n,r){const{columnVisibility:s,columnPinning:e,columnOrder:t,columnSizing:i,sorting:c,groupBy:o,groupByConfig:f}=n,a=C(s,i,e,r||[]),u={columns:B(t,r||[],a).map(d=>E(d,s,e,i))};if(o?u.groupBy=o.id:u.groupBy=void 0,(f==null?void 0:f.showEmpty)!==void 0&&(u.showEmptyGroups=f.showEmpty),c)if(c.length>0){const d=c[0];u.sortBy=d.id,u.sortDesc=d.desc}else u.sortBy=void 0,u.sortDesc=void 0;return u}exports.convertColumnConfigToTanstackStates=S;exports.convertTanstackStatesToColumnConfig=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function S(n){const{columns:r=[],groupBy:i,showEmptyGroups:s,sortBy:t,sortDesc:e,rowHeight:c}=n||{},o={},f={left:[],right:[]},a=[],g={};return r.forEach(u=>{var p;const{name:h,visible:m,pinned:w,width:l}=u;o[h]=m!==!1,a.push(h),w&&((p=f.left)==null||p.push(h)),l!==void 0&&(g[h]=l)}),{columnVisibility:o,columnPinning:f,columnOrder:a,columnSizing:g,sorting:t?[{id:t,desc:e||!1}]:[],groupBy:i?{id:i,desc:!1}:void 0,groupByConfig:{showEmpty:s||!1},rowHeight:c??34}}function B(n,r,i){const s=[...n],t=r.filter(e=>!n.includes(e)&&i.has(e));return[...s,...t]}function C(n,r,i,s){var e,c;const t=new Set;return Object.keys(n).forEach(o=>t.add(o)),Object.keys(r).forEach(o=>t.add(o)),(e=i.left)==null||e.forEach(o=>t.add(o)),(c=i.right)==null||c.forEach(o=>t.add(o)),s==null||s.forEach(o=>t.add(o)),t}function E(n,r,i,s){var o,f;const t={name:n};r.hasOwnProperty(n)&&(t.visible=r[n]);const e=(o=i.left)==null?void 0:o.includes(n),c=(f=i.right)==null?void 0:f.includes(n);return(e||c)&&(t.pinned=!0),s[n]!==void 0&&(t.width=s[n]),t}function T(n,r){const{columnVisibility:i,columnPinning:s,columnOrder:t,columnSizing:e,sorting:c,groupBy:o,groupByConfig:f,rowHeight:a}=n,g=C(i,e,s,r||[]),d={columns:B(t,r||[],g).map(u=>E(u,i,s,e))};if(o?d.groupBy=o.id:d.groupBy=void 0,(f==null?void 0:f.showEmpty)!==void 0&&(d.showEmptyGroups=f.showEmpty),c)if(c.length>0){const u=c[0];d.sortBy=u.id,d.sortDesc=u.desc}else d.sortBy=void 0,d.sortDesc=void 0;return a!==void 0&&(d.rowHeight=a),d}exports.convertColumnConfigToTanstackStates=S;exports.convertTanstackStatesToColumnConfig=T;
 //# sourceMappingURL=columnConfigConverter.cjs.js.map