@squiz/resource-browser 3.3.6 → 3.3.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.3.7
+
+### Patch Changes
+
+-   cbf0348: enable the resource picker for MatrixAssetURI in resource browser
+
 ## 3.3.6
 
 ### 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/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.6",
+    "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/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;