@squiz/resource-browser 3.3.5 → 3.3.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 3.3.7
+
+### Patch Changes
+
+-   cbf0348: enable the resource picker for MatrixAssetURI in resource browser
+
+## 3.3.6
+
+### Patch Changes
+
+-   bd748ea: Better support for AssetBank resources
+
 ## 3.3.5
 
 ### Patch Changes

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.js

@@ -1,26 +1,59 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResourceBrowserInlineButton = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const MainContainer_1 = __importDefault(require("../MainContainer/MainContainer"));
 const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
 const InlineLoadingErrorState_1 = require("./InlineLoadingErrorState/InlineLoadingErrorState");
 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, }) => {
     // 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 isImagePicker = inlineType === 'image';
+    const inlineTypePickerLabels = (0, react_1.useMemo)(() => ({
+        image: 'Change image',
+        link: 'Change link',
+        resource: 'Change resource',
+    }), [inlineType]);
+    const inlineTypePickerIcons = (0, react_1.useMemo)(() => ({
+        image: react_1.default.createElement(ImageInline_1.ImageInline, { "aria-label": "change image" }),
+        link: react_1.default.createElement(LinkInline_1.LinkInline, { "aria-label": "change link" }),
+        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: {
                 isOpen: isModalOpen,
                 onOpenChange: onModalStateChange,
-            }, showLabel: false, label: "", icon: isImagePicker ? react_1.default.createElement(ImageInline_1.ImageInline, { "aria-label": "change image" }) : react_1.default.createElement(LinkInline_1.LinkInline, { "aria-label": "change link" }), isDisabled: isDisabled, scope: "squiz-rb-scope", containerClasses: "inline-launch-button__button" }, (onClose, titleProps) => (react_1.default.createElement(react_1.default.Fragment, null,
+            }, 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" }, isImagePicker ? `Change image` : `Change link`)));
+        react_1.default.createElement("div", { className: "inline-launch-button__label" }, inlineTypePickerLabels[inlineType])));
 };
 exports.ResourceBrowserInlineButton = ResourceBrowserInlineButton;

package/lib/index.css

@@ -6402,6 +6402,10 @@
   padding: 2px;
   cursor: pointer;
 }
+.squiz-rb-scope .inline-launch-button__button svg:not(.squiz-rb-plugin *) {
+  width: 18px;
+  height: 18px;
+}
 .squiz-rb-scope .inline-launch-button__label:not(.squiz-rb-plugin *) {
   display: none;
   position: absolute;

package/lib/index.js

@@ -71,25 +71,28 @@ const ResourceBrowser = (props) => {
     }, [setSource, setMode]);
     // If an existing resource is passed in auto select its source
     (0, react_1.useEffect)(() => {
-        let source = null;
+        let newSource = null;
         setError(null);
+        if (source !== null) {
+            return;
+        }
         // If there is a provided value try to use its source
         if (value) {
             // Search the sources for it matching against the value.source property
-            source = sources.find((source) => source.id === value?.sourceId) || null;
+            newSource = sources.find((source) => source.id === value?.sourceId) || null;
             // If the source is null and we arent loading the sources
-            if (source === null && !isLoading) {
+            if (newSource === null && !isLoading) {
                 // Set an error as the passed in value's source wasnt returned by onRequestSources
                 setError(new Error('Unable to find resource source.'));
             }
         }
         else if (sources?.length === 1 && !searchEnabled) {
             // If only one source is passed and search is not enabled select it automatically
-            source = sources[0];
+            newSource = sources[0];
         }
-        setSource(source);
+        setSource(newSource);
         setMode(null); // Passed in resource will always use the default mode
-    }, [value, isLoading, sources, setSource, setError]);
+    }, [value, isLoading, sources, 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

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 import { SquizImageType } from '@squiz/dx-json-schema-lib';
 export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
 export type ResourceBrowserPluginType = 'dam' | 'matrix';
-export type InlineType = 'image' | 'link';
+export type InlineType = 'image' | 'link' | 'resource';
 export type AuthenticationConfiguration = {
     authUrl: string;
     redirectUrl: string;

package/package.json

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

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.scss

@@ -9,6 +9,11 @@
         border-radius: 8px;
         padding: 2px;
         cursor: pointer;
+
+        svg {
+            width: 18px;
+            height: 18px;
+        }
     }
 
     &__label {

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.spec.tsx

@@ -27,7 +27,7 @@ describe('ResourceBrowserInlineButton', () => {
         });
     });
 
-    it('Render image icon if inline type is "link"', async () => {
+    it('Render link icon if inline type is "link"', async () => {
         //@ts-ignore
         render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'link'} />);
 
@@ -36,6 +36,15 @@ describe('ResourceBrowserInlineButton', () => {
         });
     });
 
+    it('Render resource icon if inline type is "resource"', async () => {
+        //@ts-ignore
+        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'resource'} />);
+
+        await waitFor(() => {
+            expect(screen.getByLabelText('change resource')).toBeTruthy();
+        });
+    });
+
     it('On trigger press render loading if still awaiting external data', async () => {
         //@ts-ignore
         render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} isLoading={true} />);

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.stories.tsx

@@ -37,3 +37,10 @@ Link.args = {
     modalTitle: 'Choose asset',
     inlineType: 'link',
 };
+
+export const Resource = Template.bind({});
+Resource.args = {
+    ...Image.args,
+    modalTitle: 'Choose resource',
+    inlineType: 'resource',
+};

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import MainContainer from '../MainContainer/MainContainer';
 import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
 import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
@@ -6,6 +6,7 @@ import { InlineLoadingErrorState } from './InlineLoadingErrorState/InlineLoading
 import { ImageInline } from '../Icons/ImageInline';
 import { LinkInline } from '../Icons/LinkInline';
 import { InlineType } from '../types';
+import { AdsClickIcon } from '../Icons/AdsClickIcon';
 
 export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
     inlineType: InlineType;
@@ -35,7 +36,22 @@ export const ResourceBrowserInlineButton = ({
     // 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 isImagePicker = inlineType === 'image';
+    const inlineTypePickerLabels = useMemo(
+        () => ({
+            image: 'Change image',
+            link: 'Change link',
+            resource: 'Change resource',
+        }),
+        [inlineType],
+    );
+    const inlineTypePickerIcons = useMemo(
+        () => ({
+            image: <ImageInline aria-label="change image" />,
+            link: <LinkInline aria-label="change link" />,
+            resource: <AdsClickIcon aria-label="change resource" />,
+        }),
+        [inlineType],
+    );
 
     return (
         <div className="inline-launch-button">
@@ -46,7 +62,7 @@ export const ResourceBrowserInlineButton = ({
                 }}
                 showLabel={false}
                 label=""
-                icon={isImagePicker ? <ImageInline aria-label="change image" /> : <LinkInline aria-label="change link" />}
+                icon={inlineTypePickerIcons[inlineType]}
                 isDisabled={isDisabled}
                 scope="squiz-rb-scope"
                 containerClasses="inline-launch-button__button"
@@ -82,7 +98,7 @@ export const ResourceBrowserInlineButton = ({
                     </>
                 )}
             </ModalTrigger>
-            <div className="inline-launch-button__label">{isImagePicker ? `Change image` : `Change link`}</div>
+            <div className="inline-launch-button__label">{inlineTypePickerLabels[inlineType]}</div>
         </div>
     );
 };

package/src/index.tsx

@@ -70,26 +70,29 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
 
     // If an existing resource is passed in auto select its source
     useEffect(() => {
-        let source: ResourceBrowserSourceWithPlugin | null = null;
+        let newSource: ResourceBrowserSourceWithPlugin | null = null;
         setError(null);
+        if (source !== null) {
+            return;
+        }
 
         // If there is a provided value try to use its source
         if (value) {
             // Search the sources for it matching against the value.source property
-            source = sources.find((source) => source.id === value?.sourceId) || null;
+            newSource = sources.find((source) => source.id === value?.sourceId) || null;
             // If the source is null and we arent loading the sources
-            if (source === null && !isLoading) {
+            if (newSource === null && !isLoading) {
                 // Set an error as the passed in value's source wasnt returned by onRequestSources
                 setError(new Error('Unable to find resource source.'));
             }
         } else if (sources?.length === 1 && !searchEnabled) {
             // If only one source is passed and search is not enabled select it automatically
-            source = sources[0];
+            newSource = sources[0];
         }
 
-        setSource(source);
+        setSource(newSource);
         setMode(null); // Passed in resource will always use the default mode
-    }, [value, isLoading, sources, setSource, setError]);
+    }, [value, isLoading, sources, 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(

package/src/types.ts

@@ -3,7 +3,7 @@ import { SquizImageType } from '@squiz/dx-json-schema-lib';
 
 export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
 export type ResourceBrowserPluginType = 'dam' | 'matrix';
-export type InlineType = 'image' | 'link';
+export type InlineType = 'image' | 'link' | 'resource';
 
 export type AuthenticationConfiguration = {
     authUrl: string;