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

@ynput/ayon-frontend-shared 0.2.3 → 0.2.4

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

Files changed (874) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@

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

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

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

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

@@ -0,0 +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 background-color: var(--md-sys-color-surface-container-lowest);\n border-radius: 2px;\n overflow: hidden;\n`\n\nconst Image = styled.img`\n position: relative;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 20;\n`\n\nconst StyledIcon = styled(Icon)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n`\n\ninterface ThumbnailWidgetProps {\n projectName: string\n entityType: string\n entityId: string\n updatedAt?: string\n icon?: string | null\n}\n\nconst ThumbnailWidgetWrapper: FC<ThumbnailWidgetProps> = ({\n projectName,\n entityType,\n entityId,\n updatedAt,\n icon,\n}) => {\n const valid = projectName && entityType && entityId && updatedAt\n const url =\n projectName &&\n `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail?updatedAt=${updatedAt}`\n\n return (\n <Wrapper className=\"thumbnail-widget\" key={url}>\n <Inner>\n {icon && <StyledIcon icon={icon} />}\n {valid && <Image src={url} />}\n </Inner>\n </Wrapper>\n )\n}\n\nexport const ThumbnailWidget = memo(ThumbnailWidgetWrapper)\n"],"names":["jsx"],"mappings":";;;;AAIA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrB,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB9B,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,QAAQ,eAAe,cAAc,YAAY;AACjD,QAAA,MACJ,eACA,iBAAiB,WAAW,IAAI,UAAU,KAAK,QAAQ,wBAAwB,SAAS;AAE1F,SACGA,kCAAA,IAAA,SAAA,EAAQ,WAAU,oBACjB,iDAAC,OACE,EAAA,UAAA;AAAA,IAAQ,QAAAA,kCAAA,IAAC,cAAW,KAAY,CAAA;AAAA,IAChC,SAASA,kCAAAA,IAAC,OAAM,EAAA,KAAK,IAAK,CAAA;AAAA,EAAA,EAC7B,CAAA,KAJyC,GAK3C;AAEJ;AAEa,MAAA,kBAAkB,KAAK,sBAAsB;"}

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

@@ -5,14 +5,14 @@ const React = require("react");
 const ayonReactComponents = require("@ynput/ayon-react-components");
 const treetable_esm = require("../../../node_modules/primereact/treetable/treetable.esm.cjs.js");
 const column_esm = require("../../../node_modules/primereact/column/column.esm.cjs.js");
-require("../../../../_virtual/lodash.cjs.js");
+require("lodash");
 require("react-toastify");
 const groupResult = require("../../util/groupResult.cjs.js");
 require("../../util/pubsub.cjs.js");
 require("../ContextMenu/ContextMenuContext.cjs.js");
 ;/* empty css                                   */
-const useCreateContextMenu = require("../ContextMenu/useCreateContextMenu.cjs.js");
 require("clsx");
+const useCreateContextMenu = require("../ContextMenu/useCreateContextMenu.cjs.js");
 require("../../components/ThumbnailSimple/ThumbnailSimple.cjs.js");
 require("../../components/EmptyPlaceholder/EmptyPlaceholder.cjs.js");
 require("../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");
@@ -65,6 +65,10 @@ require("../../api/queries/authentication/getAuthentication.cjs.js");
 require("../../api/queries/entities/getEntity.cjs.js");
 require("../../api/queries/entities/getEntityPanel.cjs.js");
 require("../../api/queries/entities/updateEntity.cjs.js");
+require("../../api/queries/entityLists/getLists.cjs.js");
+require("../../api/queries/entityLists/updateLists.cjs.js");
+require("../../api/queries/entityLists/getListsAttributes.cjs.js");
+require("../../api/queries/entityLists/updateListsAttributes.cjs.js");
 require("../../api/queries/folders/getFolders.cjs.js");
 require("../../api/queries/overview/getOverview.cjs.js");
 require("../../api/queries/overview/updateOverview.cjs.js");
@@ -85,6 +89,7 @@ require("../../components/ReviewablesList/ReviewablesUpload.styled.cjs.js");
 require("../../context/RemoteModulesContext.cjs.js");
 require("../../context/DetailsPanelContext.cjs.js");
 require("../../context/ThumbnailUploaderContext.cjs.js");
+require("../../context/SettingsPanelContext.cjs.js");
 require("../../context/pip/PiPProvider.cjs.js");
 require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
@@ -130,6 +135,18 @@ require("../ProjectTreeTable/context/ColumnSettingsContext.cjs.js");
 require("../ProjectTreeTable/context/CellEditingContext.cjs.js");
 require("../ProjectTreeTable/context/ClipboardContext.cjs.js");
 require("../ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
+require("@tanstack/react-table");
+require("../ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
+require("../ProjectTreeTable/widgets/DateWidget.cjs.js");
+require("../ProjectTreeTable/widgets/EnumWidget.cjs.js");
+require("../ProjectTreeTable/widgets/TextWidget.cjs.js");
+require("../ProjectTreeTable/widgets/BooleanWidget.cjs.js");
+require("../ProjectTreeTable/widgets/CellWidget.cjs.js");
+require("../ProjectTreeTable/widgets/EntityNameWidget.cjs.js");
+require("../ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");
+require("../ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
+require("../ProjectTreeTable/components/SelectionCell.cjs.js");
+require("../ProjectTreeTable/components/RowSelectionHeader.cjs.js");
 const versionsToRepresentations = require("./versionsToRepresentations.cjs.js");
 require("../DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../../../../_virtual/runtime.cjs.js");
@@ -150,6 +167,11 @@ require("../../components/EntityPath/EntityPath.styled.cjs.js");
 require("../../components/EntityPath/SegmentProvider.cjs.js");
 require("../../components/DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");
 require("../../components/Watchers/Watchers.cjs.js");
+require("../../components/ProjectTableSettings/ProjectTableSettings.cjs.js");
+require("../../components/SettingsPanel/SettingsPanel.cjs.js");
+require("../../components/SettingsPanel/SettingsPanelItemTemplate.cjs.js");
+require("../../components/AttributeEditor/components/MinMaxField.cjs.js");
+require("../../components/EnumEditor/EnumEditor.styled.cjs.js");
 const columns = [
   {
     field: "name",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RepresentationsList.cjs.js","sources":["../../../../../src/containers/RepresentationsList/RepresentationsList.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { TablePanel } from '@ynput/ayon-react-components'\n\nimport { TreeTable } from 'primereact/treetable'\nimport { Column } from 'primereact/column'\n\nimport { groupResult } from '@shared/util'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { DetailsDialog } from '@shared/components'\nimport versionsToRepresentations from './versionsToRepresentations'\nimport { DetailsPanelEntityData } from '@shared/api'\n\nconst columns = [\n {\n field: 'name',\n header: 'Name',\n width: 90,\n expander: true,\n },\n {\n field: 'folderName',\n header: 'Folder',\n width: 130,\n },\n {\n field: 'productName',\n header: 'Product',\n width: 130,\n },\n {\n field: 'Product type',\n header: 'productType',\n width: 110,\n },\n]\n\ntype Props = {\n entities: DetailsPanelEntityData[]\n}\n\nexport const RepresentationsList = ({ entities = [] }: Props) => {\n // merge all entities data into one array of entities\n const representations = useMemo(() => versionsToRepresentations(entities) \|\| [], [entities])\n\n const [showDetail, setShowDetail] = useState<false \| string>(false)\n const showDetailProjectName = representations.find((rep) => rep.id === showDetail)?.projectName\n\n const [selected, setSelected] = useState<string[]>([])\n\n const data = useMemo(() => {\n // @ts-expect-error - groupResult is not typed\n return groupResult(representations, 'name')\n }, [representations])\n\n const onRepSelectionChange = (entityId: string) => {\n // set focused state\n setSelected([entityId])\n }\n\n const onRowClick = (e: any) => {\n onRepSelectionChange(e.node.data.id)\n }\n\n const ctxMenuItems = (id: string) => [\n {\n label: 'Representation detail',\n command: () => setShowDetail(id),\n icon: 'database',\n },\n ]\n\n const [ctxMenuShow] = useCreateContextMenu([])\n\n const handleContextMenu = (e: any) => {\n const id = e.node.data.id\n\n if (id) {\n // update focused representations\n onRepSelectionChange(id)\n // open context menu\n ctxMenuShow(e.originalEvent, ctxMenuItems(id))\n }\n }\n\n return (\n <>\n <TablePanel>\n <TreeTable\n scrollable\n scrollHeight=\"100%\"\n value={data}\n emptyMessage=\"No representation found\"\n selectionMode=\"single\"\n selectionKeys={selected[0]}\n onRowClick={onRowClick}\n onContextMenu={handleContextMenu}\n >\n {columns.map((col) => {\n return (\n <Column\n key={col.field}\n field={col.field}\n header={col.header}\n expander={col.expander}\n style={{ width: col.width }}\n />\n )\n })}\n </TreeTable>\n </TablePanel>\n\n {showDetail && (\n <DetailsDialog\n projectName={showDetailProjectName}\n entityType={'representation'}\n entityIds={[showDetail]}\n visible={!!showDetail}\n onHide={() => setShowDetail(false)}\n />\n )}\n </>\n )\n}\n"],"names":["useMemo","useState","groupResult","useCreateContextMenu","jsxs","Fragment","jsx","TablePanel","TreeTable","Column","DetailsDialog"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAYA,MAAM,UAAU;AAAA,EACd;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;AAMO,MAAM,sBAAsB,CAAC,EAAE,WAAW,CAAA,QAAgB;;AAEzD,QAAA,kBAAkBA,MAAQ,QAAA,MAAM,0BAA0B,QAAQ,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;AAE3F,QAAM,CAAC,YAAY,aAAa,IAAIC,MAAAA,SAAyB,KAAK;AAC5D,QAAA,yBAAwB,qBAAgB,KAAK,CAAC,QAAQ,IAAI,OAAO,UAAU,MAAnD,mBAAsD;AAEpF,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAAmB,CAAA,CAAE;AAE/C,QAAA,OAAOD,MAAAA,QAAQ,MAAM;AAElB,WAAAE,YAAA,YAAY,iBAAiB,MAAM;AAAA,EAAA,GACzC,CAAC,eAAe,CAAC;AAEd,QAAA,uBAAuB,CAAC,aAAqB;AAErC,gBAAA,CAAC,QAAQ,CAAC;AAAA,EACxB;AAEM,QAAA,aAAa,CAAC,MAAW;AACR,yBAAA,EAAE,KAAK,KAAK,EAAE;AAAA,EACrC;AAEM,QAAA,eAAe,CAAC,OAAe;AAAA,IACnC;AAAA,MACE,OAAO;AAAA,MACP,SAAS,MAAM,cAAc,EAAE;AAAA,MAC/B,MAAM;AAAA,IAAA;AAAA,EAEV;AAEA,QAAM,CAAC,WAAW,IAAIC,qBAAA,qBAAqB,EAAE;AAEvC,QAAA,oBAAoB,CAAC,MAAW;AAC9B,UAAA,KAAK,EAAE,KAAK,KAAK;AAEvB,QAAI,IAAI;AAEN,2BAAqB,EAAE;AAEvB,kBAAY,EAAE,eAAe,aAAa,EAAE,CAAC;AAAA,IAAA;AAAA,EAEjD;AAEA,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAC,iDAACC,oBAAAA,YACC,EAAA,UAAAD,2BAAA,kBAAA;AAAA,MAACE,cAAA;AAAA,MAAA;AAAA,QACC,YAAU;AAAA,QACV,cAAa;AAAA,QACb,OAAO;AAAA,QACP,cAAa;AAAA,QACb,eAAc;AAAA,QACd,eAAe,SAAS,CAAC;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QAEd,UAAA,QAAQ,IAAI,CAAC,QAAQ;AAElB,iBAAAF,2BAAA,kBAAA;AAAA,YAACG,WAAA;AAAA,YAAA;AAAA,cAEC,OAAO,IAAI;AAAA,cACX,QAAQ,IAAI;AAAA,cACZ,UAAU,IAAI;AAAA,cACd,OAAO,EAAE,OAAO,IAAI,MAAM;AAAA,YAAA;AAAA,YAJrB,IAAI;AAAA,UAKX;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAEC,cACCH,2BAAA,kBAAA;AAAA,MAACI,cAAA;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,WAAW,CAAC,UAAU;AAAA,QACtB,SAAS,CAAC,CAAC;AAAA,QACX,QAAQ,MAAM,cAAc,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GAEJ;AAEJ;;"}
1	+ {"version":3,"file":"RepresentationsList.cjs.js","sources":["../../../../../src/containers/RepresentationsList/RepresentationsList.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { TablePanel } from '@ynput/ayon-react-components'\n\nimport { TreeTable } from 'primereact/treetable'\nimport { Column } from 'primereact/column'\n\nimport { groupResult } from '@shared/util'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { DetailsDialog } from '@shared/components'\nimport versionsToRepresentations from './versionsToRepresentations'\nimport { DetailsPanelEntityData } from '@shared/api'\n\nconst columns = [\n {\n field: 'name',\n header: 'Name',\n width: 90,\n expander: true,\n },\n {\n field: 'folderName',\n header: 'Folder',\n width: 130,\n },\n {\n field: 'productName',\n header: 'Product',\n width: 130,\n },\n {\n field: 'Product type',\n header: 'productType',\n width: 110,\n },\n]\n\ntype Props = {\n entities: DetailsPanelEntityData[]\n}\n\nexport const RepresentationsList = ({ entities = [] }: Props) => {\n // merge all entities data into one array of entities\n const representations = useMemo(() => versionsToRepresentations(entities) \|\| [], [entities])\n\n const [showDetail, setShowDetail] = useState<false \| string>(false)\n const showDetailProjectName = representations.find((rep) => rep.id === showDetail)?.projectName\n\n const [selected, setSelected] = useState<string[]>([])\n\n const data = useMemo(() => {\n // @ts-expect-error - groupResult is not typed\n return groupResult(representations, 'name')\n }, [representations])\n\n const onRepSelectionChange = (entityId: string) => {\n // set focused state\n setSelected([entityId])\n }\n\n const onRowClick = (e: any) => {\n onRepSelectionChange(e.node.data.id)\n }\n\n const ctxMenuItems = (id: string) => [\n {\n label: 'Representation detail',\n command: () => setShowDetail(id),\n icon: 'database',\n },\n ]\n\n const [ctxMenuShow] = useCreateContextMenu([])\n\n const handleContextMenu = (e: any) => {\n const id = e.node.data.id\n\n if (id) {\n // update focused representations\n onRepSelectionChange(id)\n // open context menu\n ctxMenuShow(e.originalEvent, ctxMenuItems(id))\n }\n }\n\n return (\n <>\n <TablePanel>\n <TreeTable\n scrollable\n scrollHeight=\"100%\"\n value={data}\n emptyMessage=\"No representation found\"\n selectionMode=\"single\"\n selectionKeys={selected[0]}\n onRowClick={onRowClick}\n onContextMenu={handleContextMenu}\n >\n {columns.map((col) => {\n return (\n <Column\n key={col.field}\n field={col.field}\n header={col.header}\n expander={col.expander}\n style={{ width: col.width }}\n />\n )\n })}\n </TreeTable>\n </TablePanel>\n\n {showDetail && (\n <DetailsDialog\n projectName={showDetailProjectName}\n entityType={'representation'}\n entityIds={[showDetail]}\n visible={!!showDetail}\n onHide={() => setShowDetail(false)}\n />\n )}\n </>\n )\n}\n"],"names":["useMemo","useState","groupResult","useCreateContextMenu","jsxs","Fragment","jsx","TablePanel","TreeTable","Column","DetailsDialog"],"mappings":"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"}