@squiz/resource-browser 3.3.8 → 3.3.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 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);
@@ -96,7 +96,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
@@ -120,7 +121,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 +129,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 ? (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 }));
         })));
-};
-exports.ResourceBrowser = ResourceBrowser;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.3.8",
+    "version": "3.3.9",
     "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.5",
         "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/index.spec.tsx

@@ -568,12 +568,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 +618,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 +654,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 +707,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 +759,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,
                     }),

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);
 
@@ -98,8 +99,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
@@ -130,6 +132,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,6 +162,7 @@ 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}
@@ -183,4 +187,4 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
             })}
         </div>
     );
-};
+});