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

package/jest.config.ts

@@ -3,10 +3,21 @@ import type { Config } from 'jest';
 // Sync object
 const config: Config = {
   preset: 'ts-jest',
+  clearMocks: true,
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.stories.{ts,tsx}'],
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 90,
+      lines: 90,
+      statements: 90,
+    },
+  },
+  errorOnDeprecated: true,
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   testTimeout: 60_000,
   testEnvironment: 'jsdom',
-  passWithNoTests: true,
   testPathIgnorePatterns: ['/lib/', `/node_modules/`],
   maxWorkers: 1,
   moduleNameMapper: {

package/lib/Hooks/useCategorisedSources.d.ts

@@ -0,0 +1,14 @@
+import { ScopedSource, Source } from '../types';
+export type CategorisedSource = {
+    key: string;
+    label: string;
+    sources: ScopedSource[];
+};
+/**
+ * Groups a list of source into scoped/un-scoped for rendering in the source list.
+ *
+ * @param {Source[]} sources
+ *
+ * @return {SourceList}
+ */
+export declare const useCategorisedSources: (sources: Source[]) => CategorisedSource[];

package/lib/Hooks/useCategorisedSources.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCategorisedSources = void 0;
+const react_1 = require("react");
+/**
+ * Groups a list of source into scoped/un-scoped for rendering in the source list.
+ *
+ * @param {Source[]} sources
+ *
+ * @return {SourceList}
+ */
+const useCategorisedSources = (sources) => {
+    return (0, react_1.useMemo)(() => {
+        const categorised = [];
+        const uncategorised = [];
+        sources.forEach((source) => {
+            if (source.nodes.length > 0) {
+                const category = { key: source.id, label: source.name, sources: [] };
+                source.nodes.forEach((resource) => {
+                    category.sources.push({ source, resource });
+                });
+                categorised.push(category);
+            }
+            else {
+                uncategorised.push({ source, resource: null });
+            }
+        });
+        if (uncategorised.length > 0) {
+            categorised.push({
+                key: 'other',
+                label: 'Other systems',
+                sources: uncategorised,
+            });
+        }
+        return categorised;
+    }, [sources]);
+};
+exports.useCategorisedSources = useCategorisedSources;

package/lib/Hooks/useChildResources.d.ts

@@ -0,0 +1,19 @@
+import { Resource, ScopedSource, Source } from '../types';
+type UseChildResourcesProps = {
+    source: ScopedSource | null;
+    currentResource: Resource | null;
+    onRequestChildren: (source: Source, resource: Resource | null) => Promise<Resource[]>;
+};
+/**
+ * Triggers a reload of the child resources when the source or current resource change.
+ *
+ * @param {ScopedSource|null} source
+ * @param {Resource|null}     currentResource
+ * @param {Function}          onRequestChildren
+ */
+export declare const useChildResources: ({ source, currentResource, onRequestChildren }: UseChildResourcesProps) => {
+    isLoading: boolean;
+    error: Error | null;
+    resources: Resource[];
+};
+export {};

package/lib/Hooks/useChildResources.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChildResources = void 0;
+const react_1 = require("react");
+/**
+ * Triggers a reload of the child resources when the source or current resource change.
+ *
+ * @param {ScopedSource|null} source
+ * @param {Resource|null}     currentResource
+ * @param {Function}          onRequestChildren
+ */
+const useChildResources = ({ source, currentResource, onRequestChildren }) => {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [resources, setResources] = (0, react_1.useState)([]);
+    // trigger a reload of the resources when the source or the current resource changes.
+    (0, react_1.useEffect)(() => {
+        setError(null);
+        setResources([]);
+        if (source) {
+            setIsLoading(true);
+            onRequestChildren(source.source, currentResource)
+                .then((resources) => {
+                setResources(resources);
+                setIsLoading(false);
+            })
+                .catch((e) => {
+                setError(e);
+                setIsLoading(false);
+            });
+        }
+    }, [source, currentResource]);
+    return { isLoading, error, resources };
+};
+exports.useChildResources = useChildResources;

package/lib/Hooks/useResourcePath.d.ts

@@ -0,0 +1,16 @@
+import { Hierarchy, ScopedSource, Resource } from '../types';
+/**
+ * Retains the state relating to where in the resource tree we are.
+ *
+ * Including:
+ *  * The source.
+ *  * A full path from the source to the leaf resource being browser.
+ */
+export declare const useResourcePath: () => {
+    source: ScopedSource | null;
+    currentResource: Resource | null;
+    hierarchy: Hierarchy<ScopedSource | Resource>;
+    setSource: (source: ScopedSource | null) => void;
+    push: (resource: Resource) => void;
+    popUntil: (node: ScopedSource | Resource) => void;
+};

package/lib/Hooks/useResourcePath.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResourcePath = void 0;
+const react_1 = require("react");
+/**
+ * Retains the state relating to where in the resource tree we are.
+ *
+ * Including:
+ *  * The source.
+ *  * A full path from the source to the leaf resource being browser.
+ */
+const useResourcePath = () => {
+    const [source, setSourceInternal] = (0, react_1.useState)(null);
+    const [resourceStack, setResourceStack] = (0, react_1.useState)([]);
+    const setSource = (0, react_1.useCallback)((source) => {
+        setSourceInternal(source);
+        setResourceStack([]);
+    }, []);
+    const push = (0, react_1.useCallback)((resource) => {
+        setResourceStack([...resourceStack, resource]);
+    }, [resourceStack]);
+    const popUntil = (0, react_1.useCallback)((node) => {
+        if ('source' in node) {
+            // source node selected, just switch to the source
+            setSource(node);
+            return;
+        }
+        // resource node selected
+        const newResourceStack = [...resourceStack];
+        // pop until we reach the node that was selected in the breadcrumb
+        while (newResourceStack.length > 0 && newResourceStack[newResourceStack.length - 1].id !== node?.id) {
+            newResourceStack.pop();
+        }
+        if (newResourceStack.length === 0) {
+            // if we didn't find the node clear the source to push the user back to the root
+            setSource(null);
+        }
+        else {
+            setResourceStack(newResourceStack);
+        }
+    }, [source, resourceStack]);
+    const hierarchy = (0, react_1.useMemo)(() => {
+        if (!source) {
+            return [];
+        }
+        return [
+            {
+                key: `source:${source.source.id}-resource:${source.resource?.id || 'unscoped'}`,
+                label: source.resource?.name || source.source.name,
+                node: source,
+            },
+            ...resourceStack.map((resource) => ({ key: resource.id, node: resource, label: resource.name })),
+        ];
+    }, [source, resourceStack]);
+    return {
+        source,
+        currentResource: (resourceStack[resourceStack.length - 1] || null),
+        hierarchy,
+        setSource,
+        push,
+        popUntil,
+    };
+};
+exports.useResourcePath = useResourcePath;

package/lib/Hooks/useSources.d.ts

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

package/lib/Hooks/useSources.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSources = void 0;
+const react_1 = require("react");
+/**
+ * Loads and caches the source list when a component using the hook is mounted.
+ *
+ * @param {Function} onRequestSources
+ */
+const useSources = ({ onRequestSources }) => {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [sources, setSources] = (0, react_1.useState)([]);
+    const loadSources = (0, react_1.useCallback)(() => {
+        onRequestSources()
+            .then((sources) => {
+            setIsLoading(false);
+            setSources(sources);
+        })
+            .catch((error) => {
+            setIsLoading(false);
+            setError(error);
+        });
+    }, []);
+    // trigger a load of the sources when the component using the hook is initially rendered.
+    (0, react_1.useEffect)(loadSources, []);
+    return { isLoading, error, sources, reload: loadSources };
+};
+exports.useSources = useSources;

package/lib/Icons/Icon.d.ts

@@ -9,21 +9,21 @@ export declare const iconSources: {
         close: typeof import("./Generics").Close;
     };
     matrix: {
-        audio: typeof import("./MatrixResources").Audio;
-        excel: typeof import("./MatrixResources").Excel;
+        audio_file: typeof import("./MatrixResources").Audio;
+        excel_doc: typeof import("./MatrixResources").Excel;
         folder: typeof import("./MatrixResources").Folder;
         generic_file: typeof import("./MatrixResources").GenericFile;
         image: typeof import("./MatrixResources").Image;
         page_standard: typeof import("./MatrixResources").Page;
-        pdf: typeof import("./MatrixResources").Pdf;
-        powerpoint: typeof import("./MatrixResources").Powerpoint;
+        pdf_file: typeof import("./MatrixResources").Pdf;
+        powerpoint_doc: typeof import("./MatrixResources").Powerpoint;
         site: typeof import("./MatrixResources").Site;
-        video: typeof import("./MatrixResources").Video;
-        word: typeof import("./MatrixResources").Word;
+        video_file: typeof import("./MatrixResources").Video;
+        word_doc: typeof import("./MatrixResources").Word;
     };
 };
 export type ResourceSources = keyof typeof iconSources;
-export type IconOptions = keyof (typeof iconSources)[ResourceSources];
+export type IconOptions = string;
 /**
  * Renders an icon based on the resource source and the icon name
  * @param {{resourceSource?: ResourceSources; icon?: IconOptions; props: React.HTMLAttributes<HTMLOrSVGElement>}} props - The props for the Icon component

package/lib/Icons/Icon.js

@@ -27,15 +27,13 @@ exports.iconSources = {
  * <Icon resourceSource="matrix" icon="page" className="custom-class" />
  */
 function Icon({ resourceSource = 'generic', icon, isDecorative = true, ...props }) {
-    // Loop through the resource sources
-    for (const source in exports.iconSources) {
-        // If the resource source is the current source and the icon is in the current source map, render the icon
-        if (resourceSource === source && icon && icon in exports.iconSources[source]) {
-            // Get the icon from the current source map
-            const Icon = exports.iconSources[source][icon];
-            // Render the icon
-            return react_1.default.createElement(Icon, { isDecorative: isDecorative, ...props });
-        }
+    const icons = exports.iconSources[resourceSource] || null;
+    // If the resource source is the current source and the icon is in the current source map, render the icon
+    if (icons && icon && icon in icons) {
+        // Get the icon from the current source map
+        const Icon = icons[icon];
+        // Render the icon
+        return react_1.default.createElement(Icon, { isDecorative: isDecorative, ...props });
     }
     // If the icon is not defined, render the default icon
     const DefaultIcon = MatrixResourceMap_1.default['generic_file'];

package/lib/Icons/MatrixResources/Audio.js

@@ -23,6 +23,6 @@ function Audio({ isDecorative, ...props }) {
         react_1.default.createElement("circle", { cx: "7.5", cy: "16.5", fill: "#73c0cb", r: "2", stroke: "#057e91" }),
         react_1.default.createElement("path", { d: "m16 7 1 .32v7.18c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5z", fill: "#057e91" }),
         react_1.default.createElement("circle", { cx: "14.5", cy: "14.5", fill: "#73c0cb", r: "2", stroke: "#057e91" }),
-        !isDecorative && react_1.default.createElement("title", null, "audio icon")));
+        !isDecorative && react_1.default.createElement("title", null, "audio file icon")));
 }
 exports.default = Audio;

package/lib/Icons/MatrixResources/Excel.js

@@ -22,6 +22,6 @@ function Excel({ isDecorative, ...props }) {
         react_1.default.createElement("rect", { y: "8", width: "12", height: "12", rx: "2", fill: "#4FAD6F" }),
         react_1.default.createElement("path", { d: "M3.5 11.5L8.5 16.5", stroke: "white", strokeLinecap: "round" }),
         react_1.default.createElement("path", { d: "M8.5 11.5L3.5 16.5", stroke: "white", strokeLinecap: "round" }),
-        !isDecorative && react_1.default.createElement("title", null, "excel icon")));
+        !isDecorative && react_1.default.createElement("title", null, "excel doc icon")));
 }
 exports.default = Excel;

package/lib/Icons/MatrixResources/MatrixResourceMap.d.ts

@@ -1,15 +1,15 @@
 import { Audio, Excel, Folder, GenericFile, Image, Page, Pdf, Powerpoint, Site, Video, Word } from '.';
 declare const MatrixResourceMap: {
-    audio: typeof Audio;
-    excel: typeof Excel;
+    audio_file: typeof Audio;
+    excel_doc: typeof Excel;
     folder: typeof Folder;
     generic_file: typeof GenericFile;
     image: typeof Image;
     page_standard: typeof Page;
-    pdf: typeof Pdf;
-    powerpoint: typeof Powerpoint;
+    pdf_file: typeof Pdf;
+    powerpoint_doc: typeof Powerpoint;
     site: typeof Site;
-    video: typeof Video;
-    word: typeof Word;
+    video_file: typeof Video;
+    word_doc: typeof Word;
 };
 export default MatrixResourceMap;

package/lib/Icons/MatrixResources/MatrixResourceMap.js

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const _1 = require(".");
 // Define our map of matrix types to icons
 const MatrixResourceMap = {
-    audio: _1.Audio,
-    excel: _1.Excel,
+    audio_file: _1.Audio,
+    excel_doc: _1.Excel,
     folder: _1.Folder,
     generic_file: _1.GenericFile,
     image: _1.Image,
     page_standard: _1.Page,
-    pdf: _1.Pdf,
-    powerpoint: _1.Powerpoint,
+    pdf_file: _1.Pdf,
+    powerpoint_doc: _1.Powerpoint,
     site: _1.Site,
-    video: _1.Video,
-    word: _1.Word,
+    video_file: _1.Video,
+    word_doc: _1.Word,
 };
 // Export our map
 exports.default = MatrixResourceMap;

package/lib/Icons/MatrixResources/Pdf.js

@@ -26,6 +26,6 @@ function Pdf({ isDecorative, ...props }) {
             react_1.default.createElement("path", { d: "m7.5 17.3v-3.6c0-.1105.08954-.2.2-.2h.3c.82843 0 1.5.6716 1.5 1.5v1c0 .8284-.67157 1.5-1.5 1.5h-.3c-.11046 0-.2-.0895-.2-.2z" }),
             react_1.default.createElement("path", { d: "m11.5 17.5v-3.8c0-.1105.0895-.2.2-.2h1.8" }),
             react_1.default.createElement("path", { d: "m11.5 15.5h1" })),
-        !isDecorative && react_1.default.createElement("title", null, "pdf icon")));
+        !isDecorative && react_1.default.createElement("title", null, "pdf file icon")));
 }
 exports.default = Pdf;

package/lib/Icons/MatrixResources/Powerpoint.js

@@ -23,6 +23,6 @@ function Powerpoint({ isDecorative, ...props }) {
         react_1.default.createElement("g", { stroke: "#fff", strokeLinecap: "round" },
             react_1.default.createElement("path", { d: "m3.5 11.5v5" }),
             react_1.default.createElement("path", { d: "m3.5 11.5h3.5c.33333 0 1.5 0 1.5 1.5s-1.16667 1.5-1.5 1.5h-3" })),
-        !isDecorative && react_1.default.createElement("title", null, "powerpoint icon")));
+        !isDecorative && react_1.default.createElement("title", null, "powerpoint doc icon")));
 }
 exports.default = Powerpoint;

package/lib/Icons/MatrixResources/Video.js

@@ -19,6 +19,6 @@ function Video({ isDecorative, ...props }) {
     return (react_1.default.createElement("svg", { fill: "none", height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props },
         react_1.default.createElement("rect", { fill: "#e0d9ef", height: "15", rx: "1.5", stroke: "#ac98d5", width: "21", x: "1.5", y: "4.5" }),
         react_1.default.createElement("path", { d: "m9.5 15.2516v-6.50318c0-.38671.42019-.62704.7535-.43097l5.5277 3.25155c.3287.1934.3287.6686 0 .862l-5.5277 3.2516c-.33331.196-.7535-.0443-.7535-.431z", fill: "#ac98d5", stroke: "#6b47b4", strokeLinecap: "round" }),
-        !isDecorative && react_1.default.createElement("title", null, "video icon")));
+        !isDecorative && react_1.default.createElement("title", null, "video file icon")));
 }
 exports.default = Video;

package/lib/Icons/MatrixResources/Word.js

@@ -23,6 +23,6 @@ function Word({ isDecorative, ...props }) {
         react_1.default.createElement("path", { d: "m14.5 3v3.5c0 .55228.4477 1 1 1h3.5", stroke: "#bcbcbc" }),
         react_1.default.createElement("rect", { fill: "#0774d2", height: "12", rx: "2", width: "12", y: "8" }),
         react_1.default.createElement("path", { d: "m2.5 11.5 1.5 5 2-5 2 5 1.5-5", stroke: "#fff", strokeLinecap: "round", strokeLinejoin: "round" }),
-        !isDecorative && react_1.default.createElement("title", null, "word icon")));
+        !isDecorative && react_1.default.createElement("title", null, "word doc icon")));
 }
 exports.default = Word;

package/lib/Modal/Modal.js

@@ -39,7 +39,7 @@ function Modal({ isDismissable, state, overlayProps, children, ...props }) {
     const { modalProps, underlayProps } = (0, react_aria_1.useModalOverlay)({ isDismissable, ...props }, state, ref);
     return (react_1.default.createElement(react_aria_1.Overlay, null,
         react_1.default.createElement("div", { className: "squiz-rb-scope" },
-            react_1.default.createElement("div", { ...underlayProps, className: "h-full z-[9999] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25" },
+            react_1.default.createElement("div", { ...underlayProps, className: "h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25" },
                 react_1.default.createElement("div", { ...modalProps, ref: ref, className: "h-full flex items-center justify-center" },
                     react_1.default.createElement(ModalContent, { ...overlayProps }, (titleProps) => children(titleProps)))))));
 }

package/lib/PreviewPanel/PreviewModal.js

@@ -74,7 +74,7 @@ function PreviewModal({ state, overlayProps, children, onClose, ...props }) {
         };
     }, [modalRef]);
     return (react_1.default.createElement(react_aria_1.Overlay, null,
-        react_1.default.createElement("div", { ref: modalRef, ...underlayProps, ...keyboardProps, className: "fixed z-50 overflow-y-scroll bottom-0 w-full h-[50vh] bg-white border-t border-gray-300" },
+        react_1.default.createElement("div", { ref: modalRef, ...underlayProps, ...keyboardProps, className: "fixed z-[9999] overflow-y-scroll bottom-0 w-full h-[50vh] bg-white border-t border-gray-300" },
             react_1.default.createElement("div", { ref: overlayRef, ...modalProps, className: "h-full" },
                 react_1.default.createElement(PreviewModalContent, { ...overlayProps, onClose: onClose }, children)))));
 }

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -1,16 +1,14 @@
 /// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { NodeIdentifier, ResourceDetail } from '../index';
+import { Resource } from '../types';
 export interface PreviewPanelProps {
-    node: NodeIdentifier | null;
-    resourceDetail: ResourceDetail | null;
-    isLoading: boolean;
+    resource: Resource | null;
     modalState: OverlayTriggerState;
     previewModalOverlayProps: DOMAttributes<FocusableElement>;
     allowedTypes: string[] | undefined;
-    onSelect: (node: NodeIdentifier) => void;
+    onSelect: (resource: Resource) => void;
     onClose: () => void;
 }
-declare const PreviewPanel: ({ node, resourceDetail, isLoading, previewModalOverlayProps, modalState, onSelect, onClose, }: PreviewPanelProps) => JSX.Element;
+declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, }: PreviewPanelProps) => JSX.Element;
 export default PreviewPanel;

package/lib/PreviewPanel/PreviewPanel.js

@@ -31,57 +31,29 @@ const react_responsive_1 = require("react-responsive");
 const Icon_1 = __importDefault(require("../Icons/Icon"));
 const MatrixResource_1 = __importDefault(require("./details/MatrixResource"));
 const PreviewModal_1 = __importDefault(require("./PreviewModal"));
-const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
-const PreviewPanel = function ({ node, resourceDetail, isLoading, previewModalOverlayProps, modalState, onSelect, onClose, }) {
+const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, }) {
     // Watch the media size to see if we are on mobile size
     const isMobile = (0, react_responsive_1.useMediaQuery)({ query: '(max-width: 640px)' });
-    const previousIsMobile = (0, react_1.useRef)(null);
+    // If we are on mobile and the selected resource changes show the preview panel modal.
     (0, react_1.useEffect)(() => {
-        if (node && isMobile) {
-            modalState.setOpen(true);
-            previousIsMobile.current = true;
+        if (!modalState.isOpen) {
+            modalState.setOpen(Boolean(resource && isMobile));
         }
-        else {
-            previousIsMobile.current = false;
-        }
-    }, []);
-    // If the media changes from mobile to non mobile or reverse toggle modal showing to undo the aria-hidden etc
-    (0, react_1.useEffect)(() => {
-        // Only trigger if we have a node selected, otherwise the modal will re-open itself as soon as its closed
-        if (node) {
-            if (previousIsMobile.current !== isMobile) {
-                previousIsMobile.current = isMobile;
-                if (isMobile) {
-                    // If no mobile open the modal automatically
-                    modalState.setOpen(true);
-                }
-                else {
-                    // If not in mobile close the modal automatically
-                    modalState.setOpen(false);
-                }
-            }
-        }
-    }, [node, isMobile, modalState]);
-    let previewPanel = node && resourceDetail && (react_1.default.createElement(react_1.default.Fragment, null,
+    }, [resource, isMobile]);
+    const previewPanel = resource && (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "flex flex-col grow" },
-            react_1.default.createElement(MatrixResource_1.default, { ...resourceDetail })),
+            react_1.default.createElement(MatrixResource_1.default, { resource: resource })),
         react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
-            react_1.default.createElement("button", { type: "button", onClick: () => onSelect(node), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5" }, "Select"))));
-    if (isLoading) {
-        previewPanel = (react_1.default.createElement("div", { className: "flex flex-col grow" },
-            react_1.default.createElement("div", { className: "flex flex-col grow items-center mt-20 mx-20" },
-                react_1.default.createElement(Spinner_1.default, null),
-                react_1.default.createElement("div", { className: "text-sm text-gray-600 text-center mt-4" }, "Loading info"))));
-    }
+            react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5" }, "Select"))));
     return (react_1.default.createElement("div", { className: "sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white" },
         !isMobile && react_1.default.createElement("h3", { className: "sr-only" }, "Resource Details"),
-        node === null && (react_1.default.createElement("div", { className: "max-sm:hidden flex flex-col h-full" },
+        resource === null && (react_1.default.createElement("div", { className: "max-sm:hidden flex flex-col h-full" },
             react_1.default.createElement("div", { className: "flex flex-col grow items-center mt-20 mx-20" },
                 react_1.default.createElement(Icon_1.default, { icon: 'resource-select', "aria-hidden": true }),
                 react_1.default.createElement("div", { className: "text-sm text-gray-600 text-center mt-4" }, "Make a selection to see more info here.")),
             react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
                 react_1.default.createElement("button", { disabled: true, type: "button", className: "rounded text-sm text-white bg-blue-300/[.6] py-2 px-2.5 m-5" }, "Select")))),
-        node && isMobile && modalState.isOpen && (react_1.default.createElement(PreviewModal_1.default, { state: modalState, overlayProps: previewModalOverlayProps, onClose: onClose }, previewPanel)),
-        node && !isMobile && react_1.default.createElement("div", { className: "flex flex-col h-full" }, previewPanel)));
+        resource && isMobile && modalState.isOpen && (react_1.default.createElement(PreviewModal_1.default, { state: modalState, overlayProps: previewModalOverlayProps, onClose: onClose }, previewPanel)),
+        resource && !isMobile && react_1.default.createElement("div", { className: "flex flex-col h-full" }, previewPanel)));
 };
 exports.default = PreviewPanel;

package/lib/PreviewPanel/details/MatrixResource.d.ts

@@ -1,12 +1,7 @@
 /// <reference types="react" />
-import { ResourceDetail } from '../../index';
-export declare enum MatrixStatus {
-    UnderConstruction = "Under Construction",
-    Live = "Live"
-}
-export type MatrixAsset = ResourceDetail & {
-    assetId?: string;
-    status?: MatrixStatus;
+import { Resource } from '../../types';
+type MatrixResourceProps = {
+    resource: Resource;
 };
-declare const MatrixResource: ({ type, name, properties }: ResourceDetail) => JSX.Element;
+declare const MatrixResource: ({ resource: { id, type, name, status } }: MatrixResourceProps) => JSX.Element;
 export default MatrixResource;

package/lib/PreviewPanel/details/MatrixResource.js

@@ -3,39 +3,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MatrixStatus = void 0;
 const react_1 = __importDefault(require("react"));
 const Icon_1 = __importDefault(require("../../Icons/Icon"));
 const statusColour = {
-    UnderConstruction: '#94D1F9',
-    Live: '#BEE509',
+    // Duplicated from the Matrix repository.
+    // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
+    // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
+    unknown: '#ff0000',
+    archived: '#c98a67',
+    under_construction: '#94d1f9',
+    pending_approval: '#d0bbf0',
+    approved_to_go_live: '#f7eaa2',
+    live: '#bfe60a',
+    up_for_review: '#72cd32',
+    safe_editing: '#ff97b0',
+    safe_editing_pending_approval: '#d688db',
+    safe_edit_approved_to_go_live: '#ffb34a',
 };
-var MatrixStatus;
-(function (MatrixStatus) {
-    MatrixStatus["UnderConstruction"] = "Under Construction";
-    MatrixStatus["Live"] = "Live";
-})(MatrixStatus = exports.MatrixStatus || (exports.MatrixStatus = {}));
-const MatrixResource = ({ type, name, properties }) => {
-    const assetId = properties.get('assetId');
-    const status = properties.get('status');
+const MatrixResource = ({ resource: { id, type, name, status } }) => {
+    const color = statusColour[status.code] || statusColour.unknown;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300" },
-            react_1.default.createElement(Icon_1.default, { icon: type, resourceSource: "matrix", className: "w-14 h-14" }),
+            react_1.default.createElement(Icon_1.default, { icon: type.code, resourceSource: "matrix", className: "w-14 h-14" }),
             react_1.default.createElement("div", { className: "mt-4 font-semibold text-base" }, name)),
         react_1.default.createElement("div", { className: "text-gray-800 mx-6 mt-4" },
             react_1.default.createElement("dl", { className: "flex flex-col text-sm" },
                 react_1.default.createElement("div", { className: "flex mb-2" },
                     react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Type"),
-                    react_1.default.createElement("dd", { className: "font-semibold" }, type)),
+                    react_1.default.createElement("dd", { className: "font-semibold" }, type.name)),
                 react_1.default.createElement("div", { className: "flex mb-2" },
                     react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Asset ID"),
                     react_1.default.createElement("dd", { className: "font-semibold" },
                         "#",
-                        assetId)),
+                        id)),
                 react_1.default.createElement("div", { className: "flex mb-2" },
                     react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Status"),
                     react_1.default.createElement("dd", { className: "flex items-center font-semibold" },
-                        react_1.default.createElement("span", { style: { backgroundColor: statusColour[status] }, className: "block rounded-full w-3 h-3 mr-1 border border-solid border-black border-opacity-20" }),
-                        MatrixStatus[status]))))));
+                        react_1.default.createElement("span", { style: { backgroundColor: color }, className: "block rounded-full w-3 h-3 mr-1 border border-solid border-black border-opacity-20" }),
+                        status.name))))));
 };
 exports.default = MatrixResource;

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { NodeIdentifier, Hierarchy } from '../index';
-export interface ResourceBreadcrumbProps {
-    hierarchy: Array<Hierarchy>;
-    onBreadcrumbSelect: (node: NodeIdentifier) => void;
+import { Hierarchy } from '../types';
+export interface ResourceBreadcrumbProps<T> {
+    hierarchy: Hierarchy<T>;
+    onBreadcrumbSelect: (node: T) => void;
     onReturnToRoot: () => void;
 }
-declare const ResourceBreadcrumb: ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps) => JSX.Element;
+declare const ResourceBreadcrumb: <T>({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps<T>) => JSX.Element;
 export default ResourceBreadcrumb;