@squiz/resource-browser 1.32.1-alpha.14 → 1.32.1-alpha.16

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.js

@@ -44,9 +44,9 @@ const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnTo
             react_1.default.createElement("li", { className: "flex items-center mr-3" },
                 react_1.default.createElement("button", { type: "button", onClick: onReturnToRoot },
                     react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-label": "Return to source list", className: "" }))),
-            hierarchy.map(({ id, label }, index) => {
-                return (react_1.default.createElement("li", { key: `${id.source}-${id.id}`, className: "resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2" },
-                    index !== hierarchy.length - 1 && (react_1.default.createElement("button", { type: "button", onClick: () => onBreadcrumbSelect(id) },
+            hierarchy.map(({ key, label, node }, index) => {
+                return (react_1.default.createElement("li", { key: `${key}`, className: "resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2" },
+                    index !== hierarchy.length - 1 && (react_1.default.createElement("button", { type: "button", onClick: () => onBreadcrumbSelect(node) },
                         react_1.default.createElement("div", { className: `resource-breadcrumb__label`, title: label }, label))),
                     index === hierarchy.length - 1 && (react_1.default.createElement("div", { className: `resource-breadcrumb__label md:font-semibold`, title: label }, label)),
                     hierarchy.length > 3 && index === 0 && (react_1.default.createElement("div", { className: "resource-breadcrumb__expander flex" },

package/lib/ResourceItem/ResourceItem.d.ts

@@ -1,19 +1,17 @@
 /// <reference types="react" />
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { OverlayTriggerState } from 'react-stately';
-import { NodeIdentifier } from '../index';
-interface ResourceItem {
-    key: string;
-    id: NodeIdentifier;
-    selected: boolean;
+interface ResourceItem<T> {
+    item: T;
+    selected?: boolean;
     label: string;
     type: string;
     childCount: number;
     previewModalState: OverlayTriggerState;
-    onSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
-    onDrillDown: (node: NodeIdentifier) => void;
+    onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
+    onDrillDown: (node: T) => void;
     className: string;
     allowedTypes?: string[] | undefined;
 }
-declare const ResourceItem: ({ id, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, }: ResourceItem) => JSX.Element;
+declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, }: ResourceItem<T>) => JSX.Element;
 export default ResourceItem;

package/lib/ResourceItem/ResourceItem.js

@@ -7,18 +7,18 @@ const react_1 = __importDefault(require("react"));
 const react_aria_1 = require("react-aria");
 const Icon_1 = __importDefault(require("../Icons/Icon"));
 const ModalOpeningButton_1 = __importDefault(require("../Modal/ModalOpeningButton"));
-const ResourceItem = ({ id, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, }) => {
+const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, }) => {
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, previewModalState);
     const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
     const title = isDisabled ? "You can't select this item" : label;
     return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border border-grey-200 ${className}` },
-        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(id, overlayProps), className: `
+        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), className: `
           relative grow flex items-center p-4 rounded ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-100 focus:bg-gray-100'}
         `, title: title },
             react_1.default.createElement(Icon_1.default, { icon: type, resourceSource: "matrix", "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}` }),
             react_1.default.createElement("span", { className: "text-left break-all" }, label),
             childCount <= 0 && react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "absolute right-5" })),
-        childCount > 0 && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(id), className: `relative shrink-0 flex items-center p-4 rounded before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-100 focus:bg-gray-100` },
+        childCount > 0 && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-100 focus:bg-gray-100` },
             react_1.default.createElement("span", { className: "ml-auto flex items-center" },
                 react_1.default.createElement("span", { className: "truncate w-10 text-right", title: String(childCount) }, childCount),
                 react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "ml-1" }))))));

package/lib/ResourceList/ResourceList.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { NodeIdentifier, Resource } from '../index';
+import { Resource } from '../types';
 export interface ResourceListProps {
     resources: Array<Resource>;
+    selectedResource?: Resource | null;
     previewModalState: OverlayTriggerState;
     isLoading: boolean;
-    onResourceSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
-    onResourceDrillDown: (node: NodeIdentifier) => void;
+    onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
+    onResourceDrillDown: (resource: Resource) => void;
     allowedTypes?: string[] | undefined;
 }
-declare const ResourceList: ({ resources, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, }: ResourceListProps) => JSX.Element;
+declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, }: ResourceListProps) => JSX.Element;
 export default ResourceList;

package/lib/ResourceList/ResourceList.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
 const SkeletonListItem_1 = require("../Skeleton/ListItem/SkeletonListItem");
-const ResourceList = function ({ resources, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, }) {
+const ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, }) {
     const listRef = (0, react_1.useRef)(null);
     // When resources change, because we are on a new page, reset focus to the list
     (0, react_1.useEffect)(() => {
@@ -44,8 +44,8 @@ const ResourceList = function ({ resources, previewModalState, isLoading, onReso
             return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: index });
         }))),
         !isLoading &&
-            resources.map(({ type, id, selected, label, childCount }) => {
-                return (react_1.default.createElement(ResourceItem_1.default, { key: `${id.source}-${id.id}`, id: id, selected: selected, label: label, type: type, childCount: childCount, previewModalState: previewModalState, onSelect: onResourceSelect, onDrillDown: onResourceDrillDown, className: "border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b", allowedTypes: allowedTypes }));
+            resources.map((resource) => {
+                return (react_1.default.createElement(ResourceItem_1.default, { key: resource.id, item: resource, selected: resource.id == selectedResource?.id, label: resource.name, type: resource.type.code, childCount: resource.childCount, previewModalState: previewModalState, onSelect: onResourceSelect, onDrillDown: onResourceDrillDown, className: "border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b", allowedTypes: allowedTypes }));
             })));
 };
 exports.default = ResourceList;

package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts

@@ -1,15 +1,14 @@
 /// <reference types="react" />
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { NodeIdentifier, Source, Resource, ResourceDetail } from '../index';
+import { Source, Resource, HydratedResourceReference } from '../types';
 interface ResourcePickerContainerProps {
     title: string;
     titleAriaProps: DOMAttributes<FocusableElement>;
     allowedTypes: string[] | undefined;
     onRequestSources: () => Promise<Source[]>;
-    onRequestChildren(id: NodeIdentifier): Promise<Resource[]>;
-    onRequestResource(id: NodeIdentifier): Promise<ResourceDetail | null>;
-    onChange(resource: NodeIdentifier | null): void;
+    onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+    onChange(resource: HydratedResourceReference | null): void;
     onClose: () => void;
 }
-declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onRequestResource, onChange, onClose, }: ResourcePickerContainerProps): JSX.Element;
+declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onChange, onClose, }: ResourcePickerContainerProps): JSX.Element;
 export default ResourcePickerContainer;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -33,113 +33,58 @@ const ResourceList_1 = __importDefault(require("../ResourceList/ResourceList"));
 const ResourceBreadcrumb_1 = __importDefault(require("../ResourceBreadcrumb/ResourceBreadcrumb"));
 const PreviewPanel_1 = __importDefault(require("../PreviewPanel/PreviewPanel"));
 const SourceDropdown_1 = __importDefault(require("../SourceDropdown/SourceDropdown"));
-function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onRequestResource, onChange, onClose, }) {
+const useResourcePath_1 = require("../Hooks/useResourcePath");
+const useChildResources_1 = require("../Hooks/useChildResources");
+const useSources_1 = require("../Hooks/useSources");
+function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onChange, onClose, }) {
     const previewModalState = (0, react_stately_1.useOverlayTriggerState)({});
-    const [isSourceLoading, setIsSourceLoading] = (0, react_1.useState)(false);
-    const [isMainLoading, setIsMainLoading] = (0, react_1.useState)(false);
-    const [isSecondaryLoading, setIsSecondaryLoading] = (0, react_1.useState)(false);
-    const [currentNode, setCurrentNode] = (0, react_1.useState)(null);
-    const [selectedId, setSelectedId] = (0, react_1.useState)(null);
+    const [selectedResource, setSelectedResource] = (0, react_1.useState)(null);
     const [previewModalOverlayProps, setPreviewModalOverlayProps] = (0, react_1.useState)({});
-    const [hierarchy, setHierarchy] = (0, react_1.useState)([]);
-    const [sources, setSources] = (0, react_1.useState)([]);
-    const [resources, setResources] = (0, react_1.useState)([]);
-    const [selectedNodeDetails, setSelectedNodeDetails] = (0, react_1.useState)(null);
-    const adjustHierarchy = (node, resetHierarchy) => {
-        const isInHierarchy = hierarchy.find((hNode) => hNode.id === node);
-        let newHierarchy = [];
-        // If the node is already in the hierarchy we need to 'jump' back to it
-        if (isInHierarchy) {
-            let reachedNode = false;
-            // Read though the hierarchy and add any nodes before and including the current to the array
-            hierarchy.forEach((hNode) => {
-                if (reachedNode === false) {
-                    newHierarchy.push(hNode);
-                    if (hNode.id === node) {
-                        reachedNode = true;
-                    }
-                }
-            });
-        }
-        else {
-            let label = resources.find((resource) => resource.id === node)?.label || '';
-            // Might be a source
-            if (!label) {
-                const source = sources.find((source) => source.id === node.source);
-                if (source) {
-                    label = source.nodes.find((resource) => resource.id === node)?.label || '';
-                }
-            }
-            // If we are jumping to a complete other spot and the container knows it, it can request a complete reset
-            if (!resetHierarchy) {
-                newHierarchy = hierarchy.slice();
-            }
-            newHierarchy.push({
-                id: node,
-                label,
-            });
-        }
-        setHierarchy(newHierarchy);
-    };
-    const handleResourceSelected = (0, react_1.useCallback)((node, overlayProps) => {
+    const { source, currentResource, hierarchy, setSource, push, popUntil } = (0, useResourcePath_1.useResourcePath)();
+    const { isLoading: isSourceLoading, sources } = (0, useSources_1.useSources)({ onRequestSources });
+    const { isLoading: isResourcesLoading, resources } = (0, useChildResources_1.useChildResources)({
+        source,
+        currentResource,
+        onRequestChildren,
+    });
+    const handleResourceDrillDown = (0, react_1.useCallback)((resource) => {
+        push(resource);
+    }, [push]);
+    const handleResourceSelected = (0, react_1.useCallback)((resource, overlayProps) => {
         setPreviewModalOverlayProps(overlayProps);
-        setIsSecondaryLoading(true);
-        setSelectedId(node);
-        setSelectedNodeDetails(null);
-        onRequestResource(node).then((detail) => {
-            setSelectedNodeDetails(detail);
-            setIsSecondaryLoading(false);
-        });
+        setSelectedResource(resource);
     }, []);
-    const handleResourceDrillDown = (0, react_1.useCallback)((node, resetHierarchy) => {
-        setIsMainLoading(true);
-        setCurrentNode(node);
-        adjustHierarchy(node, resetHierarchy || false);
-        setSelectedId(null);
-        setSelectedNodeDetails(null);
-        setResources([]);
-        onRequestChildren(node).then((resources) => {
-            setResources(resources);
-            setIsMainLoading(false);
-        });
-    }, [resources, sources]);
+    const handleSourceDrilldown = (0, react_1.useCallback)((source) => {
+        setSource(source);
+    }, [setSource]);
     const handleReturnToRoot = (0, react_1.useCallback)(() => {
-        setCurrentNode(null);
-        setSelectedId(null);
-        setResources([]);
-        setHierarchy([]);
-        setSelectedNodeDetails(null);
-    }, []);
-    const handleDetailSelect = (0, react_1.useCallback)((node) => {
-        onChange(node);
+        setSource(null);
+    }, [setSource]);
+    const handleDetailSelect = (0, react_1.useCallback)((resource) => {
+        onChange({ resource, source: source?.source });
         onClose();
-    }, []);
+    }, [source]);
     const handleDetailClose = (0, react_1.useCallback)(() => {
-        setSelectedId(null);
+        setSelectedResource(null);
     }, []);
-    // On load of component fetch the list of sources
+    // When the active node changes clear the selected resource
     (0, react_1.useEffect)(() => {
-        setIsSourceLoading(true);
-        onRequestSources().then((sources) => {
-            setSources(sources);
-            setIsSourceLoading(false);
-        });
-    }, []);
+        setSelectedResource(null);
+    }, [hierarchy]);
     return (react_1.default.createElement("div", { className: "relative flex flex-col h-full" },
         react_1.default.createElement("div", { className: "flex items-center p-6" },
             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-grey-300 w-300px" },
-                react_1.default.createElement(SourceDropdown_1.default, { sources: sources, currentSource: hierarchy[0]?.id, isLoading: isSourceLoading, onSourceSelect: handleResourceDrillDown, onRootSelect: handleReturnToRoot })),
+                react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: source, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, onRootSelect: handleReturnToRoot })),
             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: "flex border-t border-grey-300 h-[calc(100%-92px)]" },
             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"),
-                currentNode === null && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading, onSourceSelect: handleResourceSelected, onSourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes })),
-                currentNode && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(ResourceBreadcrumb_1.default, { hierarchy: hierarchy, onBreadcrumbSelect: handleResourceDrillDown, onReturnToRoot: handleReturnToRoot }),
-                    react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, isLoading: isMainLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes })))),
-            react_1.default.createElement(PreviewPanel_1.default, { node: selectedId, resourceDetail: selectedNodeDetails, modalState: previewModalState, isLoading: isSecondaryLoading, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose }))));
+                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, onSourceDrillDown: handleSourceDrilldown, allowedTypes: allowedTypes })),
+                source && (react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, selectedResource: selectedResource, isLoading: isResourcesLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes }))),
+            react_1.default.createElement(PreviewPanel_1.default, { resource: selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose }))));
 }
 exports.default = ResourcePickerContainer;

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { Source, NodeIdentifier } from '../index';
-export default function SourceDropdown({ sources, currentSource, isLoading, onRootSelect, onSourceSelect, }: {
-    sources: Array<Source>;
-    currentSource: NodeIdentifier | null;
+import type { Source, ScopedSource } from '../types';
+export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }: {
+    sources: Source[];
+    selectedSource: ScopedSource | null;
     isLoading: boolean;
     onRootSelect: () => void;
-    onSourceSelect: (node: NodeIdentifier, resetHierarchy: boolean) => void;
+    onSourceSelect: (source: ScopedSource) => void;
 }): JSX.Element;

package/lib/SourceDropdown/SourceDropdown.js

@@ -31,7 +31,9 @@ const interactions_1 = require("@react-aria/interactions");
 const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
 const Icon_1 = __importDefault(require("../Icons/Icon"));
 const uuid_1 = __importDefault(require("../uuid"));
-function SourceDropdown({ sources, currentSource, isLoading, onRootSelect, onSourceSelect, }) {
+const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
+function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }) {
+    const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const [uniqueId] = (0, react_1.useState)((0, uuid_1.default)());
     const buttonRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -50,34 +52,23 @@ function SourceDropdown({ sources, currentSource, isLoading, onRootSelect, onSou
             }
         },
     });
-    const handleSourceClick = (id) => {
+    const handleSourceClick = (source) => {
         setIsOpen(false);
         buttonRef.current?.focus();
-        onSourceSelect(id, true);
+        onSourceSelect(source);
     };
     const handleRootSelect = () => {
         setIsOpen(false);
         buttonRef.current?.focus();
         onRootSelect();
     };
-    let currentResource = undefined;
-    for (let i = 0; i < sources.length; i++) {
-        const source = sources[i];
-        if (currentSource?.source === source.id) {
-            currentResource = source.nodes.find((node) => {
-                if (node.id.id === currentSource?.id) {
-                    return node;
-                }
-            });
-        }
-    }
     return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 border border-2 rounded border-gray-300" },
         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 text-sm font-semibold p-2 w-full" },
-            currentResource && (react_1.default.createElement(react_1.default.Fragment, null,
+            selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "sr-only" }, "current source "),
-                react_1.default.createElement(Icon_1.default, { icon: currentResource.type, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5" }),
-                react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, currentResource.label))),
-            !currentResource && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Icon_1.default, { icon: selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5" }),
+                react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, selectedSource.resource?.name || selectedSource.source.name))),
+            !selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "sr-only" }, "view "),
                 react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
                 "All available sources")),
@@ -90,16 +81,17 @@ function SourceDropdown({ sources, currentSource, isLoading, onRootSelect, onSou
             isLoading && (react_1.default.createElement("li", { className: "mt-6" },
                 react_1.default.createElement(Spinner_1.default, { size: "lg", label: "Loading sources" }))),
             !isLoading &&
-                sources.map(({ id: sourceId, name, nodes }, index) => {
-                    return (react_1.default.createElement("li", { key: sourceId, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
+                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 ? '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" }, name)),
-                        nodes?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${name} nodes`, className: "flex flex-col mt-2" }, nodes.map(({ type, id: nodeId, selected, label }) => {
-                            return (react_1.default.createElement("li", { key: `${sourceId}-${nodeId.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: () => handleSourceClick(nodeId), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${selected ? 'bg-blue-100 text-blue-400' : ''}` },
-                                    react_1.default.createElement(Icon_1.default, { icon: type, resourceSource: "matrix", "aria-label": type, className: "shrink-0 mr-2.5" }),
-                                    react_1.default.createElement("span", { className: "text-left mr-7" }, label),
-                                    nodeId === currentResource?.id && (react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
+                            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 }) => {
+                            const isSelectedSource = source.id === selectedSource?.source.id && resource?.id === selectedSource?.resource?.id;
+                            return (react_1.default.createElement("li", { key: `${source.id}-${resource?.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: () => handleSourceClick({ source, resource }), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${isSelectedSource ? 'bg-blue-100 text-blue-400' : ''}` },
+                                    react_1.default.createElement(Icon_1.default, { icon: resource?.type.code, resourceSource: "matrix", "aria-label": resource?.type.name, className: "shrink-0 mr-2.5" }),
+                                    react_1.default.createElement("span", { className: "text-left mr-7" }, resource?.name || source.name),
+                                    isSelectedSource && (react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
                         })))));
                 }))));
 }

package/lib/SourceList/SourceList.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { NodeIdentifier, Source } from '../index';
+import { Source, ScopedSource } from '../types';
 export interface SourceListProps {
-    sources: Array<Source>;
+    sources: Source[];
     previewModalState: OverlayTriggerState;
     isLoading: boolean;
-    onSourceSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
-    onSourceDrillDown: (node: NodeIdentifier) => void;
+    onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
+    onSourceDrillDown: (node: ScopedSource) => void;
     allowedTypes?: string[] | undefined;
 }
 declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, }: SourceListProps) => JSX.Element;

package/lib/SourceList/SourceList.js

@@ -30,7 +30,9 @@ const react_1 = __importStar(require("react"));
 const ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
 const SkeletonList_1 = require("../Skeleton/List/SkeletonList");
 const clsx_1 = __importDefault(require("clsx"));
+const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
 const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, }) {
+    const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const listRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (listRef.current) {
@@ -46,12 +48,12 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
             react_1.default.createElement("li", null,
                 react_1.default.createElement(SkeletonList_1.SkeletonList, { itemCount: 3 })))),
         !isLoading &&
-            sources.map(({ id: sourceId, name, nodes }, index) => {
-                return (react_1.default.createElement("li", { key: sourceId, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
+            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 ? '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" }, name)),
-                    nodes?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${name} nodes`, className: "flex flex-col" }, nodes.map(({ type, id: nodeId, selected, label, childCount }) => {
-                        return (react_1.default.createElement(ResourceItem_1.default, { key: `${sourceId}-${nodeId.id}`, id: nodeId, selected: selected, label: label, type: type, childCount: childCount, previewModalState: previewModalState, onSelect: onSourceSelect, onDrillDown: onSourceDrillDown, className: "mt-3 rounded-lg", allowedTypes: allowedTypes }));
+                        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(ResourceItem_1.default, { key: `${source.id}-${resource?.id}`, item: { source, resource }, label: resource?.name || source.name, type: resource?.type.code || 'folder', childCount: resource?.childCount || 0, previewModalState: previewModalState, onSelect: onSourceSelect, onDrillDown: onSourceDrillDown, className: "mt-3 rounded-lg", allowedTypes: allowedTypes }));
                     })))));
             })));
 };

package/lib/index.css

@@ -354,6 +354,9 @@
   white-space: nowrap;
   border-width: 0;
 }
+.squiz-rb-scope .visible {
+  visibility: visible;
+}
 .squiz-rb-scope .collapse {
   visibility: collapse;
 }
@@ -405,6 +408,9 @@
 .squiz-rb-scope .z-50 {
   z-index: 50;
 }
+.squiz-rb-scope .z-\[9998\] {
+  z-index: 9998;
+}
 .squiz-rb-scope .z-\[9999\] {
   z-index: 9999;
 }

package/lib/index.d.ts

@@ -1,37 +1,14 @@
 import React from 'react';
-export type NodeIdentifier = {
-    source: string | null;
-    id: string;
-};
-export type ResourceDetail = {
-    type: string;
-    name: string;
-    properties: Map<string, any>;
-};
-export type Resource = {
-    id: NodeIdentifier;
-    type: string;
-    selected: boolean;
-    label: string;
-    childCount: number;
-};
-export type Source = {
-    id: string;
-    name: string;
-    nodes: Array<Resource>;
-};
-export type Hierarchy = {
-    id: NodeIdentifier;
-    label: string;
-};
-export default function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onRequestResource, onChange, }: {
+import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
+export type { HydratedResourceReference, Resource, ResourceReference, Source };
+export default function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, }: {
     showButtonLabel?: boolean;
     buttonLabel: string;
     buttonIcon: React.ReactNode;
     modalTitle: string;
     allowedTypes: string[] | undefined;
     onRequestSources: () => Promise<Source[]>;
-    onRequestChildren(id: NodeIdentifier): Promise<Resource[]>;
-    onRequestResource(id: NodeIdentifier): Promise<ResourceDetail | null>;
-    onChange(resource: NodeIdentifier | null): void;
+    onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+    onRequestResource(reference: ResourceReference): Promise<Resource | null>;
+    onChange(resource: HydratedResourceReference | null): void;
 }): JSX.Element;

package/lib/index.js

@@ -4,12 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-// import { ResourceBrowserInternalContext } from './InternalContext/InternalContext';
 const ModalTrigger_1 = __importDefault(require("./Modal/ModalTrigger"));
 const ResourcePickerContainer_1 = __importDefault(require("./ResourcePickerContainer/ResourcePickerContainer"));
-function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onRequestResource, onChange, }) {
+function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, }) {
     const showLabel = showButtonLabel || false;
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(ModalTrigger_1.default, { showLabel: showLabel, label: buttonLabel, icon: buttonIcon }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onRequestResource: onRequestResource, onChange: onChange })))));
+        react_1.default.createElement(ModalTrigger_1.default, { showLabel: showLabel, label: buttonLabel, icon: buttonIcon }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange })))));
 }
 exports.default = ComponentEditorContentBrowser;

package/lib/uuid.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 function uuid() {
-    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16));
+    return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (Number(c) ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16));
 }
 exports.default = uuid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.14",
+  "version": "1.32.1-alpha.16",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -14,6 +14,7 @@
     "clean": "rimraf ./lib"
   },
   "dependencies": {
+    "@squiz/dx-json-schema-lib": "1.32.1-alpha.16",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
     "react-stately": "3.21.0"
@@ -70,5 +71,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "e4c2143502807400276f09fe018456d49fd64923"
+  "gitHead": "09c056ac1b2e99db11146b4ecb545b10063db835"
 }

package/src/Hooks/useCategorisedSources.spec.ts

@@ -0,0 +1,39 @@
+import { renderHook } from '@testing-library/react';
+import { useCategorisedSources } from './useCategorisedSources';
+import { mockResource, mockSource } from '../__mocks__/MockModels';
+
+describe('useCategorisedSources', () => {
+  it('Should return a list of scoped categories with non-restricted sources in their own category', () => {
+    const resources = [mockResource({ name: 'Images' }), mockResource({ name: 'Audio files' })];
+    const sources = [
+      mockSource({
+        id: '1',
+        name: 'Matrix source',
+        nodes: resources,
+      }),
+      mockSource({
+        id: '2',
+        name: 'Unrestricted source',
+      }),
+    ];
+    const {
+      result: { current: result },
+    } = renderHook(() => useCategorisedSources(sources));
+
+    expect(result).toEqual([
+      {
+        key: '1',
+        label: 'Matrix source',
+        sources: [
+          { resource: resources[0], source: sources[0] },
+          { resource: resources[1], source: sources[0] },
+        ],
+      },
+      {
+        key: 'other',
+        label: 'Other systems',
+        sources: [{ resource: null, source: sources[1] }],
+      },
+    ]);
+  });
+});