@squiz/resource-browser 1.66.3 → 1.67.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @squiz/resource-browser
 
+## 1.67.1
+
+### Patch Changes
+
+- 9e4cad8: Fixed minor issue with finding best matched lineage in resource browser
+
+## 1.67.0
+
+### Minor Changes
+
+- 5fa9b39: Updated resource browser to allow replacing the previously selected resource. Replacing will open the resource browser to the location where the resource resides.
+
+### Patch Changes
+
+- Updated dependencies [5fa9b39]
+- Updated dependencies [5fa9b39]
+  - @squiz/dx-json-schema-lib@1.67.0
+  - @squiz/generic-browser-lib@1.66.0
+
 ## 1.66.3
 
 ### Patch Changes

package/lib/Hooks/usePreselectedResourcePath.d.ts

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

package/lib/Hooks/usePreselectedResourcePath.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreselectedResourcePath = void 0;
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const findBestMatchLineage_1 = require("../utils/findBestMatchLineage");
+const usePreselectedResourcePath = ({ sourceId, resource, onRequestResource, onRequestSources, }) => {
+    return (0, generic_browser_lib_1.useAsync)({
+        callback: async () => {
+            let source;
+            let path;
+            if (sourceId) {
+                const sources = await onRequestSources();
+                source = sources.find((source) => source.id === sourceId);
+            }
+            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 });
+                }));
+            }
+            return { source, path };
+        },
+        defaultValue: {},
+    }, [sourceId, resource]);
+};
+exports.usePreselectedResourcePath = usePreselectedResourcePath;

package/lib/Hooks/useResourcePath.d.ts

@@ -10,7 +10,7 @@ export declare const useResourcePath: () => {
     source: ScopedSource | null;
     currentResource: Resource | null;
     hierarchy: Hierarchy<Resource | ScopedSource>;
-    setSource: (source: ScopedSource | null) => void;
+    setSource: (source: ScopedSource | null, path?: Resource[]) => void;
     push: (resource: Resource) => void;
     popUntil: (node: ScopedSource | Resource) => void;
 };

package/lib/Hooks/useResourcePath.js

@@ -12,9 +12,9 @@ const react_1 = require("react");
 const useResourcePath = () => {
     const [source, setSourceInternal] = (0, react_1.useState)(null);
     const [resourceStack, setResourceStack] = (0, react_1.useState)([]);
-    const setSource = (0, react_1.useCallback)((source) => {
+    const setSource = (0, react_1.useCallback)((source, path = []) => {
         setSourceInternal(source);
-        setResourceStack([]);
+        setResourceStack(path);
     }, []);
     const push = (0, react_1.useCallback)((resource) => {
         setResourceStack([...resourceStack, resource]);

package/lib/Hooks/useSources.d.ts

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

package/lib/Hooks/useSources.js

@@ -0,0 +1,9 @@
+"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.
+ */
+const useSources = ({ onRequestSources }) => (0, generic_browser_lib_1.useAsync)({ callback: onRequestSources, defaultValue: [] }, []);
+exports.useSources = useSources;

package/lib/Icons/CircledLoopIcon.d.ts

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

package/lib/Icons/CircledLoopIcon.js

@@ -0,0 +1,12 @@
+"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/ResourceBrowserContext/ResourceBrowserContext.d.ts

@@ -1,8 +1,15 @@
-import React from 'react';
-import { Resource, ResourceReference, Source } from '../types';
+import React, { PropsWithChildren } from 'react';
+import { OnRequestResource, OnRequestSources, OnRequestChildren } from '../types';
 export type ResourceBrowserContextProps = {
-    onRequestSources: () => Promise<Source[]>;
-    onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
-    onRequestResource(reference: ResourceReference): Promise<Resource | null>;
+    onRequestSources: OnRequestSources;
+    onRequestChildren: OnRequestChildren;
+    onRequestResource: OnRequestResource;
 };
+/**
+ * @internal Direct usage of this object is discouraged. It will be privated in a future major version.
+ * Please use ResourceBrowserContextProvider instead.
+ */
 export declare const ResourceBrowserContext: React.Context<ResourceBrowserContextProps>;
+export declare const ResourceBrowserContextProvider: (props: PropsWithChildren<{
+    value: ResourceBrowserContextProps;
+}>) => React.JSX.Element;

package/lib/ResourceBrowserContext/ResourceBrowserContext.js

@@ -1,10 +1,39 @@
 "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.ResourceBrowserContext = void 0;
-const react_1 = __importDefault(require("react"));
+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.
+ */
 exports.ResourceBrowserContext = react_1.default.createContext({
     onRequestSources: () => {
         throw new Error('onRequestSources has not been configured.');
@@ -16,3 +45,24 @@ exports.ResourceBrowserContext = react_1.default.createContext({
         throw new Error('onRequestResource has not been configured.');
     },
 });
+const ResourceBrowserContextProvider = (props) => {
+    const CACHE_DURATION = 30000; // 30 seconds
+    const { value: { onRequestSources, onRequestChildren, onRequestResource, ...other }, children, } = props;
+    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',
+        }),
+        onRequestChildren: (0, p_memoize_1.default)(onRequestChildren, {
+            cache,
+            cacheKey: ([source, resource]) => `onRequestChildren.${source.id}.${resource?.id}`,
+        }),
+        onRequestResource: (0, p_memoize_1.default)(onRequestResource, {
+            cache,
+            cacheKey: ([reference]) => `onRequestResource.${reference.source}.${reference.resource}`,
+        }),
+    }), [onRequestSources, onRequestChildren, onRequestResource]);
+    return (react_1.default.createElement(exports.ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children));
+};
+exports.ResourceBrowserContextProvider = ResourceBrowserContextProvider;

package/lib/ResourcePicker/ResourcePicker.js

@@ -21,6 +21,6 @@ const ResourcePicker = ({ resource, allowedTypes, error, isLoading, isDisabled,
             react_1.default.createElement("div", { className: "resource-picker-info__layout" },
                 isLoading && react_1.default.createElement(Loading_1.LoadingState, null),
                 error && react_1.default.createElement(Error_1.ErrorState, { error: error, isDisabled: isDisabled, onClear: onClear }),
-                resource && react_1.default.createElement(Selected_1.SelectedState, { resource: resource, isDisabled: isDisabled, onClear: onClear }))))));
+                resource && (react_1.default.createElement(Selected_1.SelectedState, { resource: resource, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
 };
 exports.default = ResourcePicker;

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

@@ -4,5 +4,6 @@ export type SelectedStateProps = {
     resource: Resource;
     isDisabled?: boolean;
     onClear: () => void;
+    resourcePickerContainer: any;
 };
-export declare const SelectedState: ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, }: SelectedStateProps) => React.JSX.Element;
+export declare const SelectedState: ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, resourcePickerContainer, }: SelectedStateProps) => React.JSX.Element;

package/lib/ResourcePicker/States/Selected.js

@@ -8,10 +8,12 @@ const react_1 = __importDefault(require("react"));
 const pretty_bytes_1 = __importDefault(require("pretty-bytes"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
-const SelectedState = ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, }) => {
+const CircledLoopIcon_1 = require("../../Icons/CircledLoopIcon");
+const SelectedState = ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, resourcePickerContainer, }) => {
     const fileSize = squizImage?.imageVariations?.original?.byteSize;
     const fileWidth = squizImage?.imageVariations?.original?.width;
     const fileHeight = squizImage?.imageVariations?.original?.height;
+    const replaceAsset = (react_1.default.createElement(generic_browser_lib_1.ModalTrigger, { 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,
         type.code === 'image' && url ? (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: url, className: "w-full h-full object-cover object-center", alt: name }))) : (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-4 h-4 mt-1 flex self-start" })),
@@ -39,6 +41,8 @@ const SelectedState = ({ resource: { id, type, name, status, squizImage, url },
                         " x ",
                         fileHeight,
                         "px"))))),
-        react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
+        react_1.default.createElement("div", { className: "flex" },
+            replaceAsset,
+            react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
 };
 exports.SelectedState = SelectedState;

package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { Source, Resource, HydratedResourceReference } from '../types';
+import { Resource, HydratedResourceReference, OnRequestSources, OnRequestChildren, OnRequestResource } from '../types';
 interface ResourcePickerContainerProps {
     title: string;
     titleAriaProps: DOMAttributes<FocusableElement>;
     allowedTypes: string[] | undefined;
-    onRequestSources: () => Promise<Source[]>;
-    onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+    onRequestSources: OnRequestSources;
+    onRequestResource: OnRequestResource;
+    onRequestChildren: OnRequestChildren;
     onChange(resource: HydratedResourceReference | null): void;
     onClose: () => void;
+    preselectedSourceId?: string;
+    preselectedResource?: Resource | null;
 }
-declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onChange, onClose, }: ResourcePickerContainerProps): React.JSX.Element;
+declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestResource, onRequestChildren, onChange, onClose, preselectedSourceId, preselectedResource, }: ResourcePickerContainerProps): React.JSX.Element;
 export default ResourcePickerContainer;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_stately_1 = require("react-stately");
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const SourceList_1 = __importDefault(require("../SourceList/SourceList"));
 const ResourceList_1 = __importDefault(require("../ResourceList/ResourceList"));
 const ResourceBreadcrumb_1 = __importDefault(require("../ResourceBreadcrumb/ResourceBreadcrumb"));
@@ -36,19 +35,28 @@ const PreviewPanel_1 = __importDefault(require("../PreviewPanel/PreviewPanel"));
 const SourceDropdown_1 = __importDefault(require("../SourceDropdown/SourceDropdown"));
 const useResourcePath_1 = require("../Hooks/useResourcePath");
 const useChildResources_1 = require("../Hooks/useChildResources");
-function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onChange, onClose, }) {
+const useSources_1 = require("../Hooks/useSources");
+const usePreselectedResourcePath_1 = require("../Hooks/usePreselectedResourcePath");
+function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestResource, onRequestChildren, onChange, onClose, preselectedSourceId, preselectedResource, }) {
     const previewModalState = (0, react_stately_1.useOverlayTriggerState)({});
-    const [selectedResource, setSelectedResource] = (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 { data: sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, generic_browser_lib_1.useAsync)({ callback: onRequestSources, defaultValue: [] }, []);
+    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)({
+        sourceId: preselectedSourceId,
+        resource: preselectedResource,
+        onRequestResource,
+        onRequestSources,
+    });
+    const selectedResource = (0, react_1.useMemo)(() => resources.find((resource) => resource.id === selectedResourceId) || null, [selectedResourceId, resources]);
     const handleResourceDrillDown = (0, react_1.useCallback)((resource) => {
         push(resource);
     }, [push]);
     const handleResourceSelected = (0, react_1.useCallback)((resource, overlayProps) => {
         setPreviewModalOverlayProps(overlayProps);
-        setSelectedResource(resource);
+        setSelectedResourceId(resource.id);
     }, []);
     const handleSourceDrilldown = (0, react_1.useCallback)((source) => {
         setSource(source);
@@ -61,12 +69,28 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
         onClose();
     }, [source]);
     const handleDetailClose = (0, react_1.useCallback)(() => {
-        setSelectedResource(null);
+        setSelectedResourceId(null);
     }, []);
-    // When the active node changes clear the selected resource
+    // 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)(() => {
-        setSelectedResource(null);
-    }, [hierarchy]);
+        if (resources.length > 0 && selectedResourceId && !selectedResource) {
+            setSelectedResourceId(null);
+        }
+    }, [resources, selectedResourceId, selectedResource]);
+    (0, react_1.useEffect)(() => {
+        if (preselectedSource && preselectedPath?.length) {
+            const [rootNode, ...path] = preselectedPath;
+            const leaf = path.pop();
+            setSource({
+                source: preselectedSource,
+                resource: rootNode,
+            }, path);
+            if (leaf) {
+                setSelectedResourceId(leaf.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),
@@ -79,9 +103,9 @@ 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, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, error: sourceError })),
+                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading || isPreselectedResourcePathLoading, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, 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: selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose })))));
+                react_1.default.createElement(PreviewPanel_1.default, { resource: isResourcesLoading ? null : selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose })))));
 }
 exports.default = ResourcePickerContainer;

package/lib/SourceDropdown/SourceDropdown.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const interactions_1 = require("@react-aria/interactions");
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const uuid_1 = __importDefault(require("../uuid"));
+const uuid_1 = __importDefault(require("../utils/uuid"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
 function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);

package/lib/index.css

@@ -423,6 +423,9 @@
 .squiz-rb-scope .col-end-2 {
   grid-column-end: 2;
 }
+.squiz-rb-scope .m-1 {
+  margin: 0.25rem;
+}
 .squiz-rb-scope .m-2 {
   margin: 0.5rem;
 }
@@ -1037,7 +1040,7 @@
 }
 .squiz-rb-scope .resource-picker-info__layout {
   display: grid;
-  grid-template-columns: auto 1fr 24px;
+  grid-template-columns: auto 1fr auto;
   gap: 0.5rem;
   justify-items: center;
 }
@@ -1052,7 +1055,21 @@
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   background-size: 24px 24px;
   background-position: 0 0, 12px 12px;
-  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+  background-image:
+    linear-gradient(
+      45deg,
+      #e0e0e0 25%,
+      transparent 25%,
+      transparent 75%,
+      #e0e0e0 75%,
+      #e0e0e0),
+    linear-gradient(
+      45deg,
+      #e0e0e0 25%,
+      transparent 25%,
+      transparent 75%,
+      #e0e0e0 75%,
+      #e0e0e0);
 }
 .squiz-rb-scope .spinner {
   display: inline-block;

package/lib/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
-import { ResourceBrowserContext, ResourceBrowserContextProps } from './ResourceBrowserContext/ResourceBrowserContext';
+import { ResourceBrowserContext, ResourceBrowserContextProvider, ResourceBrowserContextProps } from './ResourceBrowserContext/ResourceBrowserContext';
 export type { HydratedResourceReference, Resource, ResourceReference, Source, ResourceBrowserContextProps };
-export { ResourceBrowserContext };
+export { ResourceBrowserContext, ResourceBrowserContextProvider };
 export type ResourceBrowserInputProps = {
     modalTitle: string;
     allowedTypes?: string[];

package/lib/index.js

@@ -26,11 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourceBrowserInput = exports.ResourceBrowserContext = void 0;
+exports.ResourceBrowserInput = exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
 const react_1 = __importStar(require("react"));
 const ResourcePickerContainer_1 = __importDefault(require("./ResourcePickerContainer/ResourcePickerContainer"));
 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 ResourcePicker_1 = __importDefault(require("./ResourcePicker/ResourcePicker"));
 const useResource_1 = require("./Hooks/useResource");
 const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, isDisabled, onClear, }) => {
@@ -39,6 +40,6 @@ const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, isDis
     const defaultOnClear = () => onChange(null);
     const onClearFunction = onClear ?? defaultOnClear;
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(ResourcePicker_1.default, { resource: resource, allowedTypes: allowedTypes, error: error, isLoading: isLoading, isDisabled: isDisabled, onClear: () => onClearFunction() }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange })))));
+        react_1.default.createElement(ResourcePicker_1.default, { resource: resource, allowedTypes: allowedTypes, error: error, isLoading: isLoading, isDisabled: isDisabled, onClear: () => onClearFunction() }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { preselectedSourceId: value?.source, preselectedResource: resource, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestResource: onRequestResource, onRequestChildren: onRequestChildren, onChange: onChange })))));
 };
 exports.ResourceBrowserInput = ResourceBrowserInput;

package/lib/types.d.ts

@@ -18,6 +18,10 @@ export type Resource = {
     urls: string[];
     childCount: number;
     squizImage?: SquizImageType['__shape__'];
+    lineages?: ResourceLineage[];
+};
+export type ResourceLineage = {
+    resourceIds: string[];
 };
 /**
  * Represents a system that resources can be picked from.
@@ -65,3 +69,6 @@ export type Hierarchy<T> = Array<{
 export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
 };
+export type OnRequestSources = () => Promise<Source[]>;
+export type OnRequestResource = (reference: ResourceReference) => Promise<Resource>;
+export type OnRequestChildren = (source: Source, resource: Resource | null) => Promise<Resource[]>;

package/lib/utils/findBestMatchLineage.d.ts

@@ -0,0 +1,2 @@
+import { Source, Resource } from '../types';
+export declare const findBestMatchLineage: (source: Source, resource: Resource) => string[];

package/lib/utils/findBestMatchLineage.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findBestMatchLineage = void 0;
+const findBestMatchLineage = (source, resource) => {
+    if (resource.lineages) {
+        for (const lineage of resource.lineages) {
+            // Lineage must:
+            // 1. Appear beneath the root node.
+            // 2. Not be the root node itself (root nodes can't be selected, to be changed in FEAAS-760).
+            // TODO: FEAAS-760 update as necessary so the lineage will be returned even if it ends at the root node, eg:
+            // const rootNode = source.nodes.find(node => lineage.resourceIds.includes(node.id));
+            const rootNode = source.nodes.find((node) => {
+                const index = lineage.resourceIds.indexOf(node.id);
+                return index >= 0 && index < lineage.resourceIds.length - 1;
+            });
+            if (rootNode) {
+                const rootNodeIndex = lineage.resourceIds.indexOf(rootNode.id);
+                // Return the lineage starting from the root node. eg.
+                // * Full lineage is: 1 > 10 > 100 > 1000 > 10000
+                // * The source has a node with an ID of: 100
+                // * The returned lineage will be: 100 > 1000 > 10000
+                return lineage.resourceIds.slice(rootNodeIndex);
+            }
+        }
+    }
+    return [];
+};
+exports.findBestMatchLineage = findBestMatchLineage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.66.3",
+  "version": "1.67.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -19,8 +19,10 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "^1.65.0",
-    "@squiz/generic-browser-lib": "^1.65.0",
+    "@squiz/dx-json-schema-lib": "^1.67.0",
+    "@squiz/generic-browser-lib": "^1.66.0",
+    "expiry-map": "^2.0.0",
+    "p-memoize": "^4.0.4",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -43,7 +45,7 @@
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react-swc": "3.0.0",
     "autoprefixer": "10.4.14",
-    "esbuild": "0.17.17",
+    "esbuild": "^0.20.2",
     "esbuild-sass-plugin": "2.8.0",
     "jest": "29.4.1",
     "jest-environment-jsdom": "29.4.1",

package/src/Hooks/usePreselectedResourcePath.ts

@@ -0,0 +1,50 @@
+import { Source, Resource, OnRequestResource, OnRequestSources } from '../types';
+import { useAsync } from '@squiz/generic-browser-lib';
+import { findBestMatchLineage } from '../utils/findBestMatchLineage';
+
+export type PreselectedResourceProps = {
+  sourceId?: string;
+  resource?: Resource | null;
+  onRequestResource: OnRequestResource;
+  onRequestSources: OnRequestSources;
+};
+
+export type PreselectedResourcePath = {
+  source?: Source;
+  path?: Resource[];
+};
+
+export const usePreselectedResourcePath = ({
+  sourceId,
+  resource,
+  onRequestResource,
+  onRequestSources,
+}: PreselectedResourceProps) => {
+  return useAsync(
+    {
+      callback: async () => {
+        let source: Source | undefined;
+        let path: Resource[] | undefined;
+
+        if (sourceId) {
+          const sources = await onRequestSources();
+          source = sources.find((source) => source.id === sourceId);
+        }
+
+        if (sourceId && source && resource) {
+          const bestMatchLineage = findBestMatchLineage(source, resource);
+
+          path = await Promise.all(
+            bestMatchLineage.map(async (resourceId) => {
+              return onRequestResource({ source: sourceId, resource: resourceId });
+            }),
+          );
+        }
+
+        return { source, path };
+      },
+      defaultValue: {} as PreselectedResourcePath,
+    },
+    [sourceId, resource],
+  );
+};

package/src/Hooks/useResourcePath.ts

@@ -12,9 +12,9 @@ export const useResourcePath = () => {
   const [source, setSourceInternal] = useState<ScopedSource | null>(null);
   const [resourceStack, setResourceStack] = useState<Array<Resource>>([]);
 
-  const setSource = useCallback((source: ScopedSource | null) => {
+  const setSource = useCallback((source: ScopedSource | null, path: Resource[] = []) => {
     setSourceInternal(source);
-    setResourceStack([]);
+    setResourceStack(path);
   }, []);
 
   const push = useCallback(

package/src/Hooks/useSources.ts

@@ -9,4 +9,4 @@ type UseSourcesProps = {
  * Loads and caches the source list when a component using the hook is mounted.
  */
 export const useSources = ({ onRequestSources }: UseSourcesProps) =>
-  useAsync({ callback: onRequestSources, defaultValue: [] }, []);
+  useAsync({ callback: onRequestSources, defaultValue: [] as Source[] }, []);