@squiz/resource-browser 3.0.1-rc.6 → 3.1.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@3.0.1-rc.7...@squiz/resource-browser@3.1.0-rc.0) (2024-12-16)
+
+### Features
+
+-   **prodam-489:** close modal hover and mobile input with fix ([135c695](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/commit/135c695bdcc1c5d6cbbd26d850e402d3cc208a8a))
+
+## [3.0.1-rc.7](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@3.0.1-rc.6...@squiz/resource-browser@3.0.1-rc.7) (2024-12-13)
+
+**Note:** Version bump only for package @squiz/resource-browser
+
 ## [3.0.1-rc.6](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@3.0.1-rc.5...@squiz/resource-browser@3.0.1-rc.6) (2024-12-12)
 
 **Note:** Version bump only for package @squiz/resource-browser

package/lib/MainContainer/MainContainer.js

@@ -52,9 +52,11 @@ function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedS
                 !plugin.createHeaderPortal && sources.length > 1 && (react_1.default.createElement(SourceDropdownContainer_1.default, { isCollapsed: false, onExpand: () => { } },
                     react_1.default.createElement("div", { className: `border-l border-blue-200 pl-1 w-[204px]` },
                         react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect })))))),
-            react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
-                react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
+            react_1.default.createElement("div", { className: "flex gap-3 p-3 absolute right-0 top-0" },
+                react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "border-0 bg-transparent cursor-pointer p-0 relative" },
+                    react_1.default.createElement("svg", { height: "24px", viewBox: "0 0 24 24", width: "24px", xmlns: "http://www.w3.org/2000/svg", className: "text-gray-600 hover:text-gray-800 fill-current" },
+                        react_1.default.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                        react_1.default.createElement("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" }))))),
         react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
             plugin && selectedSource && (react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${pluginMode?.type}` },
                 pluginToRender === types_1.PluginLaunchModeType.Browse && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, preselectedResource: preselectedResource || undefined, browseTo: pluginMode?.args?.browseTo, onSelected: (resource) => {

package/lib/Plugin/Plugin.d.ts

@@ -12,5 +12,6 @@ export type PluginRenderType = ResourceBrowserInputProps & {
     render: boolean;
     inline: boolean;
     inlineType?: InlineType;
+    onRetry: () => void;
 };
 export declare const PluginRender: ({ render, inline, inlineType, ...props }: PluginRenderType) => React.JSX.Element;

package/lib/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+export type InlineLoadingErrorStateProps = {
+    title: string;
+    titleAriaProps: DOMAttributes<FocusableElement>;
+    onClose: () => void;
+    onRetry: () => void;
+    isLoading: boolean;
+    error: Error | null;
+};
+export declare const InlineLoadingErrorState: ({ title, titleAriaProps, onClose, onRetry, isLoading, error }: InlineLoadingErrorStateProps) => React.JSX.Element;

package/lib/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineLoadingErrorState = void 0;
+const react_1 = __importDefault(require("react"));
+const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
+const sds_1 = require("@squiz/sds");
+const InlineLoadingErrorState = ({ title, titleAriaProps, onClose, onRetry, isLoading, error }) => {
+    return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
+        react_1.default.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
+            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
+            react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
+                react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
+        react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
+            react_1.default.createElement("div", { className: "w-screen max-w-[400px] min-h-[320px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4 flex justify-center items-center text-gray-500" },
+                isLoading && react_1.default.createElement(sds_1.Spinner, { type: "lg" }),
+                !isLoading && error && (react_1.default.createElement(resource_browser_ui_lib_1.Error, { onReset: onRetry, infoText: 'There was a problem loading this feature. If this problem persists, contact your administrator or support team.', buttonText: 'Try again' }))))));
+};
+exports.InlineLoadingErrorState = InlineLoadingErrorState;

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.d.ts

@@ -3,5 +3,6 @@ import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrows
 import { InlineType } from '../types';
 export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
     inlineType: InlineType;
+    onRetry: () => void;
 };
-export declare const ResourceBrowserInlineButton: ({ inlineType, modalTitle, allowedTypes, onChange, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }: ResourceBrowserInlineButtonProps) => React.JSX.Element;
+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;

package/lib/ResourceBrowserInlineButton/ResourceBrowserInlineButton.js

@@ -7,16 +7,20 @@ exports.ResourceBrowserInlineButton = void 0;
 const react_1 = __importDefault(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 ResourceBrowserInlineButton = ({ inlineType, modalTitle, allowedTypes, onChange, value, useResource, isDisabled, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
-    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+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 isImagePicker = inlineType === 'image';
     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(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 }))),
+            }, 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,
+            (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`)));
 };
 exports.ResourceBrowserInlineButton = ResourceBrowserInlineButton;