@squiz/resource-browser 3.1.0-rc.4 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 3.1.1
+
+### Patch Changes
+
+-   1ce2636: dont render select preview if switched to different source
+
+## 3.1.0
+
+### Patch Changes
+
+-   a89fb2d: Updated the peer dependencies and dependencies so that we use the deps published by Matrix'
+-   a89fb2d: Updated title for modal to be sentence case when displayed
+-   a89fb2d: Changed background colour of hovered source on source selector
+-   a89fb2d: Updated modal to use sds button, removed scroll bar from search panel
+-   6503eba: clean selected mode on modal close
+-   a89fb2d: Version control via changesets added
+-   Updated dependencies [70ed1a8]
+-   Updated dependencies [9bcc4d2]
+-   Updated dependencies [a89fb2d]
+-   Updated dependencies [a065ca7]
+-   Updated dependencies [7a6a6fc]
+-   Updated dependencies [a89fb2d]
+    -   @squiz/resource-browser-ui-lib@1.0.0
+
 ## 3.1.0-rc.4
 
 ### Patch Changes

package/lib/ResourceBrowserInput/ResourceBrowserInput.d.ts

@@ -1,15 +1,11 @@
 import React from 'react';
-import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowserSourceWithPlugin, PluginLaunchMode } from '../types';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowserSourceWithPlugin, PluginLaunchMode, useResolveResourceResponse } from '../types';
 export type ResourceBrowserInputProps = {
     modalTitle: string;
     allowedTypes?: string[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
-    useResource(referenceId: string | null, source: ResourceBrowserSource | null): {
-        data: ResourceBrowserResource | null;
-        error: Error | null;
-        isLoading: boolean;
-    };
+    useResource(referenceId: string | null, source: ResourceBrowserSource | null): useResolveResourceResponse;
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
     plugin: ResourceBrowserPlugin | null;
@@ -18,9 +14,10 @@ export type ResourceBrowserInputProps = {
     source: ResourceBrowserSource | null;
     sources: ResourceBrowserSourceWithPlugin[];
     isLoading: boolean;
+    isOtherSourceValue: boolean;
     error: Error | null;
     setSource(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
     isModalOpen: boolean;
     onModalStateChange(isOpen: boolean): void;
 };
-export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }: ResourceBrowserInputProps) => React.JSX.Element;
+export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, pluginMode, searchEnabled, source, sources, isLoading, isOtherSourceValue, error, setSource, isModalOpen, onModalStateChange, }: ResourceBrowserInputProps) => React.JSX.Element;

package/lib/ResourceBrowserInput/ResourceBrowserInput.js

@@ -7,10 +7,10 @@ exports.ResourceBrowserInput = void 0;
 const react_1 = __importDefault(require("react"));
 const MainContainer_1 = __importDefault(require("../MainContainer/MainContainer"));
 const ResourcePicker_1 = require("../ResourcePicker/ResourcePicker");
-const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
+const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, pluginMode, searchEnabled, source, sources, isLoading, isOtherSourceValue, error, setSource, isModalOpen, onModalStateChange, }) => {
     const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
     const defaultOnClear = () => onChange(null);
     const onClearFunction = onClear ?? defaultOnClear;
-    return (react_1.default.createElement(ResourcePicker_1.ResourcePicker, { resource: resource, plugin: plugin, allowedTypes: allowedTypes, error: resourceError || error, isLoading: isResourceLoading || isLoading, isDisabled: isDisabled, onClear: onClearFunction, isModalOpen: isModalOpen, onModalStateChange: onModalStateChange }, (onClose, titleProps) => (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 }))));
+    return (react_1.default.createElement(ResourcePicker_1.ResourcePicker, { resource: resource, plugin: plugin, allowedTypes: allowedTypes, error: resourceError || error, isLoading: isResourceLoading || isLoading, isOtherSourceValue: isOtherSourceValue, isDisabled: isDisabled, onClear: onClearFunction, isModalOpen: isModalOpen, onModalStateChange: onModalStateChange }, (onClose, titleProps) => (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 }))));
 };
 exports.ResourceBrowserInput = ResourceBrowserInput;

package/lib/ResourcePicker/ResourcePicker.d.ts

@@ -7,10 +7,11 @@ export type ResourcePickerProps = {
     allowedTypes: string[] | undefined;
     error: Error | null;
     isLoading: boolean;
+    isOtherSourceValue: boolean;
     isDisabled?: boolean;
     children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
     onClear: () => void;
     isModalOpen: boolean;
     onModalStateChange(isOpen: boolean): void;
 };
-export declare const ResourcePicker: ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }: ResourcePickerProps) => React.JSX.Element;
+export declare const ResourcePicker: ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isOtherSourceValue, isDisabled, children, onClear, isModalOpen, onModalStateChange, }: ResourcePickerProps) => React.JSX.Element;

package/lib/ResourcePicker/ResourcePicker.js

@@ -14,16 +14,26 @@ const Loading_1 = require("./States/Loading");
 const Selected_1 = require("./States/Selected");
 const useSelectedState_1 = require("../Hooks/useSelectedState");
 const clsx_1 = __importDefault(require("clsx"));
-const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
+const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isOtherSourceValue, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
     const { data: selectedState, error, isLoading } = (0, useSelectedState_1.useSelectedState)({ resource, plugin });
     const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
     const isEmpty = resource === null && !isExternalLoading && !externalError;
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'resource-picker--disabled') },
         isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
-        isEmpty ? (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
+        isOtherSourceValue && (
+        // User is selecting a new image from a different source, render a loading spinner as we can't resolve the value
+        react_1.default.createElement("div", { className: "resource-picker-info" },
+            react_1.default.createElement("div", { className: "resource-picker-info__layout" },
+                react_1.default.createElement(Loading_1.LoadingState, null),
+                react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
+                        isOpen: isModalOpen,
+                        onOpenChange: onModalStateChange,
+                    }, showLabel: false, label: "", isDisabled: true, scope: "squiz-rb-scope" }, children)))),
+        isEmpty && !isOtherSourceValue && (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
                 isOpen: isModalOpen,
                 onOpenChange: onModalStateChange,
-            }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
+            }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)),
+        !isEmpty && !isOtherSourceValue && (react_1.default.createElement("div", { className: "resource-picker-info" },
             react_1.default.createElement("div", { className: "resource-picker-info__layout" },
                 (isExternalLoading || isLoading) && react_1.default.createElement(Loading_1.LoadingState, null),
                 (externalError || error) && (react_1.default.createElement(Error_1.ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),

package/lib/index.css

@@ -5724,7 +5724,7 @@
 }
 .squiz-rb-scope .selection-list__item:not(.squiz-rb-plugin *) {
   display: flex;
-  margin: 0.5rem;
+  margin: 0.25rem 0.5rem;
   border-bottom: 1px solid #e0e0e0;
 }
 .squiz-rb-scope .selection-list__item:last-child:not(.squiz-rb-plugin *) {
@@ -5732,6 +5732,7 @@
 }
 .squiz-rb-scope .selection-list__item-button:not(.squiz-rb-plugin *) {
   width: 100%;
+  margin-bottom: 0.25rem;
   padding: 0.25rem 0.5rem;
   border: none;
   background: none;
@@ -5744,6 +5745,12 @@
 .squiz-rb-scope .selection-list__item-button:focus:not(.squiz-rb-plugin *) {
   background-color: #f5f5f5;
 }
+.squiz-rb-scope .selection-list__item--selected path:not(.squiz-rb-plugin *) {
+  fill: #044985 !important;
+}
+.squiz-rb-scope .selection-list__item--selected .sds-text:not(.squiz-rb-plugin *) {
+  color: #044985 !important;
+}
 .squiz-rb-scope .selection-list__item--selected .selection-list__item-button:not(.squiz-rb-plugin *) {
   background-color: #e6f1fa;
 }
@@ -5963,7 +5970,10 @@
   fill: #4f4f4f;
 }
 .squiz-rb-scope .searchListing:not(.squiz-rb-plugin *) {
-  padding: 1.25rem 1rem;
+  padding: 1.25rem 0 1.25rem 1rem;
+}
+.squiz-rb-scope .searchListing__header:not(.squiz-rb-plugin *) {
+  padding-right: 16px;
 }
 .squiz-rb-scope .searchListing__title-group:not(.squiz-rb-plugin *) {
   padding-bottom: 1rem;
@@ -6106,6 +6116,143 @@
   justify-content: center;
   align-items: center;
 }
+.squiz-rb-scope .image-info:not(.squiz-rb-plugin *) {
+  align-items: center;
+  border-top: 1px solid #e0e0e0;
+  color: #707070;
+  display: flex;
+  flex-direction: column;
+  height: calc(50vh - 60px);
+  overflow-y: auto;
+}
+.squiz-rb-scope .image-info__image-container:not(.squiz-rb-plugin *) {
+  position: relative;
+  width: 250px;
+  height: 150px;
+  margin: 1.25rem;
+  background-color: #ededed;
+}
+.squiz-rb-scope .checkered-bg:not(.squiz-rb-plugin *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-size: 24px 24px;
+  background-position: 0 0, 12px 12px;
+  background-image:
+    linear-gradient(
+      45deg,
+      #e0e0e0 25%,
+      transparent 25%,
+      transparent 75%,
+      #e0e0e0 75%,
+      #e0e0e0),
+    linear-gradient(
+      45deg,
+      #e0e0e0 25%,
+      transparent 25%,
+      transparent 75%,
+      #e0e0e0 75%,
+      #e0e0e0);
+}
+.squiz-rb-scope .image-info__image-container img:not(.squiz-rb-plugin *) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+}
+.squiz-rb-scope .image-info__title:not(.squiz-rb-plugin *) {
+  margin: 1rem 0;
+  color: #3d3d3d;
+}
+.squiz-rb-scope .image-info__details:not(.squiz-rb-plugin *) {
+  margin: 1rem 0;
+  color: #707070;
+}
+.squiz-rb-scope .image-info__details-list:not(.squiz-rb-plugin *) {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+}
+.squiz-rb-scope .image-info__details-item:not(.squiz-rb-plugin *) {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+.squiz-rb-scope .image-info__details-label:not(.squiz-rb-plugin *) {
+  color: #707070;
+  width: 60px;
+  display: flex;
+}
+.squiz-rb-scope .image-info__details-value:not(.squiz-rb-plugin *) {
+  color: #3d3d3d;
+}
+.squiz-rb-scope .image-variant__list:not(.squiz-rb-plugin *) {
+  width: 250px;
+  margin-bottom: 1rem;
+}
+.squiz-rb-scope .image-variant__item:not(.squiz-rb-plugin *) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+.squiz-rb-scope .selection-list__item--selected .image-variant__checkmark:not(.squiz-rb-plugin *) {
+  visibility: visible;
+}
+.squiz-rb-scope .image-variant__checkmark:not(.squiz-rb-plugin *) {
+  visibility: hidden;
+  margin-left: 0.5rem;
+}
+.squiz-rb-scope .image-variant__checkmark path:not(.squiz-rb-plugin *) {
+  fill: #044985;
+}
+.squiz-rb-scope .image-variant__info:not(.squiz-rb-plugin *) {
+  display: flex;
+  align-items: center;
+  color: #3d3d3d;
+}
+.squiz-rb-scope .image-info__footer:not(.squiz-rb-plugin *) {
+  margin-top: auto;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.squiz-rb-scope .image-info__select-button:not(.squiz-rb-plugin *) {
+  margin: 1.25rem;
+}
+.squiz-rb-scope .image-info__select:not(.squiz-rb-plugin *) {
+  padding-top: 1.5rem;
+  padding-bottom: 1rem;
+}
+.squiz-rb-scope .image-info__select svg:not(.squiz-rb-plugin *) {
+  height: 72px;
+  width: 72px;
+}
+.squiz-rb-scope .image-info__select svg path:not(.squiz-rb-plugin *) {
+  fill: #bababa;
+}
+.squiz-rb-scope .image-info__empty-text:not(.squiz-rb-plugin *) {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.squiz-rb-scope .image-info__loading:not(.squiz-rb-plugin *) {
+  margin-top: 80px;
+}
+@media (min-width: 768px) {
+  .squiz-rb-scope .image-info:not(.squiz-rb-plugin *) {
+    height: calc(100vh - 60px);
+  }
+}
+@media (min-width: 1024px) {
+  .squiz-rb-scope .image-info:not(.squiz-rb-plugin *) {
+    height: calc(100vh - 14rem);
+    overflow-y: auto;
+  }
+}
 .squiz-rb-scope .resource-picker:not(.squiz-rb-plugin *) {
   display: grid;
   grid-template-columns: 24px 1fr;

package/lib/index.js

@@ -98,12 +98,19 @@ const ResourceBrowser = (props) => {
     }, [setIsModalOpen]);
     // 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
         if (!isModalOpen && !value && (sources?.length > 1 || searchEnabled)) {
             setSource(null);
             setMode(null);
         }
         else if (!isModalOpen) {
+            // Otherwise reset the RB mode
             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);
+            }
         }
     }, [sources, isModalOpen]);
     // Reset function to allow user manual reload if sources fail in inline usage
@@ -112,7 +119,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", render: plugin === null, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
+        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", 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,
@@ -120,7 +127,7 @@ const ResourceBrowser = (props) => {
                 };
             }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }),
         plugins.map((thisPlugin) => {
-            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, inline: !!inline, inlineType: inlineType, ...props, 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, render: thisPlugin === plugin, 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.1.0-rc.4",
+    "version": "3.1.1",
     "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.2",
-        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.8",
+        "@squiz/resource-browser-ui-lib": "^1.0.0",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/src/Plugin/Plugin.spec.tsx

@@ -21,6 +21,7 @@ describe('Plugin', () => {
         const props = {
             modalTitle: 'Asset picker',
             value: null,
+            isOtherSourceValue: false,
             onChange: jest.fn(),
             onClear: jest.fn(),
             useResource: () => {
@@ -53,6 +54,7 @@ describe('Plugin', () => {
         const props = {
             modalTitle: 'Asset picker',
             value: null,
+            isOtherSourceValue: false,
             onChange: jest.fn(),
             onClear: jest.fn(),
             useResource: () => {

package/src/ResourceBrowserInput/ResourceBrowserInput.spec.tsx

@@ -22,6 +22,7 @@ describe('Resource browser input', () => {
             <ResourceBrowserInput
                 modalTitle="Asset picker"
                 value={null}
+                isOtherSourceValue={false}
                 useResource={mockUseResource}
                 onChange={mockChange}
                 plugin={null}

package/src/ResourceBrowserInput/ResourceBrowserInput.tsx

@@ -8,6 +8,7 @@ import {
     ResourceBrowserResource,
     ResourceBrowserSourceWithPlugin,
     PluginLaunchMode,
+    useResolveResourceResponse,
 } from '../types';
 
 export type ResourceBrowserInputProps = {
@@ -15,14 +16,7 @@ export type ResourceBrowserInputProps = {
     allowedTypes?: string[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
-    useResource(
-        referenceId: string | null,
-        source: ResourceBrowserSource | null,
-    ): {
-        data: ResourceBrowserResource | null;
-        error: Error | null;
-        isLoading: boolean;
-    };
+    useResource(referenceId: string | null, source: ResourceBrowserSource | null): useResolveResourceResponse;
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
     plugin: ResourceBrowserPlugin | null;
@@ -31,6 +25,7 @@ export type ResourceBrowserInputProps = {
     source: ResourceBrowserSource | null;
     sources: ResourceBrowserSourceWithPlugin[];
     isLoading: boolean;
+    isOtherSourceValue: boolean;
     error: Error | null;
     setSource(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
     isModalOpen: boolean;
@@ -51,6 +46,7 @@ export const ResourceBrowserInput = ({
     source,
     sources,
     isLoading,
+    isOtherSourceValue,
     error,
     setSource,
     isModalOpen,
@@ -68,6 +64,7 @@ export const ResourceBrowserInput = ({
             allowedTypes={allowedTypes}
             error={resourceError || error}
             isLoading={isResourceLoading || isLoading}
+            isOtherSourceValue={isOtherSourceValue}
             isDisabled={isDisabled}
             onClear={onClearFunction}
             isModalOpen={isModalOpen}

package/src/ResourcePicker/ResourcePicker.spec.tsx

@@ -10,6 +10,7 @@ const defaultProps: any = {
     allowedTypes: undefined,
     isLoading: false,
     isError: false,
+    isOtherSourceValue: false,
 };
 
 describe('Resource picker', () => {
@@ -36,6 +37,15 @@ describe('Resource picker', () => {
         expect(loadingLabel).toBeInTheDocument();
     });
 
+    it('should render the loading state if isOtherSourceValue is set to true', () => {
+        render(<ResourcePicker {...defaultProps} isLoading={false} isOtherSourceValue={true} />);
+        const pickerLabel = screen.queryByText('Choose image');
+        const loadingLabel = screen.queryByLabelText('Loading selection');
+
+        expect(pickerLabel).not.toBeInTheDocument();
+        expect(loadingLabel).toBeInTheDocument();
+    });
+
     it('should render the error state if set to true', () => {
         const errorMessage = 'Failed to retrieve asset info due to a Component Service API key problem.';
 

package/src/ResourcePicker/ResourcePicker.tsx

@@ -18,6 +18,7 @@ export type ResourcePickerProps = {
     allowedTypes: string[] | undefined;
     error: Error | null;
     isLoading: boolean;
+    isOtherSourceValue: boolean;
     isDisabled?: boolean;
     children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
     onClear: () => void;
@@ -31,6 +32,7 @@ export const ResourcePicker = ({
     allowedTypes,
     error: externalError,
     isLoading: isExternalLoading,
+    isOtherSourceValue,
     isDisabled,
     children,
     onClear,
@@ -49,7 +51,28 @@ export const ResourcePicker = ({
             ) : (
                 <AdsClickRoundedIcon aria-hidden className="w-6 h-6" />
             )}
-            {isEmpty ? (
+            {isOtherSourceValue && (
+                // User is selecting a new image from a different source, render a loading spinner as we can't resolve the value
+                <div className="resource-picker-info">
+                    <div className="resource-picker-info__layout">
+                        <LoadingState />
+                        {/* Need to render the ModalTrigger still as it renders the <Modal/> */}
+                        <ModalTrigger
+                            overlayTriggerState={{
+                                isOpen: isModalOpen,
+                                onOpenChange: onModalStateChange,
+                            }}
+                            showLabel={false}
+                            label=""
+                            isDisabled={true}
+                            scope="squiz-rb-scope"
+                        >
+                            {children}
+                        </ModalTrigger>
+                    </div>
+                </div>
+            )}
+            {isEmpty && !isOtherSourceValue && (
                 <ModalTrigger
                     overlayTriggerState={{
                         isOpen: isModalOpen,
@@ -68,7 +91,8 @@ export const ResourcePicker = ({
                 >
                     {children}
                 </ModalTrigger>
-            ) : (
+            )}
+            {!isEmpty && !isOtherSourceValue && (
                 <div className="resource-picker-info">
                     <div className="resource-picker-info__layout">
                         {(isExternalLoading || isLoading) && <LoadingState />}

package/src/__mocks__/StorybookHelpers.tsx

@@ -93,6 +93,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false, resour
                                     className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm"
                                 >
                                     <div>
+                                        <span>{type} plugin</span>
                                         <dt className="hidden">Asset size</dt>
                                         <dd className="text-gray-600">
                                             {resource.squizImage && (
@@ -147,6 +148,9 @@ export const createPlugins = (callbackWait: number, headerPortal = false, resour
                                 },
                             });
                         }, callbackWait);
+                    } else {
+                        setResource(null);
+                        setIsLoading(false);
                     }
                 }, [unresolvedResource, setResource, setIsLoading]);
 

package/src/index.spec.tsx

@@ -154,7 +154,7 @@ describe('Resource browser input', () => {
         });
     });
 
-    it('onSourceSelect will set mode is provided', async () => {
+    it('onSourceSelect will set mode if provided', async () => {
         const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
         const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
         mockRequestSources.mockResolvedValueOnce(sourcesInput);
@@ -214,6 +214,49 @@ describe('Resource browser input', () => {
         });
     });
 
+    it('Value will only be passed to ResourceBrowserInput if value source matches currently selected source', async () => {
+        const sourcesInput = [mockSource({ id: '1' }), mockSource({ id: '2' })];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        const value = { sourceId: sourcesInput[0].id, resourceId: '123456' };
+
+        renderComponent({ value });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    value,
+                    isOtherSourceValue: false,
+                    source: calculatedSources[0],
+                }),
+                {},
+            );
+        });
+
+        const { onModalStateChange, setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        // Invoke open the modal
+        act(() => {
+            onModalStateChange(true);
+        });
+
+        // Change the source
+        act(() => {
+            setSource(calculatedSources[1]);
+        });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    value: null,
+                    isOtherSourceValue: true,
+                    source: calculatedSources[1],
+                }),
+                {},
+            );
+        });
+    });
+
     it('onModalStateChange called with false will reset the Source and Plugin', async () => {
         const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
         const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
@@ -252,7 +295,13 @@ describe('Resource browser input', () => {
 
         // Invoke modal close callback
         const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
-        onModalStateChange(false);
+        // Invoke open and close the modal
+        act(() => {
+            onModalStateChange(true);
+        });
+        act(() => {
+            onModalStateChange(false);
+        });
 
         // Expect no source or plugin
         await waitFor(() => {
@@ -286,6 +335,9 @@ describe('Resource browser input', () => {
 
         // Invoke modal close callback
         const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        act(() => {
+            onModalStateChange(true);
+        });
         act(() => {
             onModalStateChange(false);
         });
@@ -339,7 +391,13 @@ describe('Resource browser input', () => {
 
         // Invoke modal close callback
         const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
-        onModalStateChange(false);
+        // Invoke open and close the modal
+        act(() => {
+            onModalStateChange(true);
+        });
+        act(() => {
+            onModalStateChange(false);
+        });
 
         // Expect no source or plugin
         await waitFor(() => {
@@ -355,8 +413,8 @@ describe('Resource browser input', () => {
         });
     });
 
-    it('onModalStateChange called with false will not reset the Source and Plugin if a value exists', async () => {
-        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+    it('onModalStateChange called with false will reset the Source and Plugin to the value defaults if a value exists', async () => {
+        const sourcesInput = [mockSource({ id: '1' }), mockSource({ id: '2' })];
         const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
         mockRequestSources.mockResolvedValueOnce(sourcesInput);
 
@@ -373,8 +431,27 @@ describe('Resource browser input', () => {
             );
         });
 
-        // Invoke modal close callback
-        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        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);
         });
@@ -411,6 +488,9 @@ describe('Resource browser input', () => {
 
         // Invoke modal close callback
         const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        act(() => {
+            onModalStateChange(true);
+        });
         act(() => {
             onModalStateChange(false);
         });

package/src/index.tsx

@@ -103,11 +103,19 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
 
     // If the modal closes and we dont have a value clear the source state so it goes back to the launcher on re-open
     useEffect(() => {
+        // If modal is closed and we dont have a value
         if (!isModalOpen && !value && (sources?.length > 1 || searchEnabled)) {
             setSource(null);
             setMode(null);
         } else if (!isModalOpen) {
+            // Otherwise reset the RB mode
             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);
+            }
         }
     }, [sources, isModalOpen]);
 
@@ -129,6 +137,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                 sources={sources}
                 setSource={handleSourceSelect}
                 isLoading={isLoading}
+                isOtherSourceValue={false}
                 error={sourcesError || error}
                 plugin={plugin}
                 pluginMode={mode}
@@ -152,6 +161,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                         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
                         source={source}
                         sources={sources}
                         setSource={handleSourceSelect}