@squiz/resource-browser 3.0.1-pre-alpha.1 → 3.0.1-pre-alpha.2

package/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+// Dependencies from within the monorepo need to be configured in a special way, relates to:
+// https://github.com/vitejs/vite/issues/5668
+export default defineConfig({
+    optimizeDeps: {
+        include: ['@squiz/resource-browser-ui-lib'],
+    },
+    plugins: [
+        react({
+            babel: {
+                parserOpts: {
+                    plugins: ['decorators-legacy'],
+                },
+            },
+        }),
+    ],
+});

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

@@ -1,8 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,54 +0,0 @@
-/* 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

@@ -1,15 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/lib-esm/ResourceBrowserContext/AuthProvider.d.ts

@@ -1,16 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ResourceBrowserSource } from '../types';
-interface AuthContextProps {
-    authToken: string | null;
-    isAuthenticated: boolean;
-    login: () => void;
-    refreshAccessToken: () => Promise<any>;
-}
-export declare const AuthContext: React.Context<AuthContextProps | undefined>;
-export declare const useAuthContext: () => AuthContextProps;
-interface AuthProviderProps {
-    children: ReactNode;
-    authConfig?: ResourceBrowserSource | null;
-}
-export declare const AuthProvider: ({ children, authConfig }: AuthProviderProps) => React.JSX.Element;
-export {};

package/lib-esm/ResourceBrowserContext/AuthProvider.js

@@ -1,18 +0,0 @@
-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;
-};
-export const AuthProvider = ({ children, authConfig }) => {
-    const authConfiguration = authConfig;
-    const auth = useAuth(authConfiguration?.configuration);
-    if (!authConfiguration?.configuration) {
-        return React.createElement(React.Fragment, null, children);
-    }
-    return React.createElement(AuthContext.Provider, { value: auth }, children);
-};

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

@@ -1,15 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { OnRequestSources, ResourceBrowserPlugin } from '../types';
-export type ResourceBrowserContextProps = {
-    onRequestSources: OnRequestSources;
-    searchEnabled: boolean;
-    plugins: Array<ResourceBrowserPlugin>;
-};
-/**
- * @internal Direct usage of this object is discouraged. It will be privated in a future major version.
- * Please use ResourceBrowserContextProvider instead.
- */
-export declare const ResourceBrowserContext: React.Context<ResourceBrowserContextProps>;
-export declare const ResourceBrowserContextProvider: (props: PropsWithChildren<{
-    value: ResourceBrowserContextProps;
-}>) => React.JSX.Element;

package/lib-esm/ResourceBrowserContext/ResourceBrowserContext.js

@@ -1,26 +0,0 @@
-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.
- */
-export const ResourceBrowserContext = React.createContext({
-    onRequestSources: () => {
-        throw new Error('onRequestSources has not been configured.');
-    },
-    searchEnabled: false,
-    plugins: [],
-});
-export const ResourceBrowserContextProvider = (props) => {
-    const CACHE_DURATION = 30000; // 30 seconds
-    const { value: { onRequestSources, ...other }, children, } = props;
-    const cache = new ExpiryMap(CACHE_DURATION);
-    const memoized = useMemo(() => ({
-        onRequestSources: pMemoize(onRequestSources, {
-            cache,
-            cacheKey: () => 'onRequestSources',
-        }),
-    }), [onRequestSources]);
-    return React.createElement(ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
-};

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

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

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

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

@@ -1,8 +0,0 @@
-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;

package/lib-esm/ResourceLauncher/ResourceLauncher.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { PluginLaunchModeType } from '../types';
-function ResourceLauncher({ sources, onSourceSelect }) {
-    return (React.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
-        React.createElement("ul", { tabIndex: -1, "aria-label": `sources list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
-            const SourceLauncher = source.plugin.renderResourceLauncher();
-            return (React.createElement("li", { key: index, className: "flex items-stretch relative" },
-                React.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full` },
-                    React.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } }) }))));
-        }))));
-}
-export default ResourceLauncher;

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { DOMAttributes } from '@react-types/shared';
-import { ResourceBrowserResource, ResourceBrowserPlugin } from '../types';
-export type ResourcePickerProps = {
-    resource: ResourceBrowserResource | null;
-    plugin: ResourceBrowserPlugin | null;
-    allowedTypes: string[] | undefined;
-    error: Error | null;
-    isLoading: boolean;
-    isDisabled?: boolean;
-    children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
-    onClear: () => void;
-    isModalOpen: boolean;
-    onModalStateChange(isOpen: boolean): void;
-};
-export declare const ResourcePicker: ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }: ResourcePickerProps) => React.JSX.Element;

package/lib-esm/ResourcePicker/ResourcePicker.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
-import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
-import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
-import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
-import { ErrorState } from './States/Error';
-import { LoadingState } from './States/Loading';
-import { SelectedState } from './States/Selected';
-import { useSelectedState } from '../Hooks/useSelectedState';
-import clsx from 'clsx';
-export const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
-    const { data: selectedState, error, isLoading } = useSelectedState({ resource, plugin });
-    const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
-    const isEmpty = resource === null && !isExternalLoading && !externalError;
-    return (React.createElement("div", { className: clsx('resource-picker', isDisabled && 'resource-picker--disabled') },
-        isImagePicker ? (React.createElement(PhotoLibraryRoundedIcon, { "aria-hidden": true, className: "w-6 h-6" })) : (React.createElement(AdsClickRoundedIcon, { "aria-hidden": true, className: "w-6 h-6" })),
-        isEmpty ? (React.createElement(ModalTrigger, { overlayTriggerState: {
-                isOpen: isModalOpen,
-                onOpenChange: onModalStateChange,
-            }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: React.createElement(AddCircleOutlineRoundedIcon, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (React.createElement("div", { className: "resource-picker-info" },
-            React.createElement("div", { className: "resource-picker-info__layout" },
-                (isExternalLoading || isLoading) && React.createElement(LoadingState, null),
-                (externalError || error) && (React.createElement(ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),
-                !isExternalLoading && resource && selectedState && (React.createElement(SelectedState, { isModalOpen: isModalOpen, onModalStateChange: onModalStateChange, resource: resource, showThumbnail: selectedState?.showThumbnail || false, icon: selectedState?.icon, label: selectedState?.label, description: selectedState?.description, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
-};

package/lib-esm/ResourcePicker/States/Error.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type ErrorStateProps = {
-    error: Error;
-    isDisabled?: boolean;
-    onClear: () => void;
-};
-export declare const ErrorState: ({ error, isDisabled, onClear }: ErrorStateProps) => React.JSX.Element;

package/lib-esm/ResourcePicker/States/Error.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import { Icon, ResetButton } from '@squiz/generic-browser-lib';
-export const ErrorState = ({ error, isDisabled, onClear }) => (React.createElement(React.Fragment, null,
-    React.createElement(Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
-    React.createElement("div", { className: "text-red-300 w-full" }, error.message),
-    React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear })));

package/lib-esm/ResourcePicker/States/Loading.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const LoadingState: () => React.JSX.Element;

package/lib-esm/ResourcePicker/States/Loading.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Spinner } from '@squiz/generic-browser-lib';
-export const LoadingState = () => (React.createElement("div", { className: "col-start-2 col-end-2" },
-    React.createElement(Spinner, { label: "Loading selection", className: "m-2" })));

package/lib-esm/ResourcePicker/States/Selected.d.ts

@@ -1,15 +0,0 @@
-import React, { ReactElement } from 'react';
-import { ResourceBrowserResource } from '../../types';
-export type SelectedStateProps = {
-    resource: ResourceBrowserResource;
-    showThumbnail: boolean;
-    icon: ReactElement | undefined;
-    label: string;
-    description: Array<ReactElement>;
-    isDisabled?: boolean;
-    onClear: () => void;
-    resourcePickerContainer: any;
-    isModalOpen?: boolean;
-    onModalStateChange?(isOpen: boolean): void;
-};
-export declare const SelectedState: ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }: SelectedStateProps) => React.JSX.Element;