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

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

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

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

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

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

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

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

@@ -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;

package/lib-esm/ResourceLauncher/ResourceLauncher.js

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ResetButton } from '@squiz/generic-browser-lib';
+import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
+import { CircledLoopIcon } from '../../Icons/CircledLoopIcon';
+export const SelectedState = ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }) => {
+    const modalController = {
+        isOpen: isModalOpen,
+        onOpenChange: onModalStateChange,
+    };
+    const replaceAsset = (React.createElement(ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: React.createElement(CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
+    return (React.createElement(React.Fragment, null,
+        showThumbnail && resource.squizImage ? (React.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
+            React.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (React.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
+        React.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
+            label,
+            description),
+        React.createElement("div", { className: "flex" },
+            replaceAsset,
+            React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
+};

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

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

package/lib-esm/SourceDropdown/SourceDropdown.js

@@ -0,0 +1,46 @@
+import React, { useRef, useState } from 'react';
+import { Icon, uuid } from '@squiz/generic-browser-lib';
+import { useFocusWithin, useKeyboard } from 'react-aria';
+import { ArrowDownIcon } from '../Icons/ArrowDownIcon';
+export default function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
+    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", { ...focusWithinProps, ...keyboardProps, className: "relative w-full " },
+        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 bg-blue-100 hover:bg-blue-150" },
+            React.createElement("span", { className: "sr-only" }, "current source "),
+            React.createElement("div", { className: "truncate max-w-[200px] text-md font-semibold text-blue-400" }, selectedSource.name),
+            React.createElement(ArrowDownIcon, { "aria-hidden": true, className: "absolute right-2 fill-blue-300" })),
+        React.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+8px)] w-[100%] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll 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/SourceDropdownContainer/SourceDropdownContainer.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from 'react';
+export default function SourceDropdownContainer({ children, isCollapsed, onExpand, }: PropsWithChildren<{
+    isCollapsed: boolean;
+    onExpand: () => void;
+}>): React.JSX.Element;

package/lib-esm/SourceDropdownContainer/SourceDropdownContainer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AdsClickIcon } from '../Icons/AdsClickIcon';
+export default function SourceDropdownContainer({ children, isCollapsed, onExpand, }) {
+    return (React.createElement("div", { className: "inline-flex rounded-lg p-1 bg-blue-100 min-h-[44px]" },
+        isCollapsed && (React.createElement("button", { "aria-label": "Expand browse options", onClick: onExpand, className: "flex items-center" },
+            React.createElement(AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }))),
+        !isCollapsed && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "flex items-center pr-1" },
+                React.createElement(AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }),
+                React.createElement("span", { className: "sr-only" }, "Browse")),
+            children))));
+}

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

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

package/lib-esm/SourceList/SourceList.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Icon } from '@squiz/generic-browser-lib';
+function SourceList({ sources, onSourceSelect }) {
+    return (React.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-4.5 pr-4.5 pb-4.5 pt-3" },
+        React.createElement("div", { className: "text-md font-semibold" }, "Select an environment to use"),
+        React.createElement("ul", { tabIndex: -1, "aria-label": `environment list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
+            return (React.createElement("li", { key: index, className: "flex items-stretch relative" },
+                React.createElement("button", { onClick: () => {
+                        onSourceSelect(source);
+                    }, className: "w-full p-1 mt-3 bg-white border-1 border-grey-200 min-h-[64px] rounded-lg flex items-center text-md font-semibold" },
+                    React.createElement(Icon, { icon: source.type, className: "ml-4" }),
+                    React.createElement("span", { className: "line-clamp-2 text-left break-word ml-4" }, source.name || source.id),
+                    React.createElement(Icon, { icon: 'arrow-right', className: "absolute ml-1 right-4" }))));
+        }))));
+}
+export default SourceList;

package/lib-esm/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
+import { ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
+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 type ResourceBrowserProps = {
+    modalTitle: string;
+    allowedTypes?: string[];
+    isDisabled?: boolean;
+    value: ResourceBrowserUnresolvedResource | null;
+    onChange(resource: ResourceBrowserResource | null): void;
+    onClear?(): void;
+};
+export declare const ResourceBrowser: (props: ResourceBrowserProps) => React.JSX.Element;

package/lib-esm/index.js

@@ -0,0 +1,79 @@
+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] = 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 = useCallback((source, mode) => {
+        setSource(source);
+        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
+        if (value) {
+            // Search the sources for it matching against the value.source property
+            source = sources.find((source) => source.id === value?.sourceId) || null;
+            // If the source is null and we arent loading the sources
+            if (source === null && !isLoading) {
+                // Set an error as the passed in value's source wasnt returned by onRequestSources
+                setError(new Error('Unable to find resource source.'));
+            }
+        }
+        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]);
+    // 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]);
+    // 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]);
+    // 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.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,
+                    isLoading: false,
+                };
+            }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }),
+        plugins.map((thisPlugin) => {
+            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 }));
+        })));
+};

package/lib-esm/types.d.ts

@@ -0,0 +1,97 @@
+import React, { ReactElement } from 'react';
+import { SquizImageType } from '@squiz/dx-json-schema-lib';
+export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
+export type ResourceBrowserPluginType = 'dam' | 'matrix';
+export type AuthenticationConfiguration = {
+    authUrl: string;
+    redirectUrl: string;
+    clientId: string;
+    scope: string;
+};
+export interface ResourceBrowserSource {
+    name?: string;
+    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;
+};
+export type ResourceBrowserResource = {
+    id: string;
+    name: string;
+    url: string;
+    source: ResourceBrowserSource;
+    type: {
+        code: string;
+        name: string;
+    };
+    squizImage?: SquizImageType['__shape__'];
+};
+export type ResourceBrowserSelectedState = {
+    showThumbnail?: boolean;
+    icon?: ReactElement;
+    label: string;
+    description: Array<ReactElement>;
+};
+type ResourceBrowserProps = {
+    source: ResourceBrowserSource;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
+    sources: ResourceBrowserSourceWithPlugin[];
+    allowedTypes?: string[];
+    headerPortal?: Element;
+    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;
+    error: Error | null;
+    isLoading: boolean;
+};
+/**
+ * If you change this interface please update the example here: src/__mocks__/PluginExample.tsx
+ */
+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 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-esm/types.js

@@ -0,0 +1,5 @@
+export var PluginLaunchModeType;
+(function (PluginLaunchModeType) {
+    PluginLaunchModeType["Browse"] = "browse";
+    PluginLaunchModeType["Search"] = "search";
+})(PluginLaunchModeType || (PluginLaunchModeType = {}));

package/lib-esm/utils/authUtils.d.ts

@@ -0,0 +1,5 @@
+import { AuthenticationConfiguration } from '../types';
+export declare const getCookieValue: (name: string) => string | null;
+export declare const setCookieValue: (name: string, value: string) => void;
+export declare const logout: () => void;
+export declare const refreshAccessToken: (authConfig?: AuthenticationConfiguration) => Promise<string>;

package/lib-esm/utils/authUtils.js

@@ -0,0 +1,31 @@
+export const getCookieValue = (name) => {
+    const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
+    return match ? match.pop() : null;
+};
+export const setCookieValue = (name, value) => {
+    document.cookie = `${name}=${value}; Path=/;`;
+};
+export const logout = () => {
+    setCookieValue('authToken', '');
+    setCookieValue('refreshToken', '');
+};
+export const refreshAccessToken = async (authConfig) => {
+    if (!authConfig) {
+        throw new Error('No auth configuration available');
+    }
+    const refreshToken = getCookieValue('refreshToken');
+    if (!refreshToken) {
+        throw new Error('You are not logged in');
+    }
+    const response = await fetch(`${authConfig.redirectUrl}?grant_type=refresh_token&refresh_token=${refreshToken}`, {
+        method: 'GET',
+        credentials: 'include',
+    });
+    if (!response.ok) {
+        logout();
+        throw new Error('Failed to refresh token');
+    }
+    const data = await response.json();
+    setCookieValue('authToken', data.access_token);
+    return data.access_token;
+};