@squiz/resource-browser 1.68.1 → 1.69.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @squiz/resource-browser
 
+## 1.69.1
+
+### Patch Changes
+
+- 5cd6ef6: Updated logic & handling of recent locations in resource browser
+
+## 1.69.0
+
+### Minor Changes
+
+- b642152: updates to source list node selection
+
 ## 1.68.1
 
 ### Patch Changes

package/lib/Hooks/usePreselectedResourcePath.js

@@ -14,9 +14,14 @@ const usePreselectedResourcePath = ({ sourceId, resource, onRequestResource, onR
             }
             if (sourceId && source && resource) {
                 const bestMatchLineage = (0, findBestMatchLineage_1.findBestMatchLineage)(source, resource);
-                path = await Promise.all(bestMatchLineage.map(async (resourceId) => {
-                    return onRequestResource({ source: sourceId, resource: resourceId });
-                }));
+                if (Array.isArray(bestMatchLineage) && bestMatchLineage.length > 0) {
+                    path = await Promise.all(bestMatchLineage.map(async (resourceId) => {
+                        return onRequestResource({ source: sourceId, resource: resourceId });
+                    }));
+                }
+                else {
+                    path = [resource];
+                }
             }
             return { source, path };
         },

package/lib/Hooks/useRecentLocations.d.ts

@@ -1,10 +1,5 @@
-import { Resource, Source } from '../types';
-export interface RecentLocation {
-    rootNode: Resource | null;
-    source: Source;
-    path: Array<Resource>;
-}
+import { ResourceReference } from '../types';
 export declare const useRecentLocations: (maxLocations?: number, storageKey?: string) => {
-    recentLocations: RecentLocation[];
-    addRecentLocation: (newLocation: RecentLocation) => void;
+    recentLocations: ResourceReference[];
+    addRecentLocation: (newLocation: ResourceReference) => void;
 };

package/lib/Hooks/useRecentLocations.js

@@ -14,10 +14,14 @@ const useRecentLocations = (maxLocations = 3, storageKey = 'rb_recent_locations'
     if (!Array.isArray(initialRecentLocations)) {
         initialRecentLocations = [];
     }
+    // Check if any item in the current recent locations is not the right format, if so, we reset it
+    if (initialRecentLocations.find((item) => !(item?.resource?.length && item?.source?.length))) {
+        initialRecentLocations = [];
+    }
     const [recentLocations, setRecentLocations] = (0, react_1.useState)(initialRecentLocations);
     const addRecentLocation = (newLocation) => {
         // Check if the new location to make sure we don't already have a recent location for this
-        if (JSON.stringify(recentLocations).indexOf(JSON.stringify(newLocation)) > -1) {
+        if (recentLocations.find((item) => item.resource === newLocation.resource && item.source === newLocation.source)) {
             return;
         }
         const updatedLocations = [newLocation, ...recentLocations.slice(0, maxLocations - 1)];

package/lib/Hooks/useRecentResourcesPaths.d.ts

@@ -0,0 +1,20 @@
+import { Resource, OnRequestResource, OnRequestSources, Source } from '../types';
+export type RecentResourcesPathsProps = {
+    sourceIds?: string[];
+    resources?: Resource | null | (Resource | null)[];
+    onRequestResource: OnRequestResource;
+    onRequestSources: OnRequestSources;
+};
+export type RecentResourcesPaths = {
+    source?: Source;
+    path?: Resource[];
+};
+export declare const useRecentResourcesPaths: ({ sourceIds, resources, onRequestResource, onRequestSources, }: RecentResourcesPathsProps) => {
+    data: RecentResourcesPaths[] | {
+        source: Source | undefined;
+        path: Resource[] | undefined;
+    } | null;
+    error: Error | null;
+    isLoading: boolean;
+    reload: () => void;
+};

package/lib/Hooks/useRecentResourcesPaths.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRecentResourcesPaths = void 0;
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const findBestMatchLineage_1 = require("../utils/findBestMatchLineage");
+const useRecentResourcesPaths = ({ sourceIds, resources, onRequestResource, onRequestSources, }) => {
+    const callbackArray = sourceIds?.map((sourceId, index) => async () => {
+        let path;
+        const sources = await onRequestSources();
+        const source = sources.find((source) => source.id === sourceId);
+        const resource = Array.isArray(resources) ? resources[index] : null;
+        if (sourceId && source && resource) {
+            const bestMatchLineage = (0, findBestMatchLineage_1.findBestMatchLineage)(source, resource);
+            if (Array.isArray(bestMatchLineage) && bestMatchLineage.length > 0) {
+                path = await Promise.all(bestMatchLineage.map(async (resourceId) => {
+                    return onRequestResource({ source: sourceId, resource: resourceId });
+                }));
+            }
+            else {
+                path = [resource];
+            }
+        }
+        return { source, path };
+    });
+    return (0, generic_browser_lib_1.useAsync)({
+        callback: callbackArray ? callbackArray : () => null,
+        defaultValue: [],
+    }, [JSON.stringify(sourceIds), resources]);
+};
+exports.useRecentResourcesPaths = useRecentResourcesPaths;

package/lib/Hooks/useResource.d.ts

@@ -3,6 +3,10 @@ type UseResourceProps = {
     onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
     reference?: ResourceReference | null;
 };
+type UseResourcesProps = {
+    onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
+    references?: ResourceReference[] | null;
+};
 /**
  * Loads the resource indicated by the provided reference.
  */
@@ -12,4 +16,13 @@ export declare const useResource: ({ onRequestResource, reference }: UseResource
     isLoading: boolean;
     reload: () => void;
 };
+/**
+ * Loads the resources indicated by the provided reference.
+ */
+export declare const useResources: ({ onRequestResource, references }: UseResourcesProps) => {
+    data: Resource | null;
+    error: Error | null;
+    isLoading: boolean;
+    reload: () => void;
+};
 export {};

package/lib/Hooks/useResource.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResource = void 0;
+exports.useResources = exports.useResource = void 0;
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 /**
  * Loads the resource indicated by the provided reference.
@@ -10,3 +10,14 @@ const useResource = ({ onRequestResource, reference }) => (0, generic_browser_li
     defaultValue: null,
 }, [reference?.source, reference?.resource]);
 exports.useResource = useResource;
+/**
+ * Loads the resources indicated by the provided reference.
+ */
+const useResources = ({ onRequestResource, references }) => {
+    const callbackArray = references?.map((item) => () => onRequestResource(item));
+    return (0, generic_browser_lib_1.useAsync)({
+        callback: callbackArray ? callbackArray : () => null,
+        defaultValue: null,
+    }, []);
+};
+exports.useResources = useResources;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -38,12 +38,30 @@ const useChildResources_1 = require("../Hooks/useChildResources");
 const useSources_1 = require("../Hooks/useSources");
 const usePreselectedResourcePath_1 = require("../Hooks/usePreselectedResourcePath");
 const useRecentLocations_1 = require("../Hooks/useRecentLocations");
+const useResource_1 = require("../Hooks/useResource");
+const useRecentResourcesPaths_1 = require("../Hooks/useRecentResourcesPaths");
 function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestResource, onRequestChildren, onChange, onClose, preselectedSourceId, preselectedResource, }) {
     const previewModalState = (0, react_stately_1.useOverlayTriggerState)({});
+    const [selectedSource, setSelectedSource] = (0, react_1.useState)(null);
     const [selectedResourceId, setSelectedResourceId] = (0, react_1.useState)(null);
     const [previewModalOverlayProps, setPreviewModalOverlayProps] = (0, react_1.useState)({});
     const { source, currentResource, hierarchy, setSource, push, popUntil } = (0, useResourcePath_1.useResourcePath)();
-    const { addRecentLocation } = (0, useRecentLocations_1.useRecentLocations)();
+    // Recent locations relevant data
+    const { addRecentLocation, recentLocations } = (0, useRecentLocations_1.useRecentLocations)();
+    const { data: recentLocationsResources, isLoading: recentLocationsResourcesLoading } = (0, useResource_1.useResources)({
+        onRequestResource,
+        references: recentLocations,
+    });
+    const { data: recentLocationsSources, isLoading: recentLocationsLoading } = (0, useRecentResourcesPaths_1.useRecentResourcesPaths)({
+        sourceIds: recentLocations.map((item) => item.source),
+        resources: recentLocationsResources,
+        onRequestResource,
+        onRequestSources,
+    });
+    // Type check the returned values from recent locations requests
+    let recentSources = [];
+    if (Array.isArray(recentLocationsSources))
+        recentSources = recentLocationsSources;
     const { data: sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, useSources_1.useSources)({ onRequestSources });
     const { data: resources, isLoading: isResourcesLoading, reload: handleResourceReload, error: resourceError, } = (0, useChildResources_1.useChildResources)({ source, currentResource, onRequestChildren });
     const { data: { source: preselectedSource, path: preselectedPath }, isLoading: isPreselectedResourcePathLoading, } = (0, usePreselectedResourcePath_1.usePreselectedResourcePath)({
@@ -52,43 +70,59 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
         onRequestResource,
         onRequestSources,
     });
-    const selectedResource = (0, react_1.useMemo)(() => resources.find((resource) => resource.id === selectedResourceId) || null, [selectedResourceId, resources]);
+    const selectedResource = (0, react_1.useMemo)(() => {
+        if (selectedSource) {
+            return selectedSource?.nodes.find((resource) => resource.id === selectedResourceId) || null;
+        }
+        return resources.find((resource) => resource.id === selectedResourceId) || null;
+    }, [selectedResourceId, resources, selectedSource]);
     const handleResourceDrillDown = (0, react_1.useCallback)((resource) => {
         push(resource);
     }, [push]);
     const handleResourceSelected = (0, react_1.useCallback)((resource, overlayProps) => {
         setPreviewModalOverlayProps(overlayProps);
+        setSelectedSource(null);
         setSelectedResourceId(resource.id);
     }, []);
     const handleSourceDrilldown = (0, react_1.useCallback)((source) => {
+        setSelectedSource(null);
+        setSelectedResourceId(null);
         setSource(source);
     }, [setSource]);
+    const handleSourceSelected = (0, react_1.useCallback)((node, overlayProps) => {
+        const { source, resource } = node;
+        setPreviewModalOverlayProps(overlayProps);
+        setSelectedSource(source || null);
+        setSelectedResourceId(resource?.id || null);
+    }, []);
     const handleReturnToRoot = (0, react_1.useCallback)(() => {
+        setSelectedSource(null);
+        setSelectedResourceId(null);
         setSource(null);
     }, [setSource]);
     const handleDetailSelect = (0, react_1.useCallback)((resource) => {
-        onChange({ resource, source: source?.source });
+        const detailSelectedSource = selectedSource ?? source?.source;
+        onChange({ resource, source: detailSelectedSource });
         // Find the path that got them to where they are
-        const selectedPath = hierarchy.map((path) => {
-            const pathNode = path.node;
-            return 'resource' in pathNode ? pathNode.resource : pathNode;
-        });
-        const [rootNode, ...path] = selectedPath;
-        // Update the recent locations in local storage
-        addRecentLocation({
-            rootNode,
-            path: path,
-            source: source?.source,
-        });
+        const lastPathItem = hierarchy[hierarchy.length - 1]?.node;
+        const lastPathResource = lastPathItem && 'resource' in lastPathItem ? lastPathItem?.resource : lastPathItem;
+        if (lastPathResource) {
+            addRecentLocation({
+                resource: lastPathResource.id,
+                source: detailSelectedSource.id,
+            });
+        }
         onClose();
-    }, [source, currentResource]);
+    }, [selectedSource, source, currentResource]);
     const handleDetailClose = (0, react_1.useCallback)(() => {
+        setSelectedSource(null);
         setSelectedResourceId(null);
     }, []);
     // Clear the selected resource if it no longer exists in the list of resources
     // (eg. due to navigating up/down the tree).
     (0, react_1.useEffect)(() => {
         if (resources.length > 0 && selectedResourceId && !selectedResource) {
+            setSelectedSource(null);
             setSelectedResourceId(null);
         }
     }, [resources, selectedResourceId, selectedResource]);
@@ -96,20 +130,24 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
         if (preselectedSource && preselectedPath?.length) {
             const [rootNode, ...path] = preselectedPath;
             const leaf = path.pop();
-            setSource({
-                source: preselectedSource,
-                resource: rootNode,
-            }, path);
             if (leaf) {
+                setSource({
+                    source: preselectedSource,
+                    resource: rootNode,
+                }, path);
                 setSelectedResourceId(leaf.id);
             }
+            else {
+                setSelectedSource(preselectedSource);
+                setSelectedResourceId(rootNode.id);
+            }
         }
     }, [preselectedSource, preselectedSource]);
     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 p-4.5" },
             react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
             react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
-                react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: source, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, onRootSelect: handleReturnToRoot, setSource: setSource, currentResource: currentResource })),
+                react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: source, isLoading: isSourceLoading || recentLocationsLoading || recentLocationsResourcesLoading, onSourceSelect: handleSourceDrilldown, onRootSelect: handleReturnToRoot, setSource: setSource, currentResource: currentResource, recentSources: recentSources })),
             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" })))),
@@ -117,7 +155,10 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
             react_1.default.createElement("div", { className: "overflow-y-scroll flex-1 grow-[3] border-r border-gray-300" },
                 react_1.default.createElement("h3", { className: "sr-only" }, "Resource List"),
                 hierarchy.length > 0 && (react_1.default.createElement(ResourceBreadcrumb_1.default, { hierarchy: hierarchy, onBreadcrumbSelect: popUntil, onReturnToRoot: handleReturnToRoot })),
-                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading || isPreselectedResourcePathLoading, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, setSource: setSource, error: sourceError })),
+                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, selectedResource: selectedResource, previewModalState: previewModalState, isLoading: isSourceLoading ||
+                        isPreselectedResourcePathLoading ||
+                        recentLocationsLoading ||
+                        recentLocationsResourcesLoading, onSourceSelect: handleSourceSelected, onSourceDrilldown: handleSourceDrilldown, handleReload: handleSourceReload, setSource: setSource, recentSources: recentSources, error: sourceError })),
                 source && (react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, selectedResource: selectedResource, isLoading: isResourcesLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes, handleReturnToRoot: handleReturnToRoot, handleReload: handleResourceReload, error: resourceError }))),
             react_1.default.createElement("div", { className: "sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white" },
                 react_1.default.createElement(PreviewPanel_1.default, { resource: isResourcesLoading ? null : selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose })))));

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Source, ScopedSource, Resource } from '../types';
-export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, setSource, currentResource, }: {
+import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
+export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, setSource, currentResource, recentSources, }: {
     sources: Source[];
     selectedSource: ScopedSource | null;
     isLoading: boolean;
@@ -8,4 +9,5 @@ export default function SourceDropdown({ sources, selectedSource, isLoading, onR
     onSourceSelect: (source: ScopedSource) => void;
     setSource: (source: ScopedSource | null, path?: Resource[]) => void;
     currentResource: Resource | null;
+    recentSources: RecentResourcesPaths[];
 }): React.JSX.Element;

package/lib/SourceDropdown/SourceDropdown.js

@@ -31,11 +31,10 @@ const interactions_1 = require("@react-aria/interactions");
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const uuid_1 = __importDefault(require("../utils/uuid"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-const useRecentLocations_1 = require("../Hooks/useRecentLocations");
 const HistoryIcon_1 = require("../Icons/HistoryIcon");
-function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, setSource, currentResource, }) {
+function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, setSource, currentResource, recentSources, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
-    const { recentLocations } = (0, useRecentLocations_1.useRecentLocations)();
+    const filteredRecentSources = recentSources.filter((item) => item.path?.length);
     const [recentLocationSelection, setRecentLocationSelection] = (0, react_1.useState)();
     const [uniqueId] = (0, react_1.useState)((0, uuid_1.default)());
     const buttonRef = (0, react_1.useRef)(null);
@@ -71,17 +70,22 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
         setIsOpen(false);
         setRecentLocationSelection(location);
         buttonRef.current?.focus();
-        setSource({
-            source: location.source,
-            resource: location.rootNode,
-        }, location.path);
+        if (location.path) {
+            const [rootNode, ...path] = location.path;
+            setSource({
+                source: location.source,
+                resource: rootNode,
+            }, path);
+        }
     };
     (0, react_1.useEffect)(() => {
-        const lastResource = recentLocationSelection?.path[recentLocationSelection.path.length - 1];
-        // If the current resource selected in the resource browser is no longer the item selected in the
-        // recent locations section dropdown then we set the selection to null to prevent active statuses.
-        if (currentResource?.id !== lastResource?.id) {
-            setRecentLocationSelection(null);
+        if (recentLocationSelection?.path) {
+            const lastResource = recentLocationSelection.path[recentLocationSelection.path.length - 1];
+            // If the current resource selected in the resource browser is no longer the item selected in the
+            // recent locations section dropdown then we set the selection to null to prevent active statuses.
+            if (currentResource && currentResource.id !== lastResource?.id) {
+                setRecentLocationSelection(null);
+            }
         }
     }, [recentLocationSelection, currentResource]);
     return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 border-2 rounded border-gray-300" },
@@ -112,26 +116,24 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                     "All available sources")),
             isLoading && (react_1.default.createElement("li", { className: "mt-2" },
                 react_1.default.createElement(generic_browser_lib_1.Spinner, { size: "sm", label: "Loading sources", className: "m-3" }))),
-            !isLoading && recentLocations.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
+            !isLoading && filteredRecentSources.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
                 react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
                     react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5 flex gap-1 items-center" },
                         react_1.default.createElement(HistoryIcon_1.HistoryIcon, null),
                         "Recent locations")),
-                react_1.default.createElement("ul", { "aria-label": "recent location nodes", className: "flex flex-col mt-2" }, recentLocations.map((item, index) => {
-                    const lastResource = item.path[item.path.length - 1];
+                react_1.default.createElement("ul", { "aria-label": "recent location nodes", className: "flex flex-col mt-2" }, filteredRecentSources.map((item, index) => {
+                    const lastResource = item.path && item.path[item.path.length - 1];
                     const isSelectedSource = item.source?.id === selectedSource?.source.id &&
-                        item.rootNode?.id === selectedSource?.resource?.id &&
-                        lastResource?.id === currentResource?.id &&
-                        recentLocationSelection;
-                    return (react_1.default.createElement("li", { key: `${index}-${item.source?.id}-${item.rootNode?.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
+                        lastResource?.id === recentLocationSelection?.path?.[recentLocationSelection.path?.length - 1]?.id;
+                    return (react_1.default.createElement("li", { key: `${index}-${item.source?.id}-${lastResource?.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
                         react_1.default.createElement("button", { type: "button", onClick: () => handleRecentLocationClick(item), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
-                            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: (lastResource?.type.code || item.rootNode?.type.code || 'folder'), resourceSource: "matrix", "aria-label": lastResource?.name || item.rootNode?.name || item.source?.name, className: "shrink-0 mr-2.5" }),
-                            react_1.default.createElement("span", { className: "text-left mr-7" }, lastResource?.name || item.rootNode?.name || item.source?.name),
+                            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: (lastResource?.type.code || 'folder'), resourceSource: "matrix", "aria-label": lastResource?.name || item.source?.name, className: "shrink-0 mr-2.5" }),
+                            react_1.default.createElement("span", { className: "text-left mr-7" }, lastResource?.name || item.source?.name),
                             isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
                 })))),
             !isLoading &&
                 categorisedSources.map(({ key, label, sources }, index) => {
-                    return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || recentLocations.length > 0 ? 'mt-3' : ''}` },
+                    return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || filteredRecentSources.length > 0 ? 'mt-3' : ''}` },
                         react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
                             react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, label)),
                         sources?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col mt-2" }, sources.map(({ source, resource }) => {

package/lib/SourceList/SourceList.d.ts

@@ -2,14 +2,18 @@ import React from 'react';
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, ScopedSource, Resource } from '../types';
+import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
 export interface SourceListProps {
     sources: Source[];
+    selectedResource?: Resource | null;
     previewModalState: OverlayTriggerState;
     isLoading: boolean;
     onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
+    onSourceDrilldown: (source: ScopedSource) => void;
     handleReload: () => void;
     setSource: (source: ScopedSource | null, path?: Resource[]) => void;
+    recentSources: RecentResourcesPaths[];
     error: Error | null;
 }
-declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, setSource, error, }: SourceListProps) => React.JSX.Element;
+declare const SourceList: ({ sources, selectedResource, previewModalState, isLoading, onSourceSelect, onSourceDrilldown, handleReload, setSource, recentSources, error, }: SourceListProps) => React.JSX.Element;
 export default SourceList;

package/lib/SourceList/SourceList.js

@@ -30,12 +30,11 @@ const react_1 = __importStar(require("react"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const clsx_1 = __importDefault(require("clsx"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-const useRecentLocations_1 = require("../Hooks/useRecentLocations");
 const HistoryIcon_1 = require("../Icons/HistoryIcon");
-const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, setSource, error, }) {
+const SourceList = function ({ sources, selectedResource, previewModalState, isLoading, onSourceSelect, onSourceDrilldown, handleReload, setSource, recentSources, error, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const listRef = (0, react_1.useRef)(null);
-    const { recentLocations } = (0, useRecentLocations_1.useRecentLocations)();
+    const filteredRecentSources = recentSources.filter((item) => item.path?.length);
     (0, react_1.useEffect)(() => {
         if (listRef.current) {
             listRef.current?.focus({
@@ -50,27 +49,33 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
     }
     return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `Source list`, className: (0, clsx_1.default)('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0 px-7 py-4') },
         error && react_1.default.createElement(generic_browser_lib_1.ResourceState, { state: "error", message: error.message, handleReload: handleReload }),
-        !error && recentLocations.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
+        !error && filteredRecentSources.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
             react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
                 react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5 flex gap-1 items-center" },
                     react_1.default.createElement(HistoryIcon_1.HistoryIcon, null),
                     "Recent locations")),
-            react_1.default.createElement("ul", { "aria-label": `recent location nodes`, className: "flex flex-col" }, recentLocations.map((item, index) => {
-                const lastResource = item.path[item.path.length - 1];
-                return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${index}-${item.source?.id}-${item.rootNode?.id}`, item: { source: item.source, resource: item.rootNode }, label: lastResource?.name || item.rootNode?.name || item?.source.name, type: lastResource?.type?.code || item.rootNode?.type?.code || 'folder', previewModalState: previewModalState, onSelect: () => {
-                        setSource({
-                            source: item.source,
-                            resource: item.rootNode,
-                        }, item.path);
-                    }, className: (0, clsx_1.default)(index === 0 && 'rounded-t-lg mt-3', index === recentLocations.length - 1 && 'rounded-b-lg'), showChevron: true }));
+            react_1.default.createElement("ul", { "aria-label": `recent location nodes`, className: "flex flex-col" }, filteredRecentSources.map((item, index) => {
+                if (item.path) {
+                    const lastResource = item.path[item.path.length - 1];
+                    const [rootNode, ...path] = item.path;
+                    return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${index}-${item.source?.id}-${lastResource?.id}`, item: { source: item.source, resource: lastResource }, label: lastResource?.name || item.source?.name || '', type: lastResource?.type?.code || 'folder', previewModalState: previewModalState, onSelect: () => {
+                            setSource({
+                                source: item.source,
+                                resource: rootNode,
+                            }, path);
+                        }, className: (0, clsx_1.default)(index === 0 && 'rounded-t-lg mt-3', index === filteredRecentSources.length - 1 && 'rounded-b-lg'), showChevron: true }));
+                }
             })))),
         !error &&
             categorisedSources.map(({ key, label, sources }, index) => {
-                return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || recentLocations.length > 0 ? 'mt-3' : ''}` },
+                return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || filteredRecentSources.length > 0 ? 'mt-3' : ''}` },
                     react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
                         react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, label)),
                     sources.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col" }, sources.map(({ source, resource }) => {
-                        return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${source.id}-${resource?.id}`, item: { source, resource }, label: resource?.name || source.name, type: resource?.type.code || 'folder', previewModalState: previewModalState, onSelect: onSourceSelect, className: "mt-3 rounded-lg", showChevron: true }));
+                        if (!resource || resource.childCount === 0) {
+                            return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${source.id}-${resource?.id}`, item: { source, resource }, label: resource?.name || source.name, type: resource?.type.code || 'folder', previewModalState: previewModalState, onSelect: onSourceDrilldown, className: "mt-3 rounded-lg", showChevron: true }));
+                        }
+                        return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${source.id}-${resource?.id}`, item: { source, resource }, selected: resource?.id == selectedResource?.id && resource != null, label: resource?.name || source.name, type: resource?.type.code || 'folder', childCount: resource?.childCount || undefined, previewModalState: previewModalState, onSelect: onSourceSelect, onDrillDown: onSourceDrilldown, className: "mt-3 rounded-lg", showChevron: true }));
                     })))));
             })));
 };

package/lib/index.css

@@ -983,6 +983,9 @@
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.squiz-rb-scope .filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
   max-width: 250px;
   cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.68.1",
+  "version": "1.69.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

package/src/Hooks/usePreselectedResourcePath.ts

@@ -34,11 +34,15 @@ export const usePreselectedResourcePath = ({
         if (sourceId && source && resource) {
           const bestMatchLineage = findBestMatchLineage(source, resource);
 
-          path = await Promise.all(
-            bestMatchLineage.map(async (resourceId) => {
-              return onRequestResource({ source: sourceId, resource: resourceId });
-            }),
-          );
+          if (Array.isArray(bestMatchLineage) && bestMatchLineage.length > 0) {
+            path = await Promise.all(
+              bestMatchLineage.map(async (resourceId) => {
+                return onRequestResource({ source: sourceId, resource: resourceId });
+              }),
+            );
+          } else {
+            path = [resource];
+          }
         }
 
         return { source, path };