@squiz/resource-browser 3.2.0 → 3.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 3.2.2
+
+### Patch Changes
+
+-   168c317: Pass all preselected info to resolvers, dam resolve variant
+-   168c317: Added optional extra fields to pass dam variant information
+
+## 3.2.1
+
+### Patch Changes
+
+-   a64f8ae: Derive plugin synchronously from source to avoid stale state
+
 ## 3.2.0
 
 ### Minor Changes

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.js

@@ -12,7 +12,7 @@ const ImageInline_1 = require("../Icons/ImageInline");
 const LinkInline_1 = require("../Icons/LinkInline");
 const ResourceBrowserInlineButton = ({ inlineType, modalTitle, allowedTypes, onChange, onRetry, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
     // 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?.resourceId || null, source);
+    const { data: resource, isLoading: isResourceLoading } = useResource(value || null, source);
     const isImagePicker = inlineType === 'image';
     return (react_1.default.createElement("div", { className: "inline-launch-button" },
         react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {

package/lib/ResourceBrowserInput/ResourceBrowserInput.d.ts

@@ -5,7 +5,7 @@ export type ResourceBrowserInputProps = {
     allowedTypes?: string[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
-    useResource(referenceId: string | null, source: ResourceBrowserSource | null): useResolveResourceResponse;
+    useResource(reference: ResourceBrowserUnresolvedResource | null, source: ResourceBrowserSource | null): useResolveResourceResponse;
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
     plugin: ResourceBrowserPlugin | null;

package/lib/ResourceBrowserInput/ResourceBrowserInput.js

@@ -8,7 +8,7 @@ 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, isOtherSourceValue, error, setSource, isModalOpen, onModalStateChange, }) => {
-    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value || 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, 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 }))));

package/lib/index.css

@@ -6127,20 +6127,22 @@
 }
 .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;
+  min-height: 150px;
+  margin: 1.25rem 0;
   background-color: #ededed;
 }
+.squiz-rb-scope .image-info__divider:not(.squiz-rb-plugin *) {
+  width: 100%;
+  padding: 0 1.25rem;
+}
 .squiz-rb-scope .checkered-bg:not(.squiz-rb-plugin *) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -6186,10 +6188,13 @@
   display: flex;
   flex-direction: column;
   margin: 1rem 0;
+  width: 100%;
+  padding: 0 1.25rem;
 }
 .squiz-rb-scope .image-info__details-item:not(.squiz-rb-plugin *) {
   display: flex;
   margin-bottom: 0.5rem;
+  padding-left: 0.25rem;
 }
 .squiz-rb-scope .image-info__details-label:not(.squiz-rb-plugin *) {
   color: #707070;
@@ -6201,7 +6206,8 @@
   color: #3d3d3d;
 }
 .squiz-rb-scope .image-variant__list:not(.squiz-rb-plugin *) {
-  width: 280px;
+  width: 100%;
+  padding: 0 1.25rem;
   margin-bottom: 1rem;
 }
 .squiz-rb-scope .image-variant__item:not(.squiz-rb-plugin *) {
@@ -6257,21 +6263,6 @@
 .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 .divider-container:not(.squiz-rb-plugin *) {
-  padding: 0 1.25rem;
-  width: 100%;
-}
 .squiz-rb-scope .resource-picker:not(.squiz-rb-plugin *) {
   display: grid;
   grid-template-columns: 24px 1fr;

package/lib/index.js

@@ -55,7 +55,7 @@ const ResourceBrowser = (props) => {
     const [source, setSource] = (0, react_1.useState)(null);
     const [mode, setMode] = (0, react_1.useState)(null);
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = (0, useSources_1.useSources)({ onRequestSources, plugins });
-    const [plugin, setPlugin] = (0, react_1.useState)(null);
+    const plugin = source?.plugin || null;
     // 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);
@@ -82,16 +82,6 @@ const ResourceBrowser = (props) => {
         setSource(source);
         setMode(null); // Passed in resource will always use the default mode
     }, [value, isLoading, sources, setSource, setError]);
-    // When a source is selected update our plugin reference to match (legacy support)
-    // the plugin is now attached to the source directly when fetched from the context so use that instead when possible
-    (0, react_1.useEffect)(() => {
-        if (source?.plugin) {
-            setPlugin(source.plugin);
-        }
-        else {
-            setPlugin(null);
-        }
-    }, [plugins, source]);
     // 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);

package/lib/types.d.ts

@@ -31,6 +31,7 @@ export type PluginLaunchMode = {
 export type ResourceBrowserUnresolvedResource = {
     sourceId: string;
     resourceId: string;
+    [k: string]: unknown;
 };
 export type ResourceBrowserResource = {
     id: string;
@@ -93,6 +94,6 @@ export interface ResourceBrowserPlugin {
     /** Function to provde the the summary information to show what resource is currently selected */
     renderSelectedResource: (resource: ResourceBrowserResource) => Promise<ResourceBrowserSelectedState>;
     /** Function to resolve a resource and source id into a fully resolved output reference */
-    useResolveResource: (resourceId: string | null, source: ResourceBrowserSource | null) => useResolveResourceResponse;
+    useResolveResource: (resource: ResourceBrowserUnresolvedResource | null, source: ResourceBrowserSource | null) => useResolveResourceResponse;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.2.0",
+    "version": "3.2.2",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.tsx

@@ -33,7 +33,7 @@ export const ResourceBrowserInlineButton = ({
     onModalStateChange,
 }: ResourceBrowserInlineButtonProps) => {
     // 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?.resourceId || null, source);
+    const { data: resource, isLoading: isResourceLoading } = useResource(value || null, source);
 
     const isImagePicker = inlineType === 'image';
 

package/src/ResourceBrowserInput/ResourceBrowserInput.tsx

@@ -16,7 +16,7 @@ export type ResourceBrowserInputProps = {
     allowedTypes?: string[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
-    useResource(referenceId: string | null, source: ResourceBrowserSource | null): useResolveResourceResponse;
+    useResource(reference: ResourceBrowserUnresolvedResource | null, source: ResourceBrowserSource | null): useResolveResourceResponse;
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
     plugin: ResourceBrowserPlugin | null;
@@ -52,7 +52,7 @@ export const ResourceBrowserInput = ({
     isModalOpen,
     onModalStateChange,
 }: ResourceBrowserInputProps) => {
-    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value || null, source);
 
     const defaultOnClear = () => onChange(null);
     const onClearFunction = onClear ?? defaultOnClear;

package/src/index.spec.tsx

@@ -222,7 +222,7 @@ describe('Resource browser input', () => {
         });
 
         await waitFor(() => {
-            expect(mockUseResolveResource).toHaveBeenCalledWith(resource.resourceId, calculateExpectedSource(source));
+            expect(mockUseResolveResource).toHaveBeenCalledWith(resource, calculateExpectedSource(source));
         });
     });
 
@@ -666,5 +666,53 @@ describe('Resource browser input', () => {
                 );
             });
         });
+
+        it('switching source updates plugin and does not use the old plugin', async () => {
+            const damSource = mockSource({ type: 'dam', id: '1' });
+            const matrixSource = mockSource({ type: 'matrix', id: '2' });
+
+            const pluginA = { ...mockDamPlugin, type: 'dam' };
+            const pluginB = { ...mockDamPlugin, type: 'matrix' };
+
+            mockRequestSources.mockResolvedValueOnce([damSource, matrixSource]);
+
+            renderComponent();
+
+            const { setSource } = (RBI.ResourceBrowserInput as jest.Mock).mock.calls[0][0];
+
+            act(() => {
+                setSource({ ...damSource, plugin: pluginA });
+            });
+
+            await waitFor(() => {
+                expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        plugin: pluginA,
+                    }),
+                    expect.any(Object),
+                );
+            });
+
+            (Plugin.PluginRender as jest.Mock).mockClear();
+
+            act(() => {
+                setSource({ ...matrixSource, plugin: pluginB });
+            });
+
+            await waitFor(() => {
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        plugin: pluginB,
+                    }),
+                    expect.any(Object),
+                );
+                expect(Plugin.PluginRender).not.toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        plugin: pluginA,
+                    }),
+                    expect.any(Object),
+                );
+            });
+        });
     });
 });

package/src/index.tsx

@@ -6,7 +6,6 @@ import {
     PluginLaunchMode,
     ResourceBrowserUnresolvedResource,
     ResourceBrowserResource,
-    ResourceBrowserPlugin,
     ResourceBrowserSourceWithPlugin,
 } from './types';
 import { useSources } from './Hooks/useSources';
@@ -49,7 +48,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
     const [source, setSource] = useState<ResourceBrowserSourceWithPlugin | null>(null);
     const [mode, setMode] = useState<PluginLaunchMode | null>(null);
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = useSources({ onRequestSources, plugins });
-    const [plugin, setPlugin] = useState<ResourceBrowserPlugin | null>(null);
+    const plugin = source?.plugin || null;
 
     // 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(
@@ -83,16 +82,6 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         setMode(null); // Passed in resource will always use the default mode
     }, [value, isLoading, sources, setSource, setError]);
 
-    // When a source is selected update our plugin reference to match (legacy support)
-    // the plugin is now attached to the source directly when fetched from the context so use that instead when possible
-    useEffect(() => {
-        if (source?.plugin) {
-            setPlugin(source.plugin);
-        } else {
-            setPlugin(null);
-        }
-    }, [plugins, source]);
-
     // The modal has some control over it own open/closed state (for WCAG reasons) so keep this in sync with our state
     const handleModalStateChange = useCallback(
         (isOpen: boolean) => {

package/src/types.ts

@@ -43,6 +43,7 @@ export type PluginLaunchMode = {
 export type ResourceBrowserUnresolvedResource = {
     sourceId: string;
     resourceId: string;
+    [k: string]: unknown; // Additional props as needed by the plugin type to resolve the asset
 };
 
 export type ResourceBrowserResource = {
@@ -120,5 +121,8 @@ export interface ResourceBrowserPlugin {
     renderSelectedResource: (resource: ResourceBrowserResource) => Promise<ResourceBrowserSelectedState>;
 
     /** Function to resolve a resource and source id into a fully resolved output reference */
-    useResolveResource: (resourceId: string | null, source: ResourceBrowserSource | null) => useResolveResourceResponse;
+    useResolveResource: (
+        resource: ResourceBrowserUnresolvedResource | null,
+        source: ResourceBrowserSource | null,
+    ) => useResolveResourceResponse;
 }