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

package/lib/BrowseToSource/BrowseToSource.js

@@ -1,20 +1,45 @@
-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);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const react_aria_1 = require("react-aria");
+const AdsClickIcon_1 = require("../Icons/AdsClickIcon");
+const ArrowDownIcon_1 = require("../Icons/ArrowDownIcon");
+function BrowseToSource({ sources, selectedSource, onSourceSelect, className = '', }) {
+    const [uniqueId] = (0, react_1.useState)((0, generic_browser_lib_1.uuid)());
+    const buttonRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     // Watch the focus and blur on the menu and close if focus leaves the control
-    const { focusWithinProps } = useFocusWithin({
+    const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({
         onBlurWithin: () => {
             setIsOpen(false);
         },
     });
     // Listen for Esc key within this element
-    const { keyboardProps } = useKeyboard({
+    const { keyboardProps } = (0, react_aria_1.useKeyboard)({
         onKeyDown: (e) => {
             if (isOpen && e.key === 'Escape') {
                 setIsOpen(false);
@@ -28,23 +53,24 @@ export default function BrowseToSource({ sources, selectedSource, onSourceSelect
         onSourceSelect(source);
     };
     if (!sources.length) {
-        return React.createElement(React.Fragment, null);
+        return react_1.default.createElement(react_1.default.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) => {
+    return (react_1.default.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_1.default.createElement(AdsClickIcon_1.AdsClickIcon, { "aria-hidden": true, className: "ml-1 mr-2 shrink-0" }),
+        sources.length > 1 && (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: `relative w-full ${isOpen && 'border-l border-gray-400 pl-1 '}` },
+            react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "text-gray-700 text-md leading-5 mr-2" }, "Browse to ..."),
+                react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { "aria-hidden": true, className: "absolute right-3" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(AdsClickIcon_1.AdsClickIcon, { "aria-hidden": true, className: "ml-[6px] mr-2" }),
+                react_1.default.createElement("span", { className: "text-gray-700 text-md font-semibold leading-5 mr-[6px]" }, "Browse")))),
+            react_1.default.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" })))));
+                return (react_1.default.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
+                    react_1.default.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_1.default.createElement(generic_browser_lib_1.Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
+                        react_1.default.createElement("span", { className: "text-left mr-7" }, name),
+                        isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
             }))))));
 }
+exports.default = BrowseToSource;

package/lib/Hooks/useAuth.js

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

package/lib/Hooks/useSelectedState.js

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

package/lib/Hooks/useSources.js

@@ -1,10 +1,13 @@
-import { useAsync } from '@squiz/generic-browser-lib';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSources = void 0;
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 /**
  * Loads and caches the source list when a component using the hook is mounted.
  */
-export const useSources = ({ onRequestSources, plugins }) => {
+const useSources = ({ onRequestSources, plugins }) => {
     const pluginsKey = plugins.reduce((acc, plugin) => acc + plugin.type, '');
-    return useAsync({
+    return (0, generic_browser_lib_1.useAsync)({
         callback: () => {
             return new Promise((resolve, reject) => {
                 // Get all the sources from the outer context
@@ -42,3 +45,4 @@ export const useSources = ({ onRequestSources, plugins }) => {
         defaultValue: [],
     }, [onRequestSources, pluginsKey]);
 };
+exports.useSources = useSources;

package/lib/Icons/AdsClickIcon.js

@@ -1,5 +1,12 @@
-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" })));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdsClickIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const AdsClickIcon = (props) => {
+    return (react_1.default.createElement("svg", { fill: "#4f4f4f", height: "24", width: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.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" })));
+};
+exports.AdsClickIcon = AdsClickIcon;

package/lib/Icons/ArrowDownIcon.js

@@ -1,5 +1,12 @@
-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" })));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowDownIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const ArrowDownIcon = (props) => {
+    return (react_1.default.createElement("svg", { fill: "#4f4f4f", height: "25", width: "24", viewBox: "0 0 24 25", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.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" })));
+};
+exports.ArrowDownIcon = ArrowDownIcon;

package/lib/Icons/CircledLoopIcon.js

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

package/lib/MainContainer/MainContainer.js

@@ -1,43 +1,71 @@
-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';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const SourceList_1 = __importDefault(require("../SourceList/SourceList"));
+const ResourceLauncher_1 = __importDefault(require("../ResourceLauncher/ResourceLauncher"));
+const SourceDropdownContainer_1 = __importDefault(require("../SourceDropdownContainer/SourceDropdownContainer"));
+const SourceDropdown_1 = __importDefault(require("../SourceDropdown/SourceDropdown"));
+const types_1 = require("../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 [headerPortal, setHeaderPortal] = (0, react_1.useState)(null);
+    const pluginToRender = pluginMode ? pluginMode.type : types_1.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) => {
+    const setHeaderPortalRef = (0, react_1.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) => {
+    return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
+        react_1.default.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
+            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
+            plugin && selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
+                plugin.createHeaderPortal && react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin" }),
+                !plugin.createHeaderPortal && sources.length > 1 && (react_1.default.createElement(SourceDropdownContainer_1.default, { isCollapsed: false, onExpand: () => { } },
+                    react_1.default.createElement("div", { className: `border-l border-blue-200 pl-1 w-[204px]` },
+                        react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect })))))),
+            react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
+                react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
+        react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
+            plugin && selectedSource && (react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${pluginMode?.type}` },
+                pluginToRender === types_1.PluginLaunchModeType.Browse && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, preselectedResource: preselectedResource || undefined, browseTo: pluginMode?.args?.browseTo, onSelected: (resource) => {
                         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) => {
+                pluginToRender === types_1.PluginLaunchModeType.Search && SourceSearch && (react_1.default.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 }))));
+            !selectedSource && searchEnabled && react_1.default.createElement(ResourceLauncher_1.default, { sources: sources, onSourceSelect: onSourceSelect }),
+            !selectedSource && !searchEnabled && react_1.default.createElement(SourceList_1.default, { sources: sources, onSourceSelect: onSourceSelect }))));
 }
-export default MainContainer;
+exports.default = MainContainer;

package/lib/Plugin/Plugin.js

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

package/lib/ResourceBrowserContext/AuthProvider.js

@@ -1,18 +1,46 @@
-import React, { createContext, useContext } from 'react';
-import { useAuth } from '../Hooks/useAuth';
-export const AuthContext = createContext(undefined);
-export const useAuthContext = () => {
-    const context = useContext(AuthContext);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthProvider = exports.useAuthContext = exports.AuthContext = void 0;
+const react_1 = __importStar(require("react"));
+const useAuth_1 = require("../Hooks/useAuth");
+exports.AuthContext = (0, react_1.createContext)(undefined);
+const useAuthContext = () => {
+    const context = (0, react_1.useContext)(exports.AuthContext);
     if (!context) {
         throw new Error('useAuthContext must be used within an AuthProvider');
     }
     return context;
 };
-export const AuthProvider = ({ children, authConfig }) => {
+exports.useAuthContext = useAuthContext;
+const AuthProvider = ({ children, authConfig }) => {
     const authConfiguration = authConfig;
-    const auth = useAuth(authConfiguration?.configuration);
+    const auth = (0, useAuth_1.useAuth)(authConfiguration?.configuration);
     if (!authConfiguration?.configuration) {
-        return React.createElement(React.Fragment, null, children);
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    return React.createElement(AuthContext.Provider, { value: auth }, children);
+    return react_1.default.createElement(exports.AuthContext.Provider, { value: auth }, children);
 };
+exports.AuthProvider = AuthProvider;

package/lib/ResourceBrowserContext/ResourceBrowserContext.js

@@ -1,26 +1,56 @@
-import React, { useMemo } from 'react';
-import pMemoize from 'p-memoize';
-import ExpiryMap from 'expiry-map';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
+const react_1 = __importStar(require("react"));
+const p_memoize_1 = __importDefault(require("p-memoize"));
+const expiry_map_1 = __importDefault(require("expiry-map"));
 /**
  * @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({
+exports.ResourceBrowserContext = react_1.default.createContext({
     onRequestSources: () => {
         throw new Error('onRequestSources has not been configured.');
     },
     searchEnabled: false,
     plugins: [],
 });
-export const ResourceBrowserContextProvider = (props) => {
+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, {
+    const cache = new expiry_map_1.default(CACHE_DURATION);
+    const memoized = (0, react_1.useMemo)(() => ({
+        onRequestSources: (0, p_memoize_1.default)(onRequestSources, {
             cache,
             cacheKey: () => 'onRequestSources',
         }),
     }), [onRequestSources]);
-    return React.createElement(ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
+    return react_1.default.createElement(exports.ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
 };
+exports.ResourceBrowserContextProvider = ResourceBrowserContextProvider;

package/lib/ResourceBrowserInput/ResourceBrowserInput.js

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

package/lib/ResourceLauncher/ResourceLauncher.js

@@ -1,11 +1,17 @@
-import React from 'react';
-import { PluginLaunchModeType } from '../types';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../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) => {
+    return (react_1.default.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_1.default.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(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } }) })));
+            return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
+                react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full` },
+                    react_1.default.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Browse, args: { browseTo } }) }))));
         }))));
 }
-export default ResourceLauncher;
+exports.default = ResourceLauncher;

package/lib/ResourcePicker/ResourcePicker.js

@@ -1,25 +1,32 @@
-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 });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourcePicker = void 0;
+const react_1 = __importDefault(require("react"));
+const AdsClickRounded_1 = __importDefault(require("@mui/icons-material/AdsClickRounded"));
+const AddCircleOutlineRounded_1 = __importDefault(require("@mui/icons-material/AddCircleOutlineRounded"));
+const PhotoLibraryRounded_1 = __importDefault(require("@mui/icons-material/PhotoLibraryRounded"));
+const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
+const Error_1 = require("./States/Error");
+const Loading_1 = require("./States/Loading");
+const Selected_1 = require("./States/Selected");
+const useSelectedState_1 = require("../Hooks/useSelectedState");
+const clsx_1 = __importDefault(require("clsx"));
+const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
+    const { data: selectedState, error, isLoading } = (0, useSelectedState_1.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: {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'resource-picker--disabled') },
+        isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
+        isEmpty ? (react_1.default.createElement(resource_browser_ui_lib_1.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 })))))));
+            }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
+            react_1.default.createElement("div", { className: "resource-picker-info__layout" },
+                (isExternalLoading || isLoading) && react_1.default.createElement(Loading_1.LoadingState, null),
+                (externalError || error) && (react_1.default.createElement(Error_1.ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),
+                !isExternalLoading && resource && selectedState && (react_1.default.createElement(Selected_1.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 })))))));
 };
+exports.ResourcePicker = ResourcePicker;

package/lib/ResourcePicker/States/Error.js

@@ -1,6 +1,13 @@
-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 })));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorState = void 0;
+const react_1 = __importDefault(require("react"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const ErrorState = ({ error, isDisabled, onClear }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
+    react_1.default.createElement("div", { className: "text-red-300 w-full" }, error.message),
+    react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
+exports.ErrorState = ErrorState;

package/lib/ResourcePicker/States/Loading.js

@@ -1,4 +1,11 @@
-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" })));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingState = void 0;
+const react_1 = __importDefault(require("react"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const LoadingState = () => (react_1.default.createElement("div", { className: "col-start-2 col-end-2" },
+    react_1.default.createElement(generic_browser_lib_1.Spinner, { label: "Loading selection", className: "m-2" })));
+exports.LoadingState = LoadingState;

package/lib/ResourcePicker/States/Selected.js

@@ -1,20 +1,27 @@
-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, }) => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedState = void 0;
+const react_1 = __importDefault(require("react"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
+const CircledLoopIcon_1 = require("../../Icons/CircledLoopIcon");
+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" },
+    const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.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_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        showThumbnail && resource.squizImage ? (react_1.default.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
+            react_1.default.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_1.default.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
+        react_1.default.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
             label,
             description),
-        React.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "flex" },
             replaceAsset,
-            React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
+            react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
 };
+exports.SelectedState = SelectedState;

package/lib/SourceDropdown/SourceDropdown.js

@@ -1,19 +1,44 @@
-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);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const react_aria_1 = require("react-aria");
+const ArrowDownIcon_1 = require("../Icons/ArrowDownIcon");
+function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
+    const [uniqueId] = (0, react_1.useState)((0, generic_browser_lib_1.uuid)());
+    const buttonRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     // Watch the focus and blur on the menu and close if focus leaves the control
-    const { focusWithinProps } = useFocusWithin({
+    const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({
         onBlurWithin: () => {
             setIsOpen(false);
         },
     });
     // Listen for Esc key within this element
-    const { keyboardProps } = useKeyboard({
+    const { keyboardProps } = (0, react_aria_1.useKeyboard)({
         onKeyDown: (e) => {
             if (isOpen && e.key === 'Escape') {
                 setIsOpen(false);
@@ -27,20 +52,21 @@ export default function SourceDropdown({ sources, selectedSource, onSourceSelect
         onSourceSelect(source);
     };
     if (!sources.length) {
-        return React.createElement(React.Fragment, null);
+        return react_1.default.createElement(react_1.default.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) => {
+    return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-full " },
+        react_1.default.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_1.default.createElement("span", { className: "sr-only" }, "current source "),
+            react_1.default.createElement("div", { className: "truncate max-w-[200px] text-md font-semibold text-blue-400" }, selectedSource.name),
+            react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { "aria-hidden": true, className: "absolute right-2 fill-blue-300" })),
+        react_1.default.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" })))));
+            return (react_1.default.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
+                react_1.default.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_1.default.createElement(generic_browser_lib_1.Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
+                    react_1.default.createElement("span", { className: "text-left mr-7" }, name),
+                    isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
         }))));
 }
+exports.default = SourceDropdown;

package/lib/SourceDropdownContainer/SourceDropdownContainer.js

@@ -1,12 +1,18 @@
-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")),
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const AdsClickIcon_1 = require("../Icons/AdsClickIcon");
+function SourceDropdownContainer({ children, isCollapsed, onExpand, }) {
+    return (react_1.default.createElement("div", { className: "inline-flex rounded-lg p-1 bg-blue-100 min-h-[44px]" },
+        isCollapsed && (react_1.default.createElement("button", { "aria-label": "Expand browse options", onClick: onExpand, className: "flex items-center" },
+            react_1.default.createElement(AdsClickIcon_1.AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }))),
+        !isCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "flex items-center pr-1" },
+                react_1.default.createElement(AdsClickIcon_1.AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }),
+                react_1.default.createElement("span", { className: "sr-only" }, "Browse")),
             children))));
 }
+exports.default = SourceDropdownContainer;

package/lib/SourceList/SourceList.js

@@ -1,16 +1,21 @@
-import React from 'react';
-import { Icon } from '@squiz/generic-browser-lib';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const generic_browser_lib_1 = require("@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: () => {
+    return (react_1.default.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_1.default.createElement("div", { className: "text-md font-semibold" }, "Select an environment to use"),
+        react_1.default.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_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
+                react_1.default.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" }))));
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: source.type, className: "ml-4" }),
+                    react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word ml-4" }, source.name || source.id),
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'arrow-right', className: "absolute ml-1 right-4" }))));
         }))));
 }
-export default SourceList;
+exports.default = SourceList;

package/lib/index.js

@@ -1,29 +1,68 @@
-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) => {
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowser = exports.SourceDropdownContainer = exports.SourceDropdown = exports.BrowseToSource = 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; } });
+const BrowseToSource_1 = __importDefault(require("./BrowseToSource/BrowseToSource"));
+exports.BrowseToSource = BrowseToSource_1.default;
+const SourceDropdown_1 = __importDefault(require("./SourceDropdown/SourceDropdown"));
+exports.SourceDropdown = SourceDropdown_1.default;
+const SourceDropdownContainer_1 = __importDefault(require("./SourceDropdownContainer/SourceDropdownContainer"));
+exports.SourceDropdownContainer = SourceDropdownContainer_1.default;
+__exportStar(require("./types"), exports);
+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);
+    const [error, setError] = (0, react_1.useState)(null);
+    const { onRequestSources, searchEnabled, 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 [mode, setMode] = (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);
     // 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) => {
+    const handleSourceSelect = (0, react_1.useCallback)((source, mode) => {
         setSource(source);
         setMode(mode || null);
     }, [setSource, setMode]);
     // If an existing resource is passed in auto select its source
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let source = null;
         setError(null);
         // If there is a provided value try to use its source
@@ -45,7 +84,7 @@ export const ResourceBrowser = (props) => {
     }, [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(() => {
+    (0, react_1.useEffect)(() => {
         if (source?.plugin) {
             setPlugin(source.plugin);
         }
@@ -54,19 +93,19 @@ export const ResourceBrowser = (props) => {
         }
     }, [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) => {
+    const handleModalStateChange = (0, react_1.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(() => {
+    (0, react_1.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 (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, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
                 return {
                     data: null,
                     error: null,
@@ -74,6 +113,7 @@ export const ResourceBrowser = (props) => {
                 };
             }, 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 }));
+            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, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
         })));
 };
+exports.ResourceBrowser = ResourceBrowser;

package/lib/types.js

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

package/lib/utils/authUtils.js

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

package/lib-esm/ResourceLauncher/ResourceLauncher.js

@@ -5,7 +5,8 @@ function ResourceLauncher({ sources, onSourceSelect }) {
         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(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } }) })));
+                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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.0.0-pre-alpha.0",
+    "version": "3.0.1-pre-alpha.1",
     "types": "lib/index.d.ts",
     "files": [
         "lib/*",

package/src/ResourceLauncher/ResourceLauncher.tsx

@@ -15,11 +15,15 @@ function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps) {
 
                     return (
                         <li key={index} className="flex items-stretch relative">
-                            <SourceLauncher
-                                source={source}
-                                onSearch={(query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } })}
-                                onBrowse={(browseTo) => onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } })}
-                            />
+                            <div className={`squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full`}>
+                                <SourceLauncher
+                                    source={source}
+                                    onSearch={(query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } })}
+                                    onBrowse={(browseTo) =>
+                                        onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } })
+                                    }
+                                />
+                            </div>
                         </li>
                     );
                 })}