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

package/lib/index.js

@@ -1,57 +1,29 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourceBrowser = exports.AuthContext = exports.AuthProvider = exports.useAuthContext = exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
-const react_1 = __importStar(require("react"));
-const ResourceBrowserContext_1 = require("./ResourceBrowserContext/ResourceBrowserContext");
-Object.defineProperty(exports, "ResourceBrowserContext", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContext; } });
-Object.defineProperty(exports, "ResourceBrowserContextProvider", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContextProvider; } });
-const useSources_1 = require("./Hooks/useSources");
-const Plugin_1 = require("./Plugin/Plugin");
-const AuthProvider_1 = require("./ResourceBrowserContext/AuthProvider");
-Object.defineProperty(exports, "AuthProvider", { enumerable: true, get: function () { return AuthProvider_1.AuthProvider; } });
-Object.defineProperty(exports, "useAuthContext", { enumerable: true, get: function () { return AuthProvider_1.useAuthContext; } });
-Object.defineProperty(exports, "AuthContext", { enumerable: true, get: function () { return AuthProvider_1.AuthContext; } });
-__exportStar(require("./types"), exports);
-const ResourceBrowser = (props) => {
+import React, { useState, useContext, useEffect, useCallback } from 'react';
+import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
+import { useSources } from './Hooks/useSources';
+import { PluginRender } from './Plugin/Plugin';
+import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
+import BrowseToSource from './BrowseToSource/BrowseToSource';
+import SourceDropdown from './SourceDropdown/SourceDropdown';
+import SourceDropdownContainer from './SourceDropdownContainer/SourceDropdownContainer';
+export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext, BrowseToSource, SourceDropdown, SourceDropdownContainer, };
+export * from './types';
+export const ResourceBrowser = (props) => {
     const { value } = props;
-    const [error, setError] = (0, react_1.useState)(null);
-    const { onRequestSources, plugins } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
-    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
-    const [source, setSource] = (0, react_1.useState)(null);
-    const { data: sources, isLoading, error: sourcesError } = (0, useSources_1.useSources)({ onRequestSources, plugins });
-    const [plugin, setPlugin] = (0, react_1.useState)(null);
+    const [error, setError] = useState(null);
+    const { onRequestSources, searchEnabled, plugins } = useContext(ResourceBrowserContext);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [source, setSource] = useState(null);
+    const [mode, setMode] = useState(null);
+    const { data: sources, isLoading, error: sourcesError } = useSources({ onRequestSources, plugins });
+    const [plugin, setPlugin] = useState(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) => {
+    const handleSourceSelect = useCallback((source, mode) => {
         setSource(source);
-    }, [setSource]);
-    // Try to auto set the source
-    (0, react_1.useEffect)(() => {
+        setMode(mode || null);
+    }, [setSource, setMode]);
+    // If an existing resource is passed in auto select its source
+    useEffect(() => {
         let source = null;
         setError(null);
         // If there is a provided value try to use its source
@@ -64,34 +36,37 @@ const ResourceBrowser = (props) => {
                 setError(new Error('Unable to find resource source.'));
             }
         }
-        else if (sources?.length === 1) {
-            // If only one source is passed in select it automatically
+        else if (sources?.length === 1 && !searchEnabled) {
+            // If only one source is passed and search is not enabled select it automatically
             source = sources[0];
         }
         setSource(source);
+        setMode(null); // Passed in resource will always use the default mode
     }, [value, isLoading, sources, setSource, setError]);
-    (0, react_1.useEffect)(() => {
-        if (source) {
-            const plugin = plugins.find((plugin) => {
-                return plugin.type === source.type;
-            });
-            setPlugin(plugin || null);
+    // 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]);
-    const handleModalStateChange = (0, react_1.useCallback)((isOpen) => {
+    // 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) => {
         setIsModalOpen(isOpen);
     }, [setIsModalOpen]);
-    (0, react_1.useEffect)(() => {
-        if (!isModalOpen && !value && sources?.length > 1) {
+    // If the modal closes and we dont have a value clear the source state so it goes back to the launcher on re-open
+    useEffect(() => {
+        if (!isModalOpen && !value && (sources?.length > 1 || searchEnabled)) {
             setSource(null);
+            setMode(null);
         }
     }, [sources, isModalOpen]);
     // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
-    return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", render: plugin === null, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, useResource: () => {
+    return (React.createElement("div", { className: "squiz-rb-scope" },
+        React.createElement(PluginRender, { key: "default", render: plugin === null, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
                 return {
                     data: null,
                     error: null,
@@ -99,7 +74,6 @@ const ResourceBrowser = (props) => {
                 };
             }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }),
         plugins.map((thisPlugin) => {
-            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: error, plugin: plugin, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
+            return (React.createElement(PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
         })));
 };
-exports.ResourceBrowser = ResourceBrowser;

package/lib/types.d.ts

@@ -13,9 +13,20 @@ export interface ResourceBrowserSource {
     id: string;
     type: ResourceBrowserPluginType;
 }
+export interface ResourceBrowserSourceWithPlugin extends ResourceBrowserSource {
+    plugin: ResourceBrowserPlugin;
+}
 export interface ResourceBrowserSourceWithConfig extends ResourceBrowserSource {
     configuration?: AuthenticationConfiguration;
 }
+export declare enum PluginLaunchModeType {
+    'Browse' = "browse",
+    'Search' = "search"
+}
+export type PluginLaunchMode = {
+    type: PluginLaunchModeType;
+    args?: ResourceBrowserSearchUIArgs | ResourceBrowserUIArgs;
+};
 export type ResourceBrowserUnresolvedResource = {
     sourceId: string;
     resourceId: string;
@@ -37,12 +48,28 @@ export type ResourceBrowserSelectedState = {
     label: string;
     description: Array<ReactElement>;
 };
-export type ResourceBrowserUIProps = {
+type ResourceBrowserProps = {
     source: ResourceBrowserSource;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
+    sources: ResourceBrowserSourceWithPlugin[];
     allowedTypes?: string[];
     headerPortal?: Element;
-    preselectedResource?: ResourceBrowserResource;
     onSelected: (resource: ResourceBrowserResource) => void;
+    searchEnabled: boolean;
+};
+export type ResourceBrowserUIArgs = {
+    preselectedResource?: ResourceBrowserResource;
+    browseTo?: ResourceBrowserUnresolvedResource;
+};
+export type ResourceBrowserUIProps = ResourceBrowserProps & ResourceBrowserUIArgs;
+export type ResourceBrowserSearchUIArgs = {
+    query?: string;
+};
+export type ResourceBrowserSearchUIProps = ResourceBrowserProps & ResourceBrowserSearchUIArgs;
+export type ResourceBrowserLauncherProps = {
+    source: ResourceBrowserSource;
+    onSearch: (query: string) => void;
+    onBrowse: (browseTo?: ResourceBrowserUnresolvedResource) => void;
 };
 export type useResolveResourceResponse = {
     data: ResourceBrowserResource | null;
@@ -56,10 +83,15 @@ export interface ResourceBrowserPlugin {
     /** Datasource type this plugin should be used for */
     type: ResourceBrowserPluginType;
     createHeaderPortal?: boolean;
-    /** React Functional Component to provde the UI to render to allow a user to select a resource to use */
+    /** React Functional Component to provde the UI to render to allow a user to browse for resource to use */
     sourceBrowserComponent: () => React.FunctionComponent<ResourceBrowserUIProps>;
+    /** React Functional Component to provde the UI to render to allow a user to search for resource to use */
+    sourceSearchComponent: () => React.FunctionComponent<ResourceBrowserSearchUIProps>;
+    /** React Functional Component to provde the sources launcher view */
+    renderResourceLauncher: () => React.FunctionComponent<ResourceBrowserLauncherProps>;
     /** 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;
 }
+export {};

package/lib/types.js

@@ -1,2 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export var PluginLaunchModeType;
+(function (PluginLaunchModeType) {
+    PluginLaunchModeType["Browse"] = "browse";
+    PluginLaunchModeType["Search"] = "search";
+})(PluginLaunchModeType || (PluginLaunchModeType = {}));

package/lib/utils/authUtils.js

@@ -1,25 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.refreshAccessToken = exports.logout = exports.setCookieValue = exports.getCookieValue = void 0;
-const getCookieValue = (name) => {
+export const getCookieValue = (name) => {
     const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
     return match ? match.pop() : null;
 };
-exports.getCookieValue = getCookieValue;
-const setCookieValue = (name, value) => {
+export const setCookieValue = (name, value) => {
     document.cookie = `${name}=${value}; Path=/;`;
 };
-exports.setCookieValue = setCookieValue;
-const logout = () => {
-    (0, exports.setCookieValue)('authToken', '');
-    (0, exports.setCookieValue)('refreshToken', '');
+export const logout = () => {
+    setCookieValue('authToken', '');
+    setCookieValue('refreshToken', '');
 };
-exports.logout = logout;
-const refreshAccessToken = async (authConfig) => {
+export const refreshAccessToken = async (authConfig) => {
     if (!authConfig) {
         throw new Error('No auth configuration available');
     }
-    const refreshToken = (0, exports.getCookieValue)('refreshToken');
+    const refreshToken = getCookieValue('refreshToken');
     if (!refreshToken) {
         throw new Error('You are not logged in');
     }
@@ -28,11 +22,10 @@ const refreshAccessToken = async (authConfig) => {
         credentials: 'include',
     });
     if (!response.ok) {
-        (0, exports.logout)();
+        logout();
         throw new Error('Failed to refresh token');
     }
     const data = await response.json();
-    (0, exports.setCookieValue)('authToken', data.access_token);
+    setCookieValue('authToken', data.access_token);
     return data.access_token;
 };
-exports.refreshAccessToken = refreshAccessToken;

package/lib-esm/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-esm/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-esm/Hooks/useAuth.d.ts

@@ -0,0 +1,7 @@
+import { AuthenticationConfiguration } from '../types';
+export declare const useAuth: (authConfig: AuthenticationConfiguration | undefined) => {
+    authToken: string | null;
+    isAuthenticated: boolean;
+    login: () => void;
+    refreshAccessToken: () => Promise<string>;
+};

package/lib-esm/Hooks/useAuth.js

@@ -0,0 +1,54 @@
+/* eslint-disable no-console */
+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 = useCallback(() => {
+        if (!authConfig?.redirectUrl && !authConfig?.authUrl && !authConfig?.scope) {
+            console.error('Auth config is misconfigured');
+            return;
+        }
+        const encodedRedirectUrl = encodeURIComponent(authConfig.redirectUrl);
+        const loginUrl = `${authConfig?.authUrl}?client_id=${authConfig?.clientId}&scope=${authConfig?.scope}&redirect_uri=${encodedRedirectUrl}&response_type=code&state=state`;
+        const popup = window.open(loginUrl, 'Login', 'width=600,height=600');
+        if (!popup) {
+            console.error('Popup failed to open');
+            return;
+        }
+        const checkPopup = setInterval(() => {
+            try {
+                if (getCookieValue('authToken') && getCookieValue('refreshToken')) {
+                    clearInterval(checkPopup);
+                    popup.close();
+                    setAuthToken(getCookieValue('authToken'));
+                    setIsAuthenticated(true);
+                }
+            }
+            catch (error) {
+                // Ignore cross-origin access errors
+            }
+            if (popup.closed) {
+                clearInterval(checkPopup);
+                console.error('Popup closed before authentication');
+            }
+        }, 1000); // Check every second
+    }, [authConfig]);
+    useEffect(() => {
+        refreshAccessToken().catch(() => {
+            setIsAuthenticated(false);
+        });
+    }, [authConfig, refreshAccessToken]);
+    return {
+        authToken,
+        isAuthenticated,
+        login: handleLogin,
+        refreshAccessToken,
+    };
+};

package/lib-esm/Hooks/useSelectedState.d.ts

@@ -0,0 +1,15 @@
+import { ResourceBrowserPlugin, ResourceBrowserResource } from '../types';
+type UseResourceProps = {
+    plugin: ResourceBrowserPlugin | null;
+    resource: ResourceBrowserResource | null;
+};
+/**
+ * Loads the selected state for the provided resource
+ */
+export declare const useSelectedState: ({ plugin, resource }: UseResourceProps) => {
+    data: import("../types").ResourceBrowserSelectedState | null;
+    error: Error | null;
+    isLoading: boolean;
+    reload: () => void;
+};
+export {};

package/lib-esm/Hooks/useSelectedState.js

@@ -0,0 +1,12 @@
+import { useAsync } from '@squiz/generic-browser-lib';
+/**
+ * Loads the selected state for the provided resource
+ */
+export const useSelectedState = ({ plugin, resource }) => {
+    // Find the resolver for this resource
+    const renderSelectedResource = resource && plugin?.renderSelectedResource;
+    return useAsync({
+        callback: () => (resource && renderSelectedResource ? renderSelectedResource(resource) : null),
+        defaultValue: null,
+    }, [resource]);
+};

package/lib-esm/Hooks/useSources.d.ts

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

package/lib-esm/Hooks/useSources.js

@@ -0,0 +1,44 @@
+import { useAsync } from '@squiz/generic-browser-lib';
+/**
+ * Loads and caches the source list when a component using the hook is mounted.
+ */
+export const useSources = ({ onRequestSources, plugins }) => {
+    const pluginsKey = plugins.reduce((acc, plugin) => acc + plugin.type, '');
+    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
+                    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);
+                });
+            });
+        },
+        defaultValue: [],
+    }, [onRequestSources, pluginsKey]);
+};

package/lib-esm/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-esm/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-esm/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-esm/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-esm/Icons/CircledLoopIcon.d.ts

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

package/lib-esm/Icons/CircledLoopIcon.js

@@ -0,0 +1,5 @@
+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" })));
+};

package/lib-esm/MainContainer/MainContainer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserResource, ResourceBrowserSourceWithPlugin, PluginLaunchMode } from '../types';
+interface MainContainerProps {
+    title: string;
+    titleAriaProps: DOMAttributes<FocusableElement>;
+    allowedTypes: string[] | undefined;
+    sources: ResourceBrowserSourceWithPlugin[];
+    selectedSource: ResourceBrowserSource | null;
+    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, pluginMode, searchEnabled, }: MainContainerProps): React.JSX.Element;
+export default MainContainer;

package/lib-esm/MainContainer/MainContainer.js

@@ -0,0 +1,43 @@
+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 = 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.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();
+                    } })),
+                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 }))));
+}
+export default MainContainer;

package/lib-esm/Plugin/Plugin.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+/**
+ *  This plugin component exsits to deal with React rules of Hooks stupidity.
+ *
+ *  For it to not freak out when we want to change from one plugin to another we have to render
+ *  something to the ReactDom for each plugin and 'activate' that component when that plugin
+ *  needs to render its UI etc.
+ */
+export type PluginRenderType = ResourceBrowserInputProps & {
+    render: boolean;
+};
+export declare const PluginRender: ({ render, ...props }: PluginRenderType) => React.JSX.Element;

package/lib-esm/Plugin/Plugin.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ResourceBrowserInput } from '../ResourceBrowserInput/ResourceBrowserInput';
+import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
+export const PluginRender = ({ render, ...props }) => {
+    if (render) {
+        return (React.createElement(AuthProvider, { authConfig: props.source },
+            React.createElement(ResourceBrowserInput, { ...props })));
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};