@squiz/resource-browser 1.32.1-alpha.12

package/lib/PreviewPanel/PreviewModal.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_aria_1 = require("react-aria");
+const Icon_1 = __importDefault(require("../Icons/Icon"));
+/*
+  This has to be a separate element otherwise the focus trap fails. Assuming this is because it needs
+  to fit inside the 'Overlay' as a form of context.
+*/
+function PreviewModalContent({ children, onClose, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const { dialogProps, titleProps } = (0, react_aria_1.useDialog)(props, ref);
+    return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "h-full flex flex-col" },
+        react_1.default.createElement("h3", { ...titleProps, className: "sr-only" }, "Resource Details"),
+        react_1.default.createElement("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "absolute top-3 right-3" },
+            react_1.default.createElement(Icon_1.default, { icon: 'close', className: "" })),
+        children));
+}
+// Accept a ref for the top level modal
+function PreviewModal({ state, overlayProps, children, onClose, ...props }) {
+    const modalRef = (0, react_1.useRef)(null);
+    const overlayRef = (0, react_1.useRef)(null);
+    const { modalProps, underlayProps } = (0, react_aria_1.useModalOverlay)({ isKeyboardDismissDisabled: true, ...props }, state, overlayRef);
+    // Need to handle the ESC escape hatch ourselves as we need to run onClose to deselect the current node
+    const { keyboardProps } = (0, react_aria_1.useKeyboard)({
+        onKeyDown: (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+            else {
+                // Need to do this so TAB get handled up higher and cycles though the focus trap
+                e.continuePropagation();
+            }
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        // Check if the click event has happened outside the modal
+        function handleClickOutside(event) {
+            if (modalRef.current && !modalRef.current.contains(event?.target)) {
+                onClose();
+            }
+        }
+        // Bind the event listener
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [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: overlayRef, ...modalProps, className: "h-full" },
+                react_1.default.createElement(PreviewModalContent, { ...overlayProps, onClose: onClose }, children)))));
+}
+exports.default = PreviewModal;

package/lib/PreviewPanel/PreviewPanel.d.ts

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

package/lib/PreviewPanel/PreviewPanel.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const 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, }) {
+    // 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);
+    (0, react_1.useEffect)(() => {
+        if (node && isMobile) {
+            modalState.setOpen(true);
+            previousIsMobile.current = true;
+        }
+        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,
+        react_1.default.createElement("div", { className: "flex flex-col grow" },
+            react_1.default.createElement(MatrixResource_1.default, { ...resourceDetail })),
+        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"))));
+    }
+    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" },
+            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)));
+};
+exports.default = PreviewPanel;

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

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

package/lib/PreviewPanel/details/MatrixResource.js

@@ -0,0 +1,41 @@
+"use strict";
+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',
+};
+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');
+    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("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("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)),
+                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]))))));
+};
+exports.default = MatrixResource;

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts

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

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Icon_1 = __importDefault(require("../Icons/Icon"));
+const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }) {
+    return (react_1.default.createElement("nav", { "aria-label": "Resource breadcrumb", className: "text-sm text-gray-600 px-7 my-5" },
+        react_1.default.createElement("ol", { className: "flex items-center" },
+            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: "mr-2 before:content-['/'] before:mr-2" },
+                    index !== hierarchy.length - 1 && (react_1.default.createElement("button", { type: "button", onClick: () => onBreadcrumbSelect(id) }, label)),
+                    index === hierarchy.length - 1 && react_1.default.createElement("span", { className: "font-semibold" }, label)));
+            }))));
+};
+exports.default = ResourceBreadcrumb;

package/lib/ResourceItem/ResourceItem.d.ts

@@ -0,0 +1,19 @@
+/// <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;
+    label: string;
+    type: string;
+    childCount: number;
+    previewModalState: OverlayTriggerState;
+    onSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
+    onDrillDown: (node: NodeIdentifier) => void;
+    className: string;
+    allowedTypes?: string[] | undefined;
+}
+declare const ResourceItem: ({ id, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, }: ResourceItem) => JSX.Element;
+export default ResourceItem;

package/lib/ResourceItem/ResourceItem.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const 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 { 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: `
+          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` },
+            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" }))))));
+};
+exports.default = ResourceItem;

package/lib/ResourceList/ResourceList.d.ts

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

package/lib/ResourceList/ResourceList.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
+const SkeletonListItem_1 = require("../Skeleton/ListItem/SkeletonListItem");
+const ResourceList = function ({ resources, 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)(() => {
+        if (listRef.current) {
+            listRef.current?.focus({
+                preventScroll: true,
+            });
+        }
+    }, [resources]);
+    return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `${isLoading ? 'loading' : ''} Resource list`, className: "flex flex-col text-sm font-semibold px-7 my-4" },
+        isLoading && (react_1.default.createElement(react_1.default.Fragment, null, [...Array(8)].map((_item, index) => {
+            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 }));
+            })));
+};
+exports.default = ResourceList;

package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { NodeIdentifier, Source, Resource, ResourceDetail } from '../index';
+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;
+    onClose: () => void;
+}
+declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onRequestResource, onChange, onClose, }: ResourcePickerContainerProps): JSX.Element;
+export default ResourcePickerContainer;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -0,0 +1,145 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_stately_1 = require("react-stately");
+const SourceList_1 = __importDefault(require("../SourceList/SourceList"));
+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 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 [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) => {
+        setPreviewModalOverlayProps(overlayProps);
+        setIsSecondaryLoading(true);
+        setSelectedId(node);
+        setSelectedNodeDetails(null);
+        onRequestResource(node).then((detail) => {
+            setSelectedNodeDetails(detail);
+            setIsSecondaryLoading(false);
+        });
+    }, []);
+    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 handleReturnToRoot = (0, react_1.useCallback)(() => {
+        setCurrentNode(null);
+        setSelectedId(null);
+        setResources([]);
+        setHierarchy([]);
+        setSelectedNodeDetails(null);
+    }, []);
+    const handleDetailSelect = (0, react_1.useCallback)((node) => {
+        onChange(node);
+        onClose();
+    }, []);
+    const handleDetailClose = (0, react_1.useCallback)(() => {
+        setSelectedId(null);
+    }, []);
+    // On load of component fetch the list of sources
+    (0, react_1.useEffect)(() => {
+        setIsSourceLoading(true);
+        onRequestSources().then((sources) => {
+            setSources(sources);
+            setIsSourceLoading(false);
+        });
+    }, []);
+    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("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 }))));
+}
+exports.default = ResourcePickerContainer;

package/lib/Skeleton/List/SkeletonList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type SkeletonListProps = {
+    itemCount: number;
+    className?: string;
+};
+export declare const SkeletonList: ({ itemCount, className }: SkeletonListProps) => JSX.Element;

package/lib/Skeleton/List/SkeletonList.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonList = void 0;
+const react_1 = __importDefault(require("react"));
+const SkeletonListItem_1 = require("../ListItem/SkeletonListItem");
+const clsx_1 = __importDefault(require("clsx"));
+const SkeletonList = ({ itemCount = 8, className }) => (react_1.default.createElement("ul", { className: (0, clsx_1.default)(`flex flex-col px-7 my-4`, className), "aria-label": "Skeleton loader list" }, [...Array(itemCount)].map((_item, index) => {
+    return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: index });
+})));
+exports.SkeletonList = SkeletonList;

package/lib/Skeleton/ListItem/SkeletonListItem.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SkeletonListItem: () => JSX.Element;

package/lib/Skeleton/ListItem/SkeletonListItem.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonListItem = void 0;
+const react_1 = __importDefault(require("react"));
+const SkeletonListItem = () => (react_1.default.createElement("li", { className: "flex items-center p-1 first:mt-0 bg-white border border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b" },
+    react_1.default.createElement("div", { className: "grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded" },
+        react_1.default.createElement("span", { className: "w-6 h-6 bg-gray-200 rounded-full" }),
+        react_1.default.createElement("div", { className: "w-full d-flex flex-col mx-4" },
+            react_1.default.createElement("div", { className: "mb-1 w-3/4 h-2 bg-gray-200 rounded" }),
+            react_1.default.createElement("div", { className: "w-1/2 h-2 bg-gray-200 rounded" })),
+        react_1.default.createElement("div", { className: "ml-auto mx-4 w-12 h-2 bg-gray-200 rounded" }))));
+exports.SkeletonListItem = SkeletonListItem;

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -0,0 +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;
+    isLoading: boolean;
+    onRootSelect: () => void;
+    onSourceSelect: (node: NodeIdentifier, resetHierarchy: boolean) => void;
+}): JSX.Element;