@squiz/resource-browser 3.3.8 → 3.3.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 3.3.10
+
+### Patch Changes
+
+-   8d3c8e0: source alias support
+-   Updated dependencies [8d3c8e0]
+    -   @squiz/resource-browser-ui-lib@1.2.6
+
+## 3.3.9
+
+### Patch Changes
+
+-   53de26d: add ref support and modal state change callback
+-   Updated dependencies [53de26d]
+    -   @squiz/resource-browser-ui-lib@1.2.5
+
 ## 3.3.8
 
 ### Patch Changes

package/lib/Plugin/Plugin.d.ts

@@ -14,5 +14,6 @@ export type PluginRenderType = ResourceBrowserInputProps & {
     inline: boolean;
     inlineType?: InlineType;
     onRetry: () => void;
+    ref?: React.Ref<HTMLButtonElement>;
 };
-export declare const PluginRender: ({ render, inline, inlineType, ...props }: PluginRenderType) => React.JSX.Element;
+export declare const PluginRender: React.ForwardRefExoticComponent<Omit<PluginRenderType, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/Plugin/Plugin.js

@@ -1,18 +1,37 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PluginRender = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserInput");
 const ResourceBrowserInlineButton_1 = require("../ResourceBrowserInlineButton/ResourceBrowserInlineButton");
 const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
-const PluginRender = ({ render, inline, inlineType, ...props }) => {
+exports.PluginRender = (0, react_1.forwardRef)(({ render, inline, inlineType, ...props }, forwardRef) => {
     if (!render)
         return react_1.default.createElement(react_1.default.Fragment, null);
     const requiresAuth = Boolean(props.source?.configuration?.authUrl);
-    const content = inline && inlineType ? react_1.default.createElement(ResourceBrowserInlineButton_1.ResourceBrowserInlineButton, { inlineType: inlineType, ...props }) : react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props });
+    const content = inline && inlineType ? (react_1.default.createElement(ResourceBrowserInlineButton_1.ResourceBrowserInlineButton, { ref: forwardRef, inlineType: inlineType, ...props })) : (react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props }));
     return requiresAuth ? react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source }, content) : content;
-};
-exports.PluginRender = PluginRender;
+});

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.d.ts

@@ -5,4 +5,7 @@ export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
     inlineType: InlineType;
     onRetry: () => void;
 };
-export declare const ResourceBrowserInlineButton: ({ inlineType, modalTitle, allowedTypes, onChange, onRetry, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }: ResourceBrowserInlineButtonProps) => React.JSX.Element;
+export declare const ResourceBrowserInlineButton: React.ForwardRefExoticComponent<ResourceBrowserInputProps & {
+    inlineType: InlineType;
+    onRetry: () => void;
+} & React.RefAttributes<HTMLButtonElement>>;

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.js

@@ -34,7 +34,8 @@ const InlineLoadingErrorState_1 = require("./InlineLoadingErrorState/InlineLoadi
 const ImageInline_1 = require("../Icons/ImageInline");
 const LinkInline_1 = require("../Icons/LinkInline");
 const AdsClickIcon_1 = require("../Icons/AdsClickIcon");
-const ResourceBrowserInlineButton = ({ inlineType, modalTitle, allowedTypes, onChange, onRetry, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
+exports.ResourceBrowserInlineButton = (0, react_1.forwardRef)((props, forwardRef) => {
+    const { inlineType, modalTitle, allowedTypes, onChange, onRetry, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, } = props;
     // If an error happens loading the resource the inline browser just opens without it as if no preselectedResource is provided
     const { data: resource, isLoading: isResourceLoading } = useResource(value || null, source);
     const inlineTypePickerLabels = (0, react_1.useMemo)(() => ({
@@ -48,12 +49,11 @@ const ResourceBrowserInlineButton = ({ inlineType, modalTitle, allowedTypes, onC
         resource: react_1.default.createElement(AdsClickIcon_1.AdsClickIcon, { "aria-label": "change resource" }),
     }), [inlineType]);
     return (react_1.default.createElement("div", { className: "inline-launch-button" },
-        react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
+        react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { ref: forwardRef, overlayTriggerState: {
                 isOpen: isModalOpen,
                 onOpenChange: onModalStateChange,
             }, showLabel: false, label: "", icon: inlineTypePickerIcons[inlineType], isDisabled: isDisabled, scope: "squiz-rb-scope", containerClasses: "inline-launch-button__button" }, (onClose, titleProps) => (react_1.default.createElement(react_1.default.Fragment, null,
             (isLoading || isResourceLoading || error) && (react_1.default.createElement(InlineLoadingErrorState_1.InlineLoadingErrorState, { title: modalTitle, titleAriaProps: titleProps, onClose: onClose, onRetry: onRetry, isLoading: isLoading || isResourceLoading, error: error })),
             !(isLoading || isResourceLoading) && !error && (react_1.default.createElement(MainContainer_1.default, { selectedSource: source, sources: sources, preselectedResource: resource, plugin: plugin, pluginMode: pluginMode, searchEnabled: searchEnabled, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onSourceSelect: setSource, onClose: onClose, onChange: onChange }))))),
         react_1.default.createElement("div", { className: "inline-launch-button__label" }, inlineTypePickerLabels[inlineType])));
-};
-exports.ResourceBrowserInlineButton = ResourceBrowserInlineButton;
+});

package/lib/index.d.ts

@@ -16,6 +16,7 @@ export type ResourceBrowserProps = {
     inline?: boolean;
     inlineType?: InlineType;
     onChange(resource: ResourceBrowserResource | null): void;
+    onModalStateChange?(isOpen: boolean): void;
     onClear?(): void;
 };
-export declare const ResourceBrowser: (props: ResourceBrowserProps) => React.JSX.Element;
+export declare const ResourceBrowser: React.ForwardRefExoticComponent<ResourceBrowserProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/index.js

@@ -47,8 +47,8 @@ exports.SourceDropdown = SourceDropdown_1.default;
 const SourceDropdownContainer_1 = __importDefault(require("./SourceDropdownContainer/SourceDropdownContainer"));
 exports.SourceDropdownContainer = SourceDropdownContainer_1.default;
 __exportStar(require("./types"), exports);
-const ResourceBrowser = (props) => {
-    const { value, inline, inlineType, allowedPlugins } = props;
+exports.ResourceBrowser = react_1.default.forwardRef((props, forwardRef) => {
+    const { value, inline, inlineType, allowedPlugins, onModalStateChange: onModalStateChangeExternalNotification } = props;
     const [error, setError] = (0, react_1.useState)(null);
     const { onRequestSources, searchEnabled, plugins: allPlugins } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
     const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
@@ -64,6 +64,23 @@ const ResourceBrowser = (props) => {
     const [mode, setMode] = (0, react_1.useState)(null);
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = (0, useSources_1.useSources)({ onRequestSources, plugins });
     const plugin = source?.plugin || null;
+    // Find source by its id or alias
+    const findSourceById = (value, sources) => {
+        let newSource = sources.find((source) => source.id === value?.sourceId) || null;
+        if (!newSource) {
+            newSource =
+                sources.find((source) => {
+                    if (!source.aliases)
+                        return false;
+                    return source.aliases.includes(value.sourceId);
+                }) || null;
+        }
+        return newSource;
+    };
+    // Check if the value is for the source
+    const isValueForSource = (value, source) => {
+        return value?.sourceId === source.id || (source.aliases && source.aliases.includes(value?.sourceId));
+    };
     // MainContainer will render a list of sources of one is not provided to it, callback to allow it to set the source once a user selects
     const handleSourceSelect = (0, react_1.useCallback)((source, mode) => {
         setSource(source);
@@ -79,7 +96,7 @@ const ResourceBrowser = (props) => {
         // If there is a provided value try to use its source
         if (value) {
             // Search the sources for it matching against the value.source property
-            newSource = sources.find((source) => source.id === value?.sourceId) || null;
+            newSource = findSourceById(value, sources);
             // If the source is null and we arent loading the sources
             if (newSource === null && !isLoading) {
                 // Set an error as the passed in value's source wasnt returned by onRequestSources
@@ -96,7 +113,8 @@ const ResourceBrowser = (props) => {
     // The modal has some control over it own open/closed state (for WCAG reasons) so keep this in sync with our state
     const handleModalStateChange = (0, react_1.useCallback)((isOpen) => {
         setIsModalOpen(isOpen);
-    }, [setIsModalOpen]);
+        onModalStateChangeExternalNotification?.(isOpen);
+    }, [setIsModalOpen, onModalStateChangeExternalNotification]);
     // If the modal closes and we dont have a value clear the source state so it goes back to the launcher on re-open
     (0, react_1.useEffect)(() => {
         // If modal is closed and we dont have a value
@@ -109,8 +127,7 @@ const ResourceBrowser = (props) => {
             setMode(null);
             // If there is a value passed in, reset the source so the preselected asset preview renders correctly
             if (value && value.sourceId !== source?.id) {
-                const source = sources.find((source) => source.id === value?.sourceId) || null;
-                setSource(source);
+                setSource(findSourceById(value, sources));
             }
         }
     }, [sources, isModalOpen]);
@@ -120,7 +137,7 @@ const ResourceBrowser = (props) => {
     }, [reloadSources]);
     // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", type: null, render: plugin === null, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, isOtherSourceValue: false, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
+        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", ref: forwardRef, type: null, render: plugin === null, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, isOtherSourceValue: false, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
                 return {
                     data: null,
                     error: null,
@@ -128,7 +145,6 @@ const ResourceBrowser = (props) => {
                 };
             }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }),
         plugins.map((thisPlugin) => {
-            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, type: thisPlugin.type, render: thisPlugin.type === plugin?.type, inline: !!inline, inlineType: inlineType, ...props, value: value && source ? (value.sourceId === source.id ? value : null) : null, isOtherSourceValue: value && source ? (value.sourceId !== source.id ? true : false) : false, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }));
+            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, ref: forwardRef, type: thisPlugin.type, render: thisPlugin.type === plugin?.type, inline: !!inline, inlineType: inlineType, ...props, value: value && source ? (isValueForSource(value, source) ? value : null) : null, isOtherSourceValue: value && source ? (!isValueForSource(value, source) ? true : false) : false, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }));
         })));
-};
-exports.ResourceBrowser = ResourceBrowser;
+});

package/lib/types.d.ts

@@ -13,6 +13,7 @@ export interface ResourceBrowserSource {
     name?: string;
     id: string;
     type: ResourceBrowserPluginType;
+    aliases?: string[];
 }
 export interface ResourceBrowserSourceWithPlugin extends ResourceBrowserSource {
     plugin: ResourceBrowserPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.3.8",
+    "version": "3.3.10",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -28,7 +28,7 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "^1.67.5",
-        "@squiz/resource-browser-ui-lib": "^1.2.4",
+        "@squiz/resource-browser-ui-lib": "^1.2.6",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/src/Plugin/Plugin.spec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { render, waitFor } from '@testing-library/react';
 
 import { PluginRender } from './Plugin';
@@ -8,7 +8,9 @@ import * as RBInlineButton from '../ResourceBrowserInlineButton/ResourceBrowserI
 import * as AuthContext from '../ResourceBrowserContext/AuthProvider';
 
 jest.spyOn(RBI, 'ResourceBrowserInput');
-jest.spyOn(RBInlineButton, 'ResourceBrowserInlineButton');
+jest.mock('../ResourceBrowserInlineButton/ResourceBrowserInlineButton', () => ({
+    ResourceBrowserInlineButton: jest.fn(() => <div data-testid="mocked-inline-button" />),
+}));
 jest.spyOn(AuthContext, 'AuthProvider');
 
 const baseProps = {

package/src/Plugin/Plugin.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { ResourceBrowserInput, ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
 import { ResourceBrowserInlineButton } from '../ResourceBrowserInlineButton/ResourceBrowserInlineButton';
 import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
@@ -17,14 +17,19 @@ export type PluginRenderType = ResourceBrowserInputProps & {
     inline: boolean;
     inlineType?: InlineType;
     onRetry: () => void;
+    ref?: React.Ref<HTMLButtonElement>;
 };
-export const PluginRender = ({ render, inline, inlineType, ...props }: PluginRenderType) => {
+export const PluginRender = forwardRef<HTMLButtonElement, PluginRenderType>(({ render, inline, inlineType, ...props }, forwardRef) => {
     if (!render) return <></>;
 
     const requiresAuth = Boolean((props.source as ResourceBrowserSourceWithConfig)?.configuration?.authUrl);
 
     const content =
-        inline && inlineType ? <ResourceBrowserInlineButton inlineType={inlineType} {...props} /> : <ResourceBrowserInput {...props} />;
+        inline && inlineType ? (
+            <ResourceBrowserInlineButton ref={forwardRef} inlineType={inlineType} {...props} />
+        ) : (
+            <ResourceBrowserInput {...props} />
+        );
 
     return requiresAuth ? <AuthProvider authConfig={props.source}>{content}</AuthProvider> : content;
-};
+});

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import MainContainer from '../MainContainer/MainContainer';
 import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
 import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
@@ -13,26 +13,28 @@ export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
     onRetry: () => void;
 };
 
-export const ResourceBrowserInlineButton = ({
-    inlineType,
-    modalTitle,
-    allowedTypes,
-    onChange,
-    onRetry,
-    value,
-    useResource,
-    isDisabled,
-    plugin,
-    pluginMode,
-    searchEnabled,
-    source,
-    sources,
-    isLoading,
-    error,
-    setSource,
-    isModalOpen,
-    onModalStateChange,
-}: ResourceBrowserInlineButtonProps) => {
+export const ResourceBrowserInlineButton = forwardRef<HTMLButtonElement, ResourceBrowserInlineButtonProps>((props, forwardRef) => {
+    const {
+        inlineType,
+        modalTitle,
+        allowedTypes,
+        onChange,
+        onRetry,
+        value,
+        useResource,
+        isDisabled,
+        plugin,
+        pluginMode,
+        searchEnabled,
+        source,
+        sources,
+        isLoading,
+        error,
+        setSource,
+        isModalOpen,
+        onModalStateChange,
+    } = props;
+
     // If an error happens loading the resource the inline browser just opens without it as if no preselectedResource is provided
     const { data: resource, isLoading: isResourceLoading } = useResource(value || null, source);
 
@@ -56,6 +58,7 @@ export const ResourceBrowserInlineButton = ({
     return (
         <div className="inline-launch-button">
             <ModalTrigger
+                ref={forwardRef}
                 overlayTriggerState={{
                     isOpen: isModalOpen,
                     onOpenChange: onModalStateChange,
@@ -101,4 +104,4 @@ export const ResourceBrowserInlineButton = ({
             <div className="inline-launch-button__label">{inlineTypePickerLabels[inlineType]}</div>
         </div>
     );
-};
+});

package/src/__mocks__/sample-sources.json

@@ -3,7 +3,8 @@
         "name": "Bynder #1",
         "id": "c90feac1-55f3-4e1f-9b56-c22829e3f510",
         "type": "dam",
-        "group": "DAM"
+        "group": "DAM",
+        "aliases": ["bynder-789"]
     },
     {
         "name": "Bynder #2",

package/src/index.spec.tsx

@@ -141,6 +141,24 @@ describe('Resource browser input', () => {
         });
     });
 
+    it('If an aliased resource is provided will default to its true Source and Plugin to match', async () => {
+        const source = mockSource({ type: 'dam', aliases: ['alias-source-id'] });
+        mockRequestSources.mockResolvedValueOnce([source, mockSource({ type: 'matrix' })]);
+        mockResolveResource.mockResolvedValueOnce(mockResource({ source }));
+        renderComponent({ value: { sourceId: 'alias-source-id', resourceId: '100' } });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: calculateExpectedSource(source),
+                    plugin: mockDamPlugin,
+                    pluginMode: null,
+                }),
+                {},
+            );
+        });
+    });
+
     it('If a resource is provided but its Source cannot be found it will error', async () => {
         const source = mockSource({ type: 'dam' });
         mockRequestSources.mockResolvedValueOnce([source, mockSource({ type: 'matrix' })]);
@@ -510,6 +528,73 @@ describe('Resource browser input', () => {
         });
     });
 
+    it('onModalStateChange called with false will reset the Source and Plugin to the aliases true source if the value uses an alias', async () => {
+        const originalSource = mockSource({
+            id: 'original-source-id',
+            name: 'Original Source',
+            type: 'dam',
+            aliases: ['alias-source-id'],
+        });
+        const aliasSourceId = 'alias-source-id';
+        const valueWithAlias = {
+            sourceId: aliasSourceId,
+            resourceId: '123456',
+        };
+
+        const sourcesInput = [originalSource, mockSource({ id: '2' })];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ value: valueWithAlias });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    value: valueWithAlias,
+                    sources: calculatedSources,
+                    source: calculatedSources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        const { onModalStateChange, setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        // Invoke open and close the modal
+        act(() => {
+            onModalStateChange(true);
+        });
+
+        // Change the source
+        act(() => {
+            setSource(calculatedSources[1]);
+        });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: calculatedSources[1],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        act(() => {
+            onModalStateChange(false);
+        });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    source: calculatedSources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+    });
+
     it('onModalStateChange called with false will reset the Mode', async () => {
         const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
         mockRequestSources.mockResolvedValueOnce(sourcesInput);
@@ -568,12 +653,47 @@ describe('Resource browser input', () => {
         });
     });
 
+    it('onModalStateChange calls onModalStateChangeExternalNotification when provided', async () => {
+        const mockOnModalStateChange = jest.fn();
+        const sourcesInput = [mockSource({ type: 'dam' })];
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ onModalStateChange: mockOnModalStateChange });
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalled();
+        });
+
+        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+
+        // Test opening modal
+        act(() => {
+            onModalStateChange(true);
+        });
+
+        await waitFor(() => {
+            expect(mockOnModalStateChange).toHaveBeenCalledWith(true);
+        });
+
+        // Test closing modal
+        act(() => {
+            onModalStateChange(false);
+        });
+
+        await waitFor(() => {
+            expect(mockOnModalStateChange).toHaveBeenCalledWith(false);
+        });
+
+        expect(mockOnModalStateChange).toHaveBeenCalledTimes(2);
+    });
+
     describe('Resource browser plugin', () => {
+        let PluginRenderSpy: jest.SpyInstance;
         beforeEach(() => {
-            jest.spyOn(Plugin, 'PluginRender');
+            //@ts-ignore
+            PluginRenderSpy = jest.spyOn(Plugin.PluginRender, 'render');
         });
         afterEach(() => {
-            (Plugin.PluginRender as jest.Mock).mockRestore();
+            PluginRenderSpy.mockRestore();
         });
 
         it('Will default to a non plugin based render for initial load and selection of first source', async () => {
@@ -583,29 +703,29 @@ describe('Resource browser input', () => {
 
             // Will render a default with no selected source
             await waitFor(() => {
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: true,
                         type: null,
                         plugin: null,
                     }),
-                    {},
+                    null,
                 );
 
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: false,
                         type: 'dam',
                     }),
-                    {},
+                    null,
                 );
 
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: false,
                         type: 'matrix',
                     }),
-                    {},
+                    null,
                 );
             });
         });
@@ -619,28 +739,28 @@ describe('Resource browser input', () => {
 
             // Will render a default with no selected source
             await waitFor(() => {
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: false,
                         type: null,
                     }),
-                    {},
+                    null,
                 );
 
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: true,
                         type: 'dam',
                     }),
-                    {},
+                    null,
                 );
 
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: false,
                         type: 'matrix',
                     }),
-                    {},
+                    null,
                 );
             });
 
@@ -672,28 +792,28 @@ describe('Resource browser input', () => {
 
             // Will render a default with no selected source
             await waitFor(() => {
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: true,
                         type: null,
                     }),
-                    {},
+                    null,
                 );
 
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: true,
                         type: 'dam',
                     }),
-                    {},
+                    null,
                 );
 
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         render: false,
                         type: 'matrix',
                     }),
-                    {},
+                    null,
                 );
             });
         });
@@ -724,20 +844,20 @@ describe('Resource browser input', () => {
                 );
             });
 
-            (Plugin.PluginRender as jest.Mock).mockClear();
+            (PluginRenderSpy as unknown as jest.Mock).mockClear();
 
             act(() => {
                 setSource({ ...matrixSource, plugin: pluginB });
             });
 
             await waitFor(() => {
-                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
                     expect.objectContaining({
                         plugin: pluginB,
                     }),
                     expect.any(Object),
                 );
-                expect(Plugin.PluginRender).not.toHaveBeenCalledWith(
+                expect(PluginRenderSpy).not.toHaveBeenCalledWith(
                     expect.objectContaining({
                         plugin: pluginA,
                     }),
@@ -745,5 +865,49 @@ describe('Resource browser input', () => {
                 );
             });
         });
+
+        it('When resource browser is called with a value containing an alias source, Plugin is called with the original source not the alias value', async () => {
+            const originalSource = mockSource({
+                id: 'original-source-id',
+                name: 'Original Source',
+                type: 'dam',
+                aliases: ['alias-source-id'],
+            });
+            const aliasSourceId = 'alias-source-id';
+
+            mockRequestSources.mockResolvedValueOnce([originalSource]);
+
+            // Create a value that uses the alias source ID
+            const valueWithAlias = {
+                sourceId: aliasSourceId,
+                resourceId: '123456',
+            };
+
+            renderComponent({ value: valueWithAlias });
+
+            await waitFor(() => {
+                expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        value: valueWithAlias,
+                        source: calculateExpectedSource(originalSource), // Should be the original source, not alias
+                        plugin: mockDamPlugin,
+                    }),
+                    {},
+                );
+            });
+
+            // Verify that the PluginRender is called with the original source
+            await waitFor(() => {
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: true,
+                        type: 'dam',
+                        source: calculateExpectedSource(originalSource), // Should be the original source
+                        isOtherSourceValue: false,
+                    }),
+                    null,
+                );
+            });
+        });
     });
 });

package/src/index.stories.tsx

@@ -103,6 +103,15 @@ RestrictedSource.args = {
     searchEnabled: true,
 };
 
+export const SourceByAlias = Template.bind({});
+SourceByAlias.args = {
+    ...Primary.args,
+    value: {
+        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+        sourceId: 'bynder-789',
+    },
+};
+
 export const SearchEnabled = Template.bind({});
 SearchEnabled.args = {
     ...Primary.args,

package/src/index.tsx

@@ -38,11 +38,12 @@ export type ResourceBrowserProps = {
     inline?: boolean; // Will render open button only, no input / showing of existing selection
     inlineType?: InlineType; // Type of inline button to show
     onChange(resource: ResourceBrowserResource | null): void;
+    onModalStateChange?(isOpen: boolean): void;
     onClear?(): void;
 };
 
-export const ResourceBrowser = (props: ResourceBrowserProps) => {
-    const { value, inline, inlineType, allowedPlugins } = props;
+export const ResourceBrowser = React.forwardRef<HTMLButtonElement, ResourceBrowserProps>((props, forwardRef) => {
+    const { value, inline, inlineType, allowedPlugins, onModalStateChange: onModalStateChangeExternalNotification } = props;
     const [error, setError] = useState<Error | null>(null);
     const { onRequestSources, searchEnabled, plugins: allPlugins } = useContext(ResourceBrowserContext);
 
@@ -59,6 +60,24 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = useSources({ onRequestSources, plugins });
     const plugin = source?.plugin || null;
 
+    // Find source by its id or alias
+    const findSourceById = (value: ResourceBrowserUnresolvedResource, sources: ResourceBrowserSourceWithPlugin[]) => {
+        let newSource = sources.find((source) => source.id === value?.sourceId) || null;
+        if (!newSource) {
+            newSource =
+                sources.find((source) => {
+                    if (!source.aliases) return false;
+                    return source.aliases.includes(value.sourceId);
+                }) || null;
+        }
+        return newSource;
+    };
+
+    // Check if the value is for the source
+    const isValueForSource = (value: ResourceBrowserUnresolvedResource, source: ResourceBrowserSourceWithPlugin) => {
+        return value?.sourceId === source.id || (source.aliases && source.aliases.includes(value?.sourceId));
+    };
+
     // MainContainer will render a list of sources of one is not provided to it, callback to allow it to set the source once a user selects
     const handleSourceSelect = useCallback(
         (source: ResourceBrowserSourceWithPlugin, mode?: PluginLaunchMode) => {
@@ -79,7 +98,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         // If there is a provided value try to use its source
         if (value) {
             // Search the sources for it matching against the value.source property
-            newSource = sources.find((source) => source.id === value?.sourceId) || null;
+            newSource = findSourceById(value, sources);
+
             // If the source is null and we arent loading the sources
             if (newSource === null && !isLoading) {
                 // Set an error as the passed in value's source wasnt returned by onRequestSources
@@ -98,8 +118,9 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
     const handleModalStateChange = useCallback(
         (isOpen: boolean) => {
             setIsModalOpen(isOpen);
+            onModalStateChangeExternalNotification?.(isOpen);
         },
-        [setIsModalOpen],
+        [setIsModalOpen, onModalStateChangeExternalNotification],
     );
 
     // If the modal closes and we dont have a value clear the source state so it goes back to the launcher on re-open
@@ -114,8 +135,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
 
             // If there is a value passed in, reset the source so the preselected asset preview renders correctly
             if (value && value.sourceId !== source?.id) {
-                const source = sources.find((source) => source.id === value?.sourceId) || null;
-                setSource(source);
+                setSource(findSourceById(value, sources));
             }
         }
     }, [sources, isModalOpen]);
@@ -130,6 +150,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         <div className="squiz-rb-scope">
             <PluginRender
                 key="default"
+                ref={forwardRef} // This is passed to every plugin but only actually render on one at a time
                 type={null}
                 render={plugin === null}
                 inline={!!inline}
@@ -159,13 +180,14 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                 return (
                     <PluginRender
                         key={thisPlugin.type}
+                        ref={forwardRef} // This is passed to every plugin but only actually render on one at a time
                         type={thisPlugin.type}
                         render={thisPlugin.type === plugin?.type}
                         inline={!!inline}
                         inlineType={inlineType}
                         {...props}
-                        value={value && source ? (value.sourceId === source.id ? value : null) : null} // Don't pass value if value isn't for selected source
-                        isOtherSourceValue={value && source ? (value.sourceId !== source.id ? true : false) : false} // Block render of existing asset if not from this source
+                        value={value && source ? (isValueForSource(value, source) ? value : null) : null} // Don't pass value if value isn't for selected source
+                        isOtherSourceValue={value && source ? (!isValueForSource(value, source) ? true : false) : false} // Block render of existing asset if not from this source
                         source={source}
                         sources={sources}
                         setSource={handleSourceSelect}
@@ -183,4 +205,4 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
             })}
         </div>
     );
-};
+});

package/src/types.ts

@@ -19,6 +19,9 @@ export interface ResourceBrowserSource {
     id: string;
     // Source type e.g. Matrix, DAM etc determines what plugin will be used for resource selection
     type: ResourceBrowserPluginType;
+
+    //alias' for the source to identify plugin to use for the source
+    aliases?: string[];
 }
 
 export interface ResourceBrowserSourceWithPlugin extends ResourceBrowserSource {