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

@ynput/ayon-frontend-shared 0.2.1 → 0.2.3

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 (170) hide show

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

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

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

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

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

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

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

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

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

@@ -278,6 +278,14 @@ const EnumCellValue = ({
         icon: "expand_more",
         style: { rotate: isOpen ? "180deg" : "0" }
       }
+    ),
+    isItem && isSelected && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      ayonReactComponents.Icon,
+      {
+        icon: "close",
+        style: { marginLeft: "auto", marginRight: 4 },
+        "aria-label": "Deselect item"
+      }
     )
   ] });
 };

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

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

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

@@ -276,6 +276,14 @@ const EnumCellValue = ({
         icon: "expand_more",
         style: { rotate: isOpen ? "180deg" : "0" }
       }
+    ),
+    isItem && isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Icon,
+      {
+        icon: "close",
+        style: { marginLeft: "auto", marginRight: 4 },
+        "aria-label": "Deselect item"
+      }
     )
   ] });
 };

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\n\nconst StyledBaseTextWidget = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`\n\ntype AttributeType = AttributeData['type']\nexport type TextWidgetType = Extract<AttributeType, 'string' \| 'integer' \| 'float'>\n\~~ninterface~~ TextWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n isInherited?: boolean\n}\n\nexport const TextWidget = forwardRef<HTMLSpanElement, TextWidgetProps>(\n ({ value, isEditing, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n if (isEditing) {\n return (\n <TextWidgetInput value={value} onChange={onChange} onCancel={onCancelEdit} type={'text'} />\n )\n }\n\n return (\n <StyledBaseTextWidget {...props} ref={ref}>\n {value}\n </StyledBaseTextWidget>\n )\n },\n)\n"],"names":["forwardRef","TextWidgetInput","jsx"],"mappings":";;;;;;AAMA,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAgB7B,MAAM,aAAaA,MAAA;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC5E,QAAI,WAAW;AACb,8DACGC,iCAAgB,EAAA,OAAc,UAAoB,UAAU,cAAc,MAAM,QAAQ;AAAA,IAAA;AAI7F,WACGC,2BAAAA,kBAAAA,IAAA,sBAAA,EAAsB,GAAG,OAAO,KAC9B,UACH,OAAA;AAAA,EAAA;AAGN;;"}
1	+ {"version":3,"file":"TextWidget.cjs.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\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;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\n\nconst StyledBaseTextWidget = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`\n\ntype AttributeType = AttributeData['type']\nexport type TextWidgetType = Extract<AttributeType, 'string' \| 'integer' \| 'float'>\n\~~ninterface~~ TextWidgetProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>,\n WidgetBaseProps {\n value: string\n isInherited?: boolean\n}\n\nexport const TextWidget = forwardRef<HTMLSpanElement, TextWidgetProps>(\n ({ value, isEditing, isInherited, onChange, onCancelEdit, ...props }, ref) => {\n if (isEditing) {\n return (\n <TextWidgetInput value={value} onChange={onChange} onCancel={onCancelEdit} type={'text'} />\n )\n }\n\n return (\n <StyledBaseTextWidget {...props} ref={ref}>\n {value}\n </StyledBaseTextWidget>\n )\n },\n)\n"],"names":["jsx"],"mappings":";;;;AAMA,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAgB7B,MAAM,aAAa;AAAA,EACxB,CAAC,EAAE,OAAO,WAAW,aAAa,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC5E,QAAI,WAAW;AACb,mDACG,iBAAgB,EAAA,OAAc,UAAoB,UAAU,cAAc,MAAM,QAAQ;AAAA,IAAA;AAI7F,WACGA,kCAAAA,IAAA,sBAAA,EAAsB,GAAG,OAAO,KAC9B,UACH,OAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"TextWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/TextWidget.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { TextWidgetInput } from './TextWidgetInput'\nimport { WidgetBaseProps } from './CellWidget'\nimport styled from 'styled-components'\nimport { AttributeData } from '../types'\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;"}

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

@@ -203,7 +203,6 @@ const RepresentationsList = ({ entities = [] }) => {
       ctxMenuShow(e.originalEvent, ctxMenuItems(id));
     }
   };
-  if (!showDetail) return;
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.TablePanel, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
       treetable_esm.TreeTable,
@@ -230,7 +229,7 @@ const RepresentationsList = ({ entities = [] }) => {
         })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    showDetail && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
       DetailsDialog.DetailsDialog,
       {
         projectName: showDetailProjectName,

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 ~~if (!showDetail)~~ return~~\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 <DetailsDialog\n projectName={showDetailProjectName}\n entityType={'representation'}\n entityIds={[showDetail]}\n visible={!!showDetail}\n onHide={() => setShowDetail(false)}\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,~~MAAI,CAAC,WAAY;AAEjB,~~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,~~IACAH~~,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,~~GACF~~;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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;"}

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

@@ -201,7 +201,6 @@ const RepresentationsList = ({ entities = [] }) => {
       ctxMenuShow(e.originalEvent, ctxMenuItems(id));
     }
   };
-  if (!showDetail) return;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TablePanel, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       TreeTable,
@@ -228,7 +227,7 @@ const RepresentationsList = ({ entities = [] }) => {
         })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    showDetail && /* @__PURE__ */ jsxRuntimeExports.jsx(
       DetailsDialog,
       {
         projectName: showDetailProjectName,

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

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

package/dist/shared/src/context/RemoteModulesContext.cjs.js CHANGED Viewed

@@ -98,7 +98,7 @@ const RemoteModulesProvider = ({ children, skip }) => {
         return {
           name: r.remote,
           alias: r.remote,
-          entry: `/addons/${r.addon || r.remote}/${r.version}/frontend/modules/${r.remote}/remoteEntry.js?server=${(_a = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _a.version}-${(_b = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _b.buildDate}`,
+          entry: `/addons/${r.addon || r.remote}/${r.version}/frontend/modules/${r.remote}/remoteEntry.js?server=${((_a = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _a.version) || (info == null ? void 0 : info.releaseInfo)}-${(_b = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _b.buildDate}-${(/* @__PURE__ */ new Date()).getTime()}`,
           type: "module"
         };
       })

package/dist/shared/src/context/RemoteModulesContext.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RemoteModulesContext.cjs.js","sources":["../../../../src/context/RemoteModulesContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useEffect, useState } from 'react'\nimport { registerRemotes } from '@module-federation/enhanced/runtime'\nimport {\n FrontendModuleListItem,\n useListFrontendModulesQuery,\n useGetSiteInfoQuery,\n} from '@shared/api'\n\ntype Module = {\n remote: string\n addon: string\n version: string\n modules: string[]\n}\n\ntype RemoteModulesContextType = {\n isLoading: boolean\n modules: FrontendModuleListItem[]\n remotesInitialized: boolean\n}\n\nconst RemoteModulesContext = createContext<RemoteModulesContextType>({\n isLoading: true,\n modules: [],\n remotesInitialized: false,\n})\n\ntype Props = {\n children: ReactNode\n skip?: boolean\n}\n\nexport const RemoteModulesProvider = ({ children, skip }: Props) => {\n // only load if logged in\n const { data: addonRemoteModules = [], isLoading } = useListFrontendModulesQuery(undefined, {\n skip,\n })\n\n const { data: info = {}, isLoading: isLoadingInfo } = useGetSiteInfoQuery(\n { full: true },\n { skip },\n )\n\n const [remotesInitialized, setRemotesInitialized] = useState(false)\n\n useEffect(() => {\n if (isLoading \|\| !addonRemoteModules.length \|\| isLoadingInfo \|\| remotesInitialized) return\n\n // create a flat map of modules to load\n const allRemotes: Module[] = []\n\n addonRemoteModules.forEach((addon) => {\n const { addonName, addonVersion, modules = {} } = addon\n\n Object.entries(modules).forEach(([remote, modules]) => {\n allRemotes.push({\n remote,\n addon: addonName,\n version: addonVersion,\n modules,\n })\n })\n })\n\n console.log('registerAddonRemotes', allRemotes)\n registerRemotes(\n allRemotes.map((r) => ({\n name: r.remote,\n alias: r.remote,\n entry: `/addons/${r.addon \|\| r.remote}/${r.version}/frontend/modules/${\n r.remote\n }/remoteEntry.js?server=${info?.releaseInfo?.version}-${info?.releaseInfo?.buildDate}`,\n type: 'module',\n })),\n )\n\n setRemotesInitialized(true)\n }, [addonRemoteModules, isLoading, isLoadingInfo, remotesInitialized])\n\n return (\n <RemoteModulesContext.Provider\n value={{\n isLoading,\n modules: addonRemoteModules,\n remotesInitialized,\n }}\n >\n {children}\n </RemoteModulesContext.Provider>\n )\n}\n\nexport const useRemoteModules = () => {\n const context = useContext(RemoteModulesContext)\n\n if (context === undefined) {\n throw new Error('useRemoteModules must be used within a RemoteModulesProvider')\n }\n\n return context\n}\n"],"names":["createContext","useListFrontendModulesQuery","useGetSiteInfoQuery","useState","useEffect","modules","registerRemotes","jsx","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,uBAAuBA,MAAAA,cAAwC;AAAA,EACnE,WAAW;AAAA,EACX,SAAS,CAAC;AAAA,EACV,oBAAoB;AACtB,CAAC;AAOM,MAAM,wBAAwB,CAAC,EAAE,UAAU,WAAkB;AAE5D,QAAA,EAAE,MAAM,qBAAqB,CAAA,GAAI,UAAU,IAAIC,sCAA4B,QAAW;AAAA,IAC1F;AAAA,EAAA,CACD;AAED,QAAM,EAAE,MAAM,OAAO,CAAI,GAAA,WAAW,kBAAkBC,UAAA;AAAA,IACpD,EAAE,MAAM,KAAK;AAAA,IACb,EAAE,KAAK;AAAA,EACT;AAEA,QAAM,CAAC,oBAAoB,qBAAqB,IAAIC,MAAAA,SAAS,KAAK;AAElEC,QAAAA,UAAU,MAAM;AACd,QAAI,aAAa,CAAC,mBAAmB,UAAU,iBAAiB,mBAAoB;AAGpF,UAAM,aAAuB,CAAC;AAEX,uBAAA,QAAQ,CAAC,UAAU;AACpC,YAAM,EAAE,WAAW,cAAc,UAAU,CAAA,EAAO,IAAA;AAE3C,aAAA,QAAQ,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQC,QAAO,MAAM;AACrD,mBAAW,KAAK;AAAA,UACd;AAAA,UACA,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAAAA;AAAAA,QAAA,CACD;AAAA,MAAA,CACF;AAAA,IAAA,CACF;AAEO,YAAA,IAAI,wBAAwB,UAAU;AAC9CC,YAAA,eAAA;AAAA,MACE,WAAW,IAAI,CAAC,MAAO;;AAAA;AAAA,UACrB,MAAM,EAAE;AAAA,UACR,OAAO,EAAE;AAAA,UACT,OAAO,WAAW,EAAE,SAAS,EAAE,MAAM,IAAI,EAAE,OAAO,qBAChD,EAAE,MACJ,~~2BAA0B~~,kCAAM,gBAAN,mBAAmB,~~OAAO~~,~~KAAI~~,kCAAM,gBAAN,mBAAmB,~~SAAS~~;AAAA,~~UACpF~~,MAAM;AAAA,QAAA;AAAA,OACN;AAAA,IACJ;AAEA,0BAAsB,IAAI;AAAA,KACzB,CAAC,oBAAoB,WAAW,eAAe,kBAAkB,CAAC;AAGnE,SAAAC,2BAAA,kBAAA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AAC9B,QAAA,UAAUC,iBAAW,oBAAoB;AAE/C,MAAI,YAAY,QAAW;AACnB,UAAA,IAAI,MAAM,8DAA8D;AAAA,EAAA;AAGzE,SAAA;AACT;;;"}
1	+ {"version":3,"file":"RemoteModulesContext.cjs.js","sources":["../../../../src/context/RemoteModulesContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useEffect, useState } from 'react'\nimport { registerRemotes } from '@module-federation/enhanced/runtime'\nimport {\n FrontendModuleListItem,\n useListFrontendModulesQuery,\n useGetSiteInfoQuery,\n} from '@shared/api'\n\ntype Module = {\n remote: string\n addon: string\n version: string\n modules: string[]\n}\n\ntype RemoteModulesContextType = {\n isLoading: boolean\n modules: FrontendModuleListItem[]\n remotesInitialized: boolean\n}\n\nconst RemoteModulesContext = createContext<RemoteModulesContextType>({\n isLoading: true,\n modules: [],\n remotesInitialized: false,\n})\n\ntype Props = {\n children: ReactNode\n skip?: boolean\n}\n\nexport const RemoteModulesProvider = ({ children, skip }: Props) => {\n // only load if logged in\n const { data: addonRemoteModules = [], isLoading } = useListFrontendModulesQuery(undefined, {\n skip,\n })\n\n const { data: info = {}, isLoading: isLoadingInfo } = useGetSiteInfoQuery(\n { full: true },\n { skip },\n )\n\n const [remotesInitialized, setRemotesInitialized] = useState(false)\n\n useEffect(() => {\n if (isLoading \|\| !addonRemoteModules.length \|\| isLoadingInfo \|\| remotesInitialized) return\n\n // create a flat map of modules to load\n const allRemotes: Module[] = []\n\n addonRemoteModules.forEach((addon) => {\n const { addonName, addonVersion, modules = {} } = addon\n\n Object.entries(modules).forEach(([remote, modules]) => {\n allRemotes.push({\n remote,\n addon: addonName,\n version: addonVersion,\n modules,\n })\n })\n })\n\n console.log('registerAddonRemotes', allRemotes)\n registerRemotes(\n allRemotes.map((r) => ({\n name: r.remote,\n alias: r.remote,\n entry: `/addons/${r.addon \|\| r.remote}/${r.version}/frontend/modules/${\n r.remote\n }/remoteEntry.js?server=${info?.releaseInfo?.version \|\| info?.releaseInfo}-${\n info?.releaseInfo?.buildDate\n }-${new Date().getTime()}`,\n type: 'module',\n })),\n )\n\n setRemotesInitialized(true)\n }, [addonRemoteModules, isLoading, isLoadingInfo, remotesInitialized])\n\n return (\n <RemoteModulesContext.Provider\n value={{\n isLoading,\n modules: addonRemoteModules,\n remotesInitialized,\n }}\n >\n {children}\n </RemoteModulesContext.Provider>\n )\n}\n\nexport const useRemoteModules = () => {\n const context = useContext(RemoteModulesContext)\n\n if (context === undefined) {\n throw new Error('useRemoteModules must be used within a RemoteModulesProvider')\n }\n\n return context\n}\n"],"names":["createContext","useListFrontendModulesQuery","useGetSiteInfoQuery","useState","useEffect","modules","registerRemotes","jsx","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,uBAAuBA,MAAAA,cAAwC;AAAA,EACnE,WAAW;AAAA,EACX,SAAS,CAAC;AAAA,EACV,oBAAoB;AACtB,CAAC;AAOM,MAAM,wBAAwB,CAAC,EAAE,UAAU,WAAkB;AAE5D,QAAA,EAAE,MAAM,qBAAqB,CAAA,GAAI,UAAU,IAAIC,sCAA4B,QAAW;AAAA,IAC1F;AAAA,EAAA,CACD;AAED,QAAM,EAAE,MAAM,OAAO,CAAI,GAAA,WAAW,kBAAkBC,UAAA;AAAA,IACpD,EAAE,MAAM,KAAK;AAAA,IACb,EAAE,KAAK;AAAA,EACT;AAEA,QAAM,CAAC,oBAAoB,qBAAqB,IAAIC,MAAAA,SAAS,KAAK;AAElEC,QAAAA,UAAU,MAAM;AACd,QAAI,aAAa,CAAC,mBAAmB,UAAU,iBAAiB,mBAAoB;AAGpF,UAAM,aAAuB,CAAC;AAEX,uBAAA,QAAQ,CAAC,UAAU;AACpC,YAAM,EAAE,WAAW,cAAc,UAAU,CAAA,EAAO,IAAA;AAE3C,aAAA,QAAQ,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQC,QAAO,MAAM;AACrD,mBAAW,KAAK;AAAA,UACd;AAAA,UACA,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAAAA;AAAAA,QAAA,CACD;AAAA,MAAA,CACF;AAAA,IAAA,CACF;AAEO,YAAA,IAAI,wBAAwB,UAAU;AAC9CC,YAAA,eAAA;AAAA,MACE,WAAW,IAAI,CAAC,MAAO;;AAAA;AAAA,UACrB,MAAM,EAAE;AAAA,UACR,OAAO,EAAE;AAAA,UACT,OAAO,WAAW,EAAE,SAAS,EAAE,MAAM,IAAI,EAAE,OAAO,qBAChD,EAAE,MACJ,4BAA0B,kCAAM,gBAAN,mBAAmB,aAAW,6BAAM,YAAW,KACvE,kCAAM,gBAAN,mBAAmB,SACrB,KAAQ,oBAAA,KAAA,GAAO,QAAS,CAAA;AAAA,UACxB,MAAM;AAAA,QAAA;AAAA,OACN;AAAA,IACJ;AAEA,0BAAsB,IAAI;AAAA,KACzB,CAAC,oBAAoB,WAAW,eAAe,kBAAkB,CAAC;AAGnE,SAAAC,2BAAA,kBAAA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AAC9B,QAAA,UAAUC,iBAAW,oBAAoB;AAE/C,MAAI,YAAY,QAAW;AACnB,UAAA,IAAI,MAAM,8DAA8D;AAAA,EAAA;AAGzE,SAAA;AACT;;;"}

package/dist/shared/src/context/RemoteModulesContext.es.js CHANGED Viewed

@@ -96,7 +96,7 @@ const RemoteModulesProvider = ({ children, skip }) => {
         return {
           name: r.remote,
           alias: r.remote,
-          entry: `/addons/${r.addon || r.remote}/${r.version}/frontend/modules/${r.remote}/remoteEntry.js?server=${(_a = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _a.version}-${(_b = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _b.buildDate}`,
+          entry: `/addons/${r.addon || r.remote}/${r.version}/frontend/modules/${r.remote}/remoteEntry.js?server=${((_a = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _a.version) || (info == null ? void 0 : info.releaseInfo)}-${(_b = info == null ? void 0 : info.releaseInfo) == null ? void 0 : _b.buildDate}-${(/* @__PURE__ */ new Date()).getTime()}`,
           type: "module"
         };
       })

package/dist/shared/src/context/RemoteModulesContext.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RemoteModulesContext.es.js","sources":["../../../../src/context/RemoteModulesContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useEffect, useState } from 'react'\nimport { registerRemotes } from '@module-federation/enhanced/runtime'\nimport {\n FrontendModuleListItem,\n useListFrontendModulesQuery,\n useGetSiteInfoQuery,\n} from '@shared/api'\n\ntype Module = {\n remote: string\n addon: string\n version: string\n modules: string[]\n}\n\ntype RemoteModulesContextType = {\n isLoading: boolean\n modules: FrontendModuleListItem[]\n remotesInitialized: boolean\n}\n\nconst RemoteModulesContext = createContext<RemoteModulesContextType>({\n isLoading: true,\n modules: [],\n remotesInitialized: false,\n})\n\ntype Props = {\n children: ReactNode\n skip?: boolean\n}\n\nexport const RemoteModulesProvider = ({ children, skip }: Props) => {\n // only load if logged in\n const { data: addonRemoteModules = [], isLoading } = useListFrontendModulesQuery(undefined, {\n skip,\n })\n\n const { data: info = {}, isLoading: isLoadingInfo } = useGetSiteInfoQuery(\n { full: true },\n { skip },\n )\n\n const [remotesInitialized, setRemotesInitialized] = useState(false)\n\n useEffect(() => {\n if (isLoading \|\| !addonRemoteModules.length \|\| isLoadingInfo \|\| remotesInitialized) return\n\n // create a flat map of modules to load\n const allRemotes: Module[] = []\n\n addonRemoteModules.forEach((addon) => {\n const { addonName, addonVersion, modules = {} } = addon\n\n Object.entries(modules).forEach(([remote, modules]) => {\n allRemotes.push({\n remote,\n addon: addonName,\n version: addonVersion,\n modules,\n })\n })\n })\n\n console.log('registerAddonRemotes', allRemotes)\n registerRemotes(\n allRemotes.map((r) => ({\n name: r.remote,\n alias: r.remote,\n entry: `/addons/${r.addon \|\| r.remote}/${r.version}/frontend/modules/${\n r.remote\n }/remoteEntry.js?server=${info?.releaseInfo?.version}-${info?.releaseInfo?.buildDate}`,\n type: 'module',\n })),\n )\n\n setRemotesInitialized(true)\n }, [addonRemoteModules, isLoading, isLoadingInfo, remotesInitialized])\n\n return (\n <RemoteModulesContext.Provider\n value={{\n isLoading,\n modules: addonRemoteModules,\n remotesInitialized,\n }}\n >\n {children}\n </RemoteModulesContext.Provider>\n )\n}\n\nexport const useRemoteModules = () => {\n const context = useContext(RemoteModulesContext)\n\n if (context === undefined) {\n throw new Error('useRemoteModules must be used within a RemoteModulesProvider')\n }\n\n return context\n}\n"],"names":["modules","registerRemotes","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,uBAAuB,cAAwC;AAAA,EACnE,WAAW;AAAA,EACX,SAAS,CAAC;AAAA,EACV,oBAAoB;AACtB,CAAC;AAOM,MAAM,wBAAwB,CAAC,EAAE,UAAU,WAAkB;AAE5D,QAAA,EAAE,MAAM,qBAAqB,CAAA,GAAI,UAAU,IAAI,4BAA4B,QAAW;AAAA,IAC1F;AAAA,EAAA,CACD;AAED,QAAM,EAAE,MAAM,OAAO,CAAI,GAAA,WAAW,kBAAkB;AAAA,IACpD,EAAE,MAAM,KAAK;AAAA,IACb,EAAE,KAAK;AAAA,EACT;AAEA,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAElE,YAAU,MAAM;AACd,QAAI,aAAa,CAAC,mBAAmB,UAAU,iBAAiB,mBAAoB;AAGpF,UAAM,aAAuB,CAAC;AAEX,uBAAA,QAAQ,CAAC,UAAU;AACpC,YAAM,EAAE,WAAW,cAAc,UAAU,CAAA,EAAO,IAAA;AAE3C,aAAA,QAAQ,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQA,QAAO,MAAM;AACrD,mBAAW,KAAK;AAAA,UACd;AAAA,UACA,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAAAA;AAAAA,QAAA,CACD;AAAA,MAAA,CACF;AAAA,IAAA,CACF;AAEO,YAAA,IAAI,wBAAwB,UAAU;AAC9CC,mBAAA;AAAA,MACE,WAAW,IAAI,CAAC,MAAO;;AAAA;AAAA,UACrB,MAAM,EAAE;AAAA,UACR,OAAO,EAAE;AAAA,UACT,OAAO,WAAW,EAAE,SAAS,EAAE,MAAM,IAAI,EAAE,OAAO,qBAChD,EAAE,MACJ,~~2BAA0B~~,kCAAM,gBAAN,mBAAmB,~~OAAO~~,~~KAAI~~,kCAAM,gBAAN,mBAAmB,~~SAAS~~;AAAA,~~UACpF~~,MAAM;AAAA,QAAA;AAAA,OACN;AAAA,IACJ;AAEA,0BAAsB,IAAI;AAAA,KACzB,CAAC,oBAAoB,WAAW,eAAe,kBAAkB,CAAC;AAGnE,SAAAC,kCAAA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AAC9B,QAAA,UAAU,WAAW,oBAAoB;AAE/C,MAAI,YAAY,QAAW;AACnB,UAAA,IAAI,MAAM,8DAA8D;AAAA,EAAA;AAGzE,SAAA;AACT;"}
1	+ {"version":3,"file":"RemoteModulesContext.es.js","sources":["../../../../src/context/RemoteModulesContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useEffect, useState } from 'react'\nimport { registerRemotes } from '@module-federation/enhanced/runtime'\nimport {\n FrontendModuleListItem,\n useListFrontendModulesQuery,\n useGetSiteInfoQuery,\n} from '@shared/api'\n\ntype Module = {\n remote: string\n addon: string\n version: string\n modules: string[]\n}\n\ntype RemoteModulesContextType = {\n isLoading: boolean\n modules: FrontendModuleListItem[]\n remotesInitialized: boolean\n}\n\nconst RemoteModulesContext = createContext<RemoteModulesContextType>({\n isLoading: true,\n modules: [],\n remotesInitialized: false,\n})\n\ntype Props = {\n children: ReactNode\n skip?: boolean\n}\n\nexport const RemoteModulesProvider = ({ children, skip }: Props) => {\n // only load if logged in\n const { data: addonRemoteModules = [], isLoading } = useListFrontendModulesQuery(undefined, {\n skip,\n })\n\n const { data: info = {}, isLoading: isLoadingInfo } = useGetSiteInfoQuery(\n { full: true },\n { skip },\n )\n\n const [remotesInitialized, setRemotesInitialized] = useState(false)\n\n useEffect(() => {\n if (isLoading \|\| !addonRemoteModules.length \|\| isLoadingInfo \|\| remotesInitialized) return\n\n // create a flat map of modules to load\n const allRemotes: Module[] = []\n\n addonRemoteModules.forEach((addon) => {\n const { addonName, addonVersion, modules = {} } = addon\n\n Object.entries(modules).forEach(([remote, modules]) => {\n allRemotes.push({\n remote,\n addon: addonName,\n version: addonVersion,\n modules,\n })\n })\n })\n\n console.log('registerAddonRemotes', allRemotes)\n registerRemotes(\n allRemotes.map((r) => ({\n name: r.remote,\n alias: r.remote,\n entry: `/addons/${r.addon \|\| r.remote}/${r.version}/frontend/modules/${\n r.remote\n }/remoteEntry.js?server=${info?.releaseInfo?.version \|\| info?.releaseInfo}-${\n info?.releaseInfo?.buildDate\n }-${new Date().getTime()}`,\n type: 'module',\n })),\n )\n\n setRemotesInitialized(true)\n }, [addonRemoteModules, isLoading, isLoadingInfo, remotesInitialized])\n\n return (\n <RemoteModulesContext.Provider\n value={{\n isLoading,\n modules: addonRemoteModules,\n remotesInitialized,\n }}\n >\n {children}\n </RemoteModulesContext.Provider>\n )\n}\n\nexport const useRemoteModules = () => {\n const context = useContext(RemoteModulesContext)\n\n if (context === undefined) {\n throw new Error('useRemoteModules must be used within a RemoteModulesProvider')\n }\n\n return context\n}\n"],"names":["modules","registerRemotes","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,uBAAuB,cAAwC;AAAA,EACnE,WAAW;AAAA,EACX,SAAS,CAAC;AAAA,EACV,oBAAoB;AACtB,CAAC;AAOM,MAAM,wBAAwB,CAAC,EAAE,UAAU,WAAkB;AAE5D,QAAA,EAAE,MAAM,qBAAqB,CAAA,GAAI,UAAU,IAAI,4BAA4B,QAAW;AAAA,IAC1F;AAAA,EAAA,CACD;AAED,QAAM,EAAE,MAAM,OAAO,CAAI,GAAA,WAAW,kBAAkB;AAAA,IACpD,EAAE,MAAM,KAAK;AAAA,IACb,EAAE,KAAK;AAAA,EACT;AAEA,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAElE,YAAU,MAAM;AACd,QAAI,aAAa,CAAC,mBAAmB,UAAU,iBAAiB,mBAAoB;AAGpF,UAAM,aAAuB,CAAC;AAEX,uBAAA,QAAQ,CAAC,UAAU;AACpC,YAAM,EAAE,WAAW,cAAc,UAAU,CAAA,EAAO,IAAA;AAE3C,aAAA,QAAQ,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQA,QAAO,MAAM;AACrD,mBAAW,KAAK;AAAA,UACd;AAAA,UACA,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAAAA;AAAAA,QAAA,CACD;AAAA,MAAA,CACF;AAAA,IAAA,CACF;AAEO,YAAA,IAAI,wBAAwB,UAAU;AAC9CC,mBAAA;AAAA,MACE,WAAW,IAAI,CAAC,MAAO;;AAAA;AAAA,UACrB,MAAM,EAAE;AAAA,UACR,OAAO,EAAE;AAAA,UACT,OAAO,WAAW,EAAE,SAAS,EAAE,MAAM,IAAI,EAAE,OAAO,qBAChD,EAAE,MACJ,4BAA0B,kCAAM,gBAAN,mBAAmB,aAAW,6BAAM,YAAW,KACvE,kCAAM,gBAAN,mBAAmB,SACrB,KAAQ,oBAAA,KAAA,GAAO,QAAS,CAAA;AAAA,UACxB,MAAM;AAAA,QAAA;AAAA,OACN;AAAA,IACJ;AAEA,0BAAsB,IAAI;AAAA,KACzB,CAAC,oBAAoB,WAAW,eAAe,kBAAkB,CAAC;AAGnE,SAAAC,kCAAA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AAC9B,QAAA,UAAU,WAAW,oBAAoB;AAE/C,MAAI,YAAY,QAAW;AACnB,UAAA,IAAI,MAAM,8DAA8D;AAAA,EAAA;AAGzE,SAAA;AACT;"}

package/dist/shared/src/hooks/useLoadModules.cjs.js ADDED Viewed

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const runtime = require("../../../_virtual/runtime.cjs.js");
+const React = require("react");
+const semver = require("../../../_virtual/semver.cjs.js");
+const useLoadModules = (moduleSpecs, modules, skip) => {
+  const processedModules = React.useRef(/* @__PURE__ */ new Set());
+  const [results, setResults] = React.useState(
+    () => initializeResults(moduleSpecs)
+  );
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    if (skip) return;
+    processedModules.current = /* @__PURE__ */ new Set();
+    setResults(initializeResults(moduleSpecs));
+  }, [JSON.stringify(moduleSpecs), skip]);
+  const loadModule = async (remote, module2, addon, fallback, minVersion) => {
+    try {
+      const result = await runtime.runtimeExports.loadRemote(`${remote}/${module2}`, {
+        from: "runtime"
+      });
+      updateResultWithLoaded(addon, remote, module2, (result == null ? void 0 : result.default) || fallback, minVersion);
+    } catch (error) {
+      console.error("Error loading remote module", remote, module2, error);
+      throw error;
+    }
+  };
+  React.useEffect(() => {
+    if (skip) return;
+    console.log("loading modules");
+    const promises = [];
+    moduleSpecs.forEach((spec, index) => {
+      var _a, _b;
+      const { addon, remote, module: module2, fallback, minVersion } = spec;
+      if (!addon || !remote || !module2) return;
+      const moduleKey = `${addon}/${remote}/${module2}`;
+      if (processedModules.current.has(moduleKey)) return;
+      if ((_b = (_a = results[index]) == null ? void 0 : _a[1]) == null ? void 0 : _b.isLoaded) {
+        processedModules.current.add(moduleKey);
+        return;
+      }
+      processedModules.current.add(moduleKey);
+      const addonInfo = modules.find((m) => m.addonName === addon);
+      if (!addonInfo) {
+        console.log("Addon not found", { addon, remote, module: module2 });
+        return;
+      }
+      if (minVersion && !semver.gte(addonInfo.addonVersion, minVersion)) {
+        updateResultWithOutdated(
+          index,
+          addon,
+          remote,
+          module2,
+          fallback,
+          minVersion,
+          addonInfo.addonVersion
+        );
+        return;
+      }
+      if (!addonInfo.modules[remote]) {
+        console.log("Module not found", { addon, remote, module: module2 });
+        return;
+      }
+      promises.push(loadModule(remote, module2, addon, fallback, minVersion));
+    });
+    setIsLoading(true);
+    Promise.all(promises).then(() => {
+      setIsLoading(false);
+    }).catch((error) => {
+      console.error("Error loading modules", error);
+      setIsLoading(false);
+    });
+  }, [skip, modules, JSON.stringify(moduleSpecs)]);
+  function initializeResults(specs) {
+    return specs.map(
+      ({ addon = "", remote = "", module: module2 = "", fallback, minVersion }) => [
+        fallback,
+        {
+          isLoaded: false,
+          addon,
+          remote,
+          module: module2,
+          minVersion,
+          outdated: void 0
+        }
+      ]
+    );
+  }
+  function updateResultWithOutdated(index, addon, remote, module2, fallback, requiredVersion, currentVersion) {
+    setResults((prev) => {
+      const updated = [...prev];
+      if (index >= 0 && index < updated.length) {
+        updated[index] = [
+          fallback,
+          {
+            isLoaded: false,
+            addon,
+            remote,
+            module: module2,
+            minVersion: requiredVersion,
+            outdated: {
+              current: currentVersion,
+              required: requiredVersion
+            }
+          }
+        ];
+      }
+      return updated;
+    });
+  }
+  function updateResultWithLoaded(addon, remote, module2, loadedModule, minVersion) {
+    setResults((prev) => {
+      const updated = [...prev];
+      const index = moduleSpecs.findIndex(
+        (spec) => spec.addon === addon && spec.remote === remote && spec.module === module2
+      );
+      if (index >= 0 && index < updated.length) {
+        updated[index] = [
+          loadedModule,
+          {
+            isLoaded: true,
+            addon,
+            remote,
+            module: module2,
+            minVersion,
+            outdated: void 0
+          }
+        ];
+      }
+      return updated;
+    });
+  }
+  return { modules: results, isLoading };
+};
+exports.useLoadModules = useLoadModules;
+//# sourceMappingURL=useLoadModules.cjs.js.map

package/dist/shared/src/hooks/useLoadModules.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useLoadModules.cjs.js","sources":["../../../../src/hooks/useLoadModules.ts"],"sourcesContent":["import { useRemoteModules } from '@shared/context/RemoteModulesContext'\nimport { loadRemote } from '@module-federation/enhanced/runtime'\nimport { useEffect, useRef, useState } from 'react'\nimport semver from 'semver'\nimport { FrontendModuleListItem } from '@shared/api'\n\nexport interface ModuleSpec<T> {\n addon: string\n remote: string\n module: string\n fallback?: T\n debug?: boolean\n minVersion?: string\n}\n\ntype ModuleResult<T> = [\n T,\n {\n isLoaded: boolean\n addon: string\n remote: string\n module: string\n minVersion?: string\n outdated?: {\n current: string\n required: string\n }\n },\n]\n\nexport const useLoadModules = <T extends any[]>(\n moduleSpecs: ModuleSpec<T[number]>[],\n modules: FrontendModuleListItem[],\n skip: boolean,\n): { modules: ModuleResult<T[number]>[]; isLoading: boolean } => {\n // Use a ref to track which modules have been processed\n const processedModules = useRef<Set<string>>(new Set())\n\n // Initialize results state\n const [results, setResults] = useState<ModuleResult<T[number]>[]>(() =>\n initializeResults(moduleSpecs),\n )\n const [isLoading, setIsLoading] = useState(true)\n\n // Reset and reinitialize when moduleSpecs change\n useEffect(() => {\n if (skip) return\n // Reset the processed modules tracker\n processedModules.current = new Set()\n\n // Initialize results with proper structure\n setResults(initializeResults(moduleSpecs))\n }, [JSON.stringify(moduleSpecs), skip])\n\n const loadModule = async (\n remote: string,\n module: string,\n addon: string,\n fallback: T[number] | undefined,\n minVersion?: string,\n ) => {\n try {\n const result = await loadRemote<{ default: T[number] }>(`${remote}/${module}`, {\n from: 'runtime',\n })\n updateResultWithLoaded(addon, remote, module, result?.default || fallback, minVersion)\n } catch (error) {\n console.error('Error loading remote module', remote, module, error)\n throw error\n }\n }\n\n // Load modules when remotes are initialized\n useEffect(() => {\n if (skip) return\n\n console.log('loading modules')\n\n const promises: Promise<void>[] = []\n moduleSpecs.forEach((spec, index) => {\n const { addon, remote, module, fallback, minVersion } = spec\n\n if (!addon || !remote || !module) return\n\n // Create a unique key for this module\n const moduleKey = `${addon}/${remote}/${module}`\n\n // Skip if already processed\n if (processedModules.current.has(moduleKey)) return\n\n // Check if this module is already loaded in our results\n if (results[index]?.[1]?.isLoaded) {\n processedModules.current.add(moduleKey)\n return\n }\n\n // Mark as processed\n processedModules.current.add(moduleKey)\n\n const addonInfo = modules.find((m) => m.addonName === addon)\n\n // Handle missing addon\n if (!addonInfo) {\n console.log('Addon not found', { addon, remote, module })\n return\n }\n\n // Check version requirements\n if (minVersion && !semver.gte(addonInfo.addonVersion, minVersion)) {\n updateResultWithOutdated(\n index,\n addon,\n remote,\n module,\n fallback,\n minVersion,\n addonInfo.addonVersion,\n )\n return\n }\n\n // Check if module exists\n if (!addonInfo.modules[remote]) {\n console.log('Module not found', { addon, remote, module })\n return\n }\n\n promises.push(loadModule(remote, module, addon, fallback, minVersion))\n })\n\n // Wait for all promises to resolve\n setIsLoading(true)\n Promise.all(promises)\n .then(() => {\n // all modules loaded\n setIsLoading(false)\n })\n .catch((error) => {\n console.error('Error loading modules', error)\n setIsLoading(false)\n })\n }, [skip, modules, JSON.stringify(moduleSpecs)])\n\n // Helper function to initialize results\n function initializeResults(specs: ModuleSpec<T[number]>[]): ModuleResult<T[number]>[] {\n return specs.map(\n ({ addon = '', remote = '', module = '', fallback, minVersion }): ModuleResult<T[number]> => [\n fallback as T[number],\n {\n isLoaded: false,\n addon,\n remote,\n module,\n minVersion,\n outdated: undefined,\n },\n ],\n )\n }\n\n // Helper to update a result with outdated status\n function updateResultWithOutdated(\n index: number,\n addon: string,\n remote: string,\n module: string,\n fallback: T[number] | undefined,\n requiredVersion: string,\n currentVersion: string,\n ) {\n setResults((prev) => {\n const updated = [...prev]\n if (index >= 0 && index < updated.length) {\n updated[index] = [\n fallback,\n {\n isLoaded: false,\n addon,\n remote,\n module,\n minVersion: requiredVersion,\n outdated: {\n current: currentVersion,\n required: requiredVersion,\n },\n },\n ]\n }\n return updated\n })\n }\n\n // Helper to update a result when module is loaded\n function updateResultWithLoaded(\n addon: string,\n remote: string,\n module: string,\n loadedModule: T[number] | undefined,\n minVersion?: string,\n ) {\n setResults((prev) => {\n const updated = [...prev]\n // Find the corresponding module spec\n const index = moduleSpecs.findIndex(\n (spec) => spec.addon === addon && spec.remote === remote && spec.module === module,\n )\n\n if (index >= 0 && index < updated.length) {\n updated[index] = [\n loadedModule,\n {\n isLoaded: true,\n addon,\n remote,\n module,\n minVersion,\n outdated: undefined,\n },\n ]\n }\n return updated\n })\n }\n\n return { modules: results, isLoading }\n}\n"],"names":["useRef","useState","useEffect","module","loadRemote"],"mappings":"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"}