@squiz/resource-browser 2.4.12 → 3.0.0-pre-alpha.0

package/README.md

@@ -7,3 +7,7 @@ The Resource Browser is a generic frontend intended for use across the Squiz DXP
 The Resource Browser does not know how to interface with any source systems; this support needs to be plugged into it. A plugin interface has been defined to allow any source system to be added into the Resource Browser as needed with as complex a UI as that source needs. These plugin can be defined inline when simple (e.g testing) or published to NPM as a packages and consumed by a specific application.
 
 An example plugin with comments as documentation can be found [here](./src/__mocks__/PluginExample.tsx).
+
+## Exports
+
+This library exports both CommonJS and ESM code. It is recommended that you use the CommonJS when possible (when you aren't restricted by other tooling) as the testing framework we use (JEST) runs via this compilation method.

package/lib/BrowseToSource/BrowseToSource.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ResourceBrowserSource, PluginLaunchMode } from '../types';
+export default function BrowseToSource({ sources, selectedSource, onSourceSelect, className, }: {
+    sources: ResourceBrowserSource[];
+    selectedSource: ResourceBrowserSource;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
+    className?: string;
+}): React.JSX.Element;

package/lib/BrowseToSource/BrowseToSource.js

@@ -0,0 +1,50 @@
+import React, { useRef, useState } from 'react';
+import { Icon, uuid } from '@squiz/generic-browser-lib';
+import { useFocusWithin, useKeyboard } from 'react-aria';
+import { AdsClickIcon } from '../Icons/AdsClickIcon';
+import { ArrowDownIcon } from '../Icons/ArrowDownIcon';
+export default function BrowseToSource({ sources, selectedSource, onSourceSelect, className = '', }) {
+    const [uniqueId] = useState(uuid());
+    const buttonRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    // Watch the focus and blur on the menu and close if focus leaves the control
+    const { focusWithinProps } = useFocusWithin({
+        onBlurWithin: () => {
+            setIsOpen(false);
+        },
+    });
+    // Listen for Esc key within this element
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            if (isOpen && e.key === 'Escape') {
+                setIsOpen(false);
+                buttonRef.current?.focus(); // Restore focus to the element which opened the menu
+            }
+        },
+    });
+    const handleSourceClick = (source) => {
+        setIsOpen(false);
+        buttonRef.current?.focus();
+        onSourceSelect(source);
+    };
+    if (!sources.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("div", { className: `inline-block ${isOpen ? 'flex items-center border-2 border-gray-200 rounded-lg px-1 py-0.5 w-[350px]' : 'p-0'} ${className}` },
+        isOpen && React.createElement(AdsClickIcon, { "aria-hidden": true, className: "ml-1 mr-2 shrink-0" }),
+        sources.length > 1 && (React.createElement("div", { ...focusWithinProps, ...keyboardProps, className: `relative w-full ${isOpen && 'border-l border-gray-400 pl-1 '}` },
+            React.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: `relative flex items-center p-2 w-full rounded-lg ${!isOpen && 'border-2 border-gray-200 hover:bg-gray-100'}` }, isOpen ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "text-gray-700 text-md leading-5 mr-2" }, "Browse to ..."),
+                React.createElement(ArrowDownIcon, { "aria-hidden": true, className: "absolute right-3" }))) : (React.createElement(React.Fragment, null,
+                React.createElement(AdsClickIcon, { "aria-hidden": true, className: "ml-[6px] mr-2" }),
+                React.createElement("span", { className: "text-gray-700 text-md font-semibold leading-5 mr-[6px]" }, "Browse")))),
+            React.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+8px)] left-1 w-[calc(100%-2px)] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-auto max-h-80 ${!isOpen ? 'hidden' : ''}` }, sources.map((source) => {
+                const { id, name, type } = source;
+                const isSelectedSource = id === selectedSource.id;
+                return (React.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
+                    React.createElement("button", { type: "button", onClick: () => handleSourceClick(source), className: `relative grow flex items-center p-2 border-1 border-white rounded hover:bg-gray-50 hover:border-gray-300 focus:bg-gray-100` },
+                        React.createElement(Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
+                        React.createElement("span", { className: "text-left mr-7" }, name),
+                        isSelectedSource && (React.createElement(Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
+            }))))));
+}

package/lib/Hooks/useAuth.js

@@ -1,19 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAuth = void 0;
 /* eslint-disable no-console */
-const react_1 = require("react");
-const authUtils_1 = require("../utils/authUtils");
-const useAuth = (authConfig) => {
-    const [authToken, setAuthToken] = (0, react_1.useState)((0, authUtils_1.getCookieValue)('authToken'));
-    const [isAuthenticated, setIsAuthenticated] = (0, react_1.useState)(!!(0, authUtils_1.getCookieValue)('authToken'));
-    const refreshAccessToken = (0, react_1.useCallback)(async () => {
-        const newToken = await (0, authUtils_1.refreshAccessToken)(authConfig);
+import { useState, useCallback, useEffect } from 'react';
+import { getCookieValue, refreshAccessToken as refreshTokenUtil } from '../utils/authUtils';
+export const useAuth = (authConfig) => {
+    const [authToken, setAuthToken] = useState(getCookieValue('authToken'));
+    const [isAuthenticated, setIsAuthenticated] = useState(!!getCookieValue('authToken'));
+    const refreshAccessToken = useCallback(async () => {
+        const newToken = await refreshTokenUtil(authConfig);
         setAuthToken(newToken);
         setIsAuthenticated(!!newToken);
         return newToken;
     }, [authConfig]);
-    const handleLogin = (0, react_1.useCallback)(() => {
+    const handleLogin = useCallback(() => {
         if (!authConfig?.redirectUrl && !authConfig?.authUrl && !authConfig?.scope) {
             console.error('Auth config is misconfigured');
             return;
@@ -27,10 +24,10 @@ const useAuth = (authConfig) => {
         }
         const checkPopup = setInterval(() => {
             try {
-                if ((0, authUtils_1.getCookieValue)('authToken') && (0, authUtils_1.getCookieValue)('refreshToken')) {
+                if (getCookieValue('authToken') && getCookieValue('refreshToken')) {
                     clearInterval(checkPopup);
                     popup.close();
-                    setAuthToken((0, authUtils_1.getCookieValue)('authToken'));
+                    setAuthToken(getCookieValue('authToken'));
                     setIsAuthenticated(true);
                 }
             }
@@ -43,7 +40,7 @@ const useAuth = (authConfig) => {
             }
         }, 1000); // Check every second
     }, [authConfig]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         refreshAccessToken().catch(() => {
             setIsAuthenticated(false);
         });
@@ -55,4 +52,3 @@ const useAuth = (authConfig) => {
         refreshAccessToken,
     };
 };
-exports.useAuth = useAuth;

package/lib/Hooks/useSelectedState.js

@@ -1,16 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectedState = void 0;
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+import { useAsync } from '@squiz/generic-browser-lib';
 /**
  * Loads the selected state for the provided resource
  */
-const useSelectedState = ({ plugin, resource }) => {
+export const useSelectedState = ({ plugin, resource }) => {
     // Find the resolver for this resource
     const renderSelectedResource = resource && plugin?.renderSelectedResource;
-    return (0, generic_browser_lib_1.useAsync)({
+    return useAsync({
         callback: () => (resource && renderSelectedResource ? renderSelectedResource(resource) : null),
         defaultValue: null,
     }, [resource]);
 };
-exports.useSelectedState = useSelectedState;

package/lib/Hooks/useSources.d.ts

@@ -1,4 +1,4 @@
-import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
+import { ResourceBrowserSource, ResourceBrowserPlugin, ResourceBrowserSourceWithPlugin } from '../types';
 export type UseSourcesProps = {
     onRequestSources: () => Promise<ResourceBrowserSource[]>;
     plugins: Array<ResourceBrowserPlugin>;
@@ -7,7 +7,7 @@ export type UseSourcesProps = {
  * Loads and caches the source list when a component using the hook is mounted.
  */
 export declare const useSources: ({ onRequestSources, plugins }: UseSourcesProps) => {
-    data: ResourceBrowserSource[];
+    data: ResourceBrowserSourceWithPlugin[];
     error: Error | null;
     isLoading: boolean;
     reload: () => void;

package/lib/Hooks/useSources.js

@@ -1,27 +1,38 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSources = void 0;
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+import { useAsync } from '@squiz/generic-browser-lib';
 /**
  * Loads and caches the source list when a component using the hook is mounted.
  */
-const useSources = ({ onRequestSources, plugins }) => {
+export const useSources = ({ onRequestSources, plugins }) => {
     const pluginsKey = plugins.reduce((acc, plugin) => acc + plugin.type, '');
-    return (0, generic_browser_lib_1.useAsync)({
+    return useAsync({
         callback: () => {
             return new Promise((resolve, reject) => {
                 // Get all the sources from the outer context
                 onRequestSources()
                     .then((sources) => {
                     // Remove any sources which we don't have a plugin to handle
-                    resolve(sources.filter((source) => {
+                    const filteredSources = sources.filter((source) => {
                         return !!plugins.find((plugin) => {
                             if (plugin.type === source.type) {
                                 return true;
                             }
                             return false;
                         });
-                    }));
+                    });
+                    // Attach the plugin to the source so it can be quickly used later
+                    const combinedSources = filteredSources.map((source) => {
+                        const plugin = plugins.find((plugin) => {
+                            if (plugin.type === source.type) {
+                                return true;
+                            }
+                            return false;
+                        });
+                        return {
+                            ...source,
+                            plugin,
+                        };
+                    });
+                    resolve(combinedSources);
                 })
                     .catch((e) => {
                     reject(e);
@@ -31,4 +42,3 @@ const useSources = ({ onRequestSources, plugins }) => {
         defaultValue: [],
     }, [onRequestSources, pluginsKey]);
 };
-exports.useSources = useSources;

package/lib/Icons/AdsClickIcon.d.ts

@@ -0,0 +1,4 @@
+import React, { SVGAttributes } from 'react';
+type AdsClickIconProps = SVGAttributes<SVGElement>;
+export declare const AdsClickIcon: (props: AdsClickIconProps) => React.JSX.Element;
+export {};

package/lib/Icons/AdsClickIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const AdsClickIcon = (props) => {
+    return (React.createElement("svg", { fill: "#4f4f4f", height: "24", width: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { d: "M11.56 17.845C8.38001 17.695 5.85001 15.075 5.85001 11.855C5.85001 8.54501 8.54001 5.85501 11.85 5.85501C15.07 5.85501 17.69 8.38501 17.84 11.565L15.74 10.935C15.33 9.16501 13.74 7.85501 11.85 7.85501C9.64001 7.85501 7.85001 9.64501 7.85001 11.855C7.85001 13.745 9.16001 15.335 10.93 15.745L11.56 17.845ZM21.85 11.855C21.85 12.155 21.84 12.455 21.81 12.755L19.84 12.165C19.85 12.065 19.85 11.955 19.85 11.855C19.85 7.43501 16.27 3.85501 11.85 3.85501C7.43001 3.85501 3.85001 7.43501 3.85001 11.855C3.85001 16.275 7.43001 19.855 11.85 19.855C11.95 19.855 12.06 19.855 12.16 19.845L12.75 21.815C12.45 21.845 12.15 21.855 11.85 21.855C6.33001 21.855 1.85001 17.375 1.85001 11.855C1.85001 6.33501 6.33001 1.85501 11.85 1.85501C17.37 1.85501 21.85 6.33501 21.85 11.855ZM18.08 16.115L20.35 15.355C20.81 15.205 20.8 14.545 20.34 14.405L12.74 12.125C12.36 12.015 12 12.365 12.12 12.745L14.4 20.345C14.54 20.815 15.2 20.825 15.35 20.355L16.11 18.085L20.02 21.995C20.22 22.195 20.53 22.195 20.73 21.995L22 20.725C22.2 20.525 22.2 20.215 22 20.015L18.08 16.115Z" })));
+};

package/lib/Icons/ArrowDownIcon.d.ts

@@ -0,0 +1,4 @@
+import React, { SVGAttributes } from 'react';
+type ArrowDownIconProps = SVGAttributes<SVGElement>;
+export declare const ArrowDownIcon: (props: ArrowDownIconProps) => React.JSX.Element;
+export {};

package/lib/Icons/ArrowDownIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const ArrowDownIcon = (props) => {
+    return (React.createElement("svg", { fill: "#4f4f4f", height: "25", width: "24", viewBox: "0 0 24 25", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { d: "M8.12459 9.49953L12.0046 13.3795L15.8846 9.49953C16.2746 9.10953 16.9046 9.10953 17.2946 9.49953C17.6846 9.88953 17.6846 10.5195 17.2946 10.9095L12.7046 15.4995C12.3146 15.8895 11.6846 15.8895 11.2946 15.4995L6.70459 10.9095C6.51734 10.7227 6.41211 10.469 6.41211 10.2045C6.41211 9.94001 6.51734 9.68636 6.70459 9.49953C7.09459 9.11953 7.73459 9.10953 8.12459 9.49953Z" })));
+};

package/lib/Icons/CircledLoopIcon.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from 'react';
+export const CircledLoopIcon = (props) => {
+    return (React.createElement("svg", { fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { d: "M8 0.5C3.86 0.5 0.5 3.86 0.5 8C0.5 12.14 3.86 15.5 8 15.5C12.14 15.5 15.5 12.14 15.5 8C15.5 3.86 12.14 0.5 8 0.5ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM11.1275 10.07L10.3025 9.245C10.835 8.2475 10.7 6.9875 9.86 6.1475C9.3425 5.63 8.675 5.375 8 5.375C7.9775 5.375 7.955 5.3825 7.9325 5.3825L8.75 6.2L7.955 6.995L5.8325 4.8725L7.955 2.75L8.75 3.545L8.03 4.265C8.9825 4.2725 9.9275 4.625 10.655 5.345C11.93 6.6275 12.0875 8.615 11.1275 10.07ZM10.1675 11.1275L8.045 13.25L7.25 12.455L7.9625 11.7425C7.0175 11.735 6.0725 11.3675 5.3525 10.6475C4.07 9.365 3.9125 7.385 4.8725 5.93L5.6975 6.755C5.165 7.7525 5.3 9.0125 6.14 9.8525C6.665 10.3775 7.3625 10.6325 8.06 10.61L7.25 9.8L8.045 9.005L10.1675 11.1275Z", fill: "#949494" })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircledLoopIcon = void 0;
-const react_1 = __importDefault(require("react"));
-const CircledLoopIcon = (props) => {
-    return (react_1.default.createElement("svg", { fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", ...props },
-        react_1.default.createElement("path", { d: "M8 0.5C3.86 0.5 0.5 3.86 0.5 8C0.5 12.14 3.86 15.5 8 15.5C12.14 15.5 15.5 12.14 15.5 8C15.5 3.86 12.14 0.5 8 0.5ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM11.1275 10.07L10.3025 9.245C10.835 8.2475 10.7 6.9875 9.86 6.1475C9.3425 5.63 8.675 5.375 8 5.375C7.9775 5.375 7.955 5.3825 7.9325 5.3825L8.75 6.2L7.955 6.995L5.8325 4.8725L7.955 2.75L8.75 3.545L8.03 4.265C8.9825 4.2725 9.9275 4.625 10.655 5.345C11.93 6.6275 12.0875 8.615 11.1275 10.07ZM10.1675 11.1275L8.045 13.25L7.25 12.455L7.9625 11.7425C7.0175 11.735 6.0725 11.3675 5.3525 10.6475C4.07 9.365 3.9125 7.385 4.8725 5.93L5.6975 6.755C5.165 7.7525 5.3 9.0125 6.14 9.8525C6.665 10.3775 7.3625 10.6325 8.06 10.61L7.25 9.8L8.045 9.005L10.1675 11.1275Z", fill: "#949494" })));
-};
-exports.CircledLoopIcon = CircledLoopIcon;

package/lib/MainContainer/MainContainer.d.ts

@@ -1,17 +1,19 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserResource } from '../types';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserResource, ResourceBrowserSourceWithPlugin, PluginLaunchMode } from '../types';
 interface MainContainerProps {
     title: string;
     titleAriaProps: DOMAttributes<FocusableElement>;
     allowedTypes: string[] | undefined;
-    sources: ResourceBrowserSource[];
+    sources: ResourceBrowserSourceWithPlugin[];
     selectedSource: ResourceBrowserSource | null;
-    onSourceSelect(source: ResourceBrowserSource | null): void;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
     onChange(resource: ResourceBrowserResource | null): void;
     onClose: () => void;
     preselectedResource?: ResourceBrowserResource | null;
     plugin: ResourceBrowserPlugin | null;
+    pluginMode: PluginLaunchMode | null;
+    searchEnabled: boolean;
 }
-declare function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedSource, onSourceSelect, onChange, onClose, preselectedResource, plugin, }: MainContainerProps): React.JSX.Element;
+declare function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedSource, onSourceSelect, onChange, onClose, preselectedResource, plugin, pluginMode, searchEnabled, }: MainContainerProps): React.JSX.Element;
 export default MainContainer;

package/lib/MainContainer/MainContainer.js

@@ -1,62 +1,43 @@
-"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 });
-const react_1 = __importStar(require("react"));
-const SourceDropdown_1 = __importDefault(require("../SourceDropdown/SourceDropdown"));
-const SourceList_1 = __importDefault(require("../SourceList/SourceList"));
-function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedSource, onSourceSelect, onChange, onClose, preselectedResource, plugin, }) {
-    const [headerPortal, setHeaderPortal] = (0, react_1.useState)(null);
+import React, { useCallback, useState } from 'react';
+import SourceList from '../SourceList/SourceList';
+import ResourceLauncher from '../ResourceLauncher/ResourceLauncher';
+import SourceDropdownContainer from '../SourceDropdownContainer/SourceDropdownContainer';
+import SourceDropdown from '../SourceDropdown/SourceDropdown';
+import { PluginLaunchModeType, } from '../types';
+function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedSource, onSourceSelect, onChange, onClose, preselectedResource, plugin, pluginMode, searchEnabled, }) {
+    const [headerPortal, setHeaderPortal] = useState(null);
+    const pluginToRender = pluginMode ? pluginMode.type : PluginLaunchModeType.Browse; // Cant default a 'null' property in signature so set it here
     const SourceBrowser = plugin?.sourceBrowserComponent();
+    const SourceSearch = plugin?.sourceSearchComponent();
     // Can't use a useRef as it wont update on change when a source is selected, so need to use a ref callback to store in state
-    const setHeaderPortalRef = (0, react_1.useCallback)((node) => {
+    const setHeaderPortalRef = useCallback((node) => {
         if (node !== null) {
             setHeaderPortal(node);
         }
     }, [setHeaderPortal]);
     // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
-    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-4.5 pl-4.5 pr-10" },
-            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" },
-                !plugin && 'Environment Selector',
-                plugin && title),
-            plugin && selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
-                sources.length > 1 && (react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
-                    react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect }))),
-                plugin.createHeaderPortal && (react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin px-3 border-l border-gray-300 w-300px" })))),
-            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" },
-            plugin && selectedSource && SourceBrowser && (react_1.default.createElement("div", { className: "squiz-rb-plugin" },
-                react_1.default.createElement(SourceBrowser, { source: selectedSource, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, preselectedResource: preselectedResource || undefined, onSelected: (resource) => {
+    return (React.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
+        React.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
+            React.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
+            plugin && selectedSource && (React.createElement(React.Fragment, null,
+                plugin.createHeaderPortal && React.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin" }),
+                !plugin.createHeaderPortal && sources.length > 1 && (React.createElement(SourceDropdownContainer, { isCollapsed: false, onExpand: () => { } },
+                    React.createElement("div", { className: `border-l border-blue-200 pl-1 w-[204px]` },
+                        React.createElement(SourceDropdown, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect })))))),
+            React.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.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React.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.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
+            plugin && selectedSource && (React.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${pluginMode?.type}` },
+                pluginToRender === PluginLaunchModeType.Browse && SourceBrowser && (React.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) => {
                         onChange(resource);
                         onClose();
-                    } }))),
-            !selectedSource && react_1.default.createElement(SourceList_1.default, { sources: sources, onSourceSelect: onSourceSelect }))));
+                    } })),
+                pluginToRender === PluginLaunchModeType.Search && SourceSearch && (React.createElement(SourceSearch, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, query: pluginMode?.args?.query, onSelected: (resource) => {
+                        onChange(resource);
+                        onClose();
+                    } })))),
+            !selectedSource && searchEnabled && React.createElement(ResourceLauncher, { sources: sources, onSourceSelect: onSourceSelect }),
+            !selectedSource && !searchEnabled && React.createElement(SourceList, { sources: sources, onSourceSelect: onSourceSelect }))));
 }
-exports.default = MainContainer;
+export default MainContainer;

package/lib/Plugin/Plugin.js

@@ -1,19 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PluginRender = void 0;
-const react_1 = __importDefault(require("react"));
-const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserInput");
-const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
-const PluginRender = ({ render, ...props }) => {
+import React from 'react';
+import { ResourceBrowserInput } from '../ResourceBrowserInput/ResourceBrowserInput';
+import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
+export const PluginRender = ({ render, ...props }) => {
     if (render) {
-        return (react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source },
-            react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props })));
+        return (React.createElement(AuthProvider, { authConfig: props.source },
+            React.createElement(ResourceBrowserInput, { ...props })));
     }
     else {
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        return React.createElement(React.Fragment, null);
     }
 };
-exports.PluginRender = PluginRender;

package/lib/ResourceBrowserContext/AuthProvider.js

@@ -1,46 +1,18 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthProvider = exports.useAuthContext = exports.AuthContext = void 0;
-const react_1 = __importStar(require("react"));
-const useAuth_1 = require("../Hooks/useAuth");
-exports.AuthContext = (0, react_1.createContext)(undefined);
-const useAuthContext = () => {
-    const context = (0, react_1.useContext)(exports.AuthContext);
+import React, { createContext, useContext } from 'react';
+import { useAuth } from '../Hooks/useAuth';
+export const AuthContext = createContext(undefined);
+export const useAuthContext = () => {
+    const context = useContext(AuthContext);
     if (!context) {
         throw new Error('useAuthContext must be used within an AuthProvider');
     }
     return context;
 };
-exports.useAuthContext = useAuthContext;
-const AuthProvider = ({ children, authConfig }) => {
+export const AuthProvider = ({ children, authConfig }) => {
     const authConfiguration = authConfig;
-    const auth = (0, useAuth_1.useAuth)(authConfiguration?.configuration);
+    const auth = useAuth(authConfiguration?.configuration);
     if (!authConfiguration?.configuration) {
-        return react_1.default.createElement(react_1.default.Fragment, null, children);
+        return React.createElement(React.Fragment, null, children);
     }
-    return react_1.default.createElement(exports.AuthContext.Provider, { value: auth }, children);
+    return React.createElement(AuthContext.Provider, { value: auth }, children);
 };
-exports.AuthProvider = AuthProvider;

package/lib/ResourceBrowserContext/ResourceBrowserContext.d.ts

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import { OnRequestSources, ResourceBrowserPlugin } from '../types';
 export type ResourceBrowserContextProps = {
     onRequestSources: OnRequestSources;
+    searchEnabled: boolean;
     plugins: Array<ResourceBrowserPlugin>;
 };
 /**

package/lib/ResourceBrowserContext/ResourceBrowserContext.js

@@ -1,55 +1,26 @@
-"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.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
-const react_1 = __importStar(require("react"));
-const p_memoize_1 = __importDefault(require("p-memoize"));
-const expiry_map_1 = __importDefault(require("expiry-map"));
+import React, { useMemo } from 'react';
+import pMemoize from 'p-memoize';
+import ExpiryMap from 'expiry-map';
 /**
  * @internal Direct usage of this object is discouraged. It will be privated in a future major version.
  * Please use ResourceBrowserContextProvider instead.
  */
-exports.ResourceBrowserContext = react_1.default.createContext({
+export const ResourceBrowserContext = React.createContext({
     onRequestSources: () => {
         throw new Error('onRequestSources has not been configured.');
     },
+    searchEnabled: false,
     plugins: [],
 });
-const ResourceBrowserContextProvider = (props) => {
+export const ResourceBrowserContextProvider = (props) => {
     const CACHE_DURATION = 30000; // 30 seconds
     const { value: { onRequestSources, ...other }, children, } = props;
-    const cache = new expiry_map_1.default(CACHE_DURATION);
-    const memoized = (0, react_1.useMemo)(() => ({
-        onRequestSources: (0, p_memoize_1.default)(onRequestSources, {
+    const cache = new ExpiryMap(CACHE_DURATION);
+    const memoized = useMemo(() => ({
+        onRequestSources: pMemoize(onRequestSources, {
             cache,
             cacheKey: () => 'onRequestSources',
         }),
     }), [onRequestSources]);
-    return react_1.default.createElement(exports.ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
+    return React.createElement(ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
 };
-exports.ResourceBrowserContextProvider = ResourceBrowserContextProvider;

package/lib/ResourceBrowserInput/ResourceBrowserInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from '../types';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowserSourceWithPlugin, PluginLaunchMode } from '../types';
 export type ResourceBrowserInputProps = {
     modalTitle: string;
     allowedTypes?: string[];
@@ -13,12 +13,14 @@ export type ResourceBrowserInputProps = {
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
     plugin: ResourceBrowserPlugin | null;
+    pluginMode: PluginLaunchMode | null;
+    searchEnabled: boolean;
     source: ResourceBrowserSource | null;
-    sources: ResourceBrowserSource[];
+    sources: ResourceBrowserSourceWithPlugin[];
     isLoading: boolean;
     error: Error | null;
-    setSource(source: ResourceBrowserSource | null): void;
+    setSource(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
     isModalOpen: boolean;
     onModalStateChange(isOpen: boolean): void;
 };
-export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, 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, error, setSource, isModalOpen, onModalStateChange, }: ResourceBrowserInputProps) => React.JSX.Element;

package/lib/ResourceBrowserInput/ResourceBrowserInput.js

@@ -1,16 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
+import React from 'react';
+import MainContainer from '../MainContainer/MainContainer';
+import { ResourcePicker } from '../ResourcePicker/ResourcePicker';
+export const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, pluginMode, searchEnabled, source, sources, isLoading, 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, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onSourceSelect: setSource, onClose: onClose, onChange: onChange }))));
+    return (React.createElement(ResourcePicker, { resource: resource, plugin: plugin, allowedTypes: allowedTypes, error: resourceError || error, isLoading: isResourceLoading || isLoading, isDisabled: isDisabled, onClear: onClearFunction, isModalOpen: isModalOpen, onModalStateChange: onModalStateChange }, (onClose, titleProps) => (React.createElement(MainContainer, { 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/ResourceLauncher/ResourceLauncher.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ResourceBrowserSource, ResourceBrowserSourceWithPlugin, PluginLaunchMode } from '../types';
+interface ResourceLauncherProps {
+    sources: ResourceBrowserSourceWithPlugin[];
+    onSourceSelect(source: ResourceBrowserSource, mode: PluginLaunchMode): void;
+}
+declare function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps): React.JSX.Element;
+export default ResourceLauncher;