@squiz/resource-browser 1.69.1 → 2.1.8-rc.0

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

@@ -1,9 +1,15 @@
-import React from 'react';
-import { Resource } from '../../types';
+import React, { ReactElement } from 'react';
+import { ResourceBrowserResource } from '../../types';
 export type SelectedStateProps = {
-    resource: Resource;
+    resource: ResourceBrowserResource;
+    showThumbnail: boolean;
+    icon: ReactElement | undefined;
+    label: string;
+    description: Array<ReactElement>;
     isDisabled?: boolean;
     onClear: () => void;
     resourcePickerContainer: any;
+    isModalOpen?: boolean;
+    onModalStateChange?(isOpen: boolean): void;
 };
-export declare const SelectedState: ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, resourcePickerContainer, }: SelectedStateProps) => React.JSX.Element;
+export declare const SelectedState: ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }: SelectedStateProps) => React.JSX.Element;

package/lib/ResourcePicker/States/Selected.js

@@ -5,42 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedState = void 0;
 const react_1 = __importDefault(require("react"));
-const pretty_bytes_1 = __importDefault(require("pretty-bytes"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
+const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
 const CircledLoopIcon_1 = require("../../Icons/CircledLoopIcon");
-const SelectedState = ({ resource: { id, type, name, status, squizImage, url }, isDisabled, onClear, resourcePickerContainer, }) => {
-    const fileSize = squizImage?.imageVariations?.original?.byteSize;
-    const fileWidth = squizImage?.imageVariations?.original?.width;
-    const fileHeight = squizImage?.imageVariations?.original?.height;
-    const replaceAsset = (react_1.default.createElement(generic_browser_lib_1.ModalTrigger, { showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: react_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
+const SelectedState = ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }) => {
+    const modalController = {
+        isOpen: isModalOpen,
+        onOpenChange: onModalStateChange,
+    };
+    const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: react_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        type.code === 'image' && url ? (react_1.default.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
-            react_1.default.createElement("img", { src: url, className: "w-full h-full object-cover object-center", alt: name }))) : (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-4 h-4 mt-1 flex self-start" })),
+        showThumbnail && resource.squizImage ? (react_1.default.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
+            react_1.default.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (react_1.default.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
         react_1.default.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
-            react_1.default.createElement("span", null, name),
-            react_1.default.createElement("dl", { className: "col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm" },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("dt", { className: "hidden" },
-                        "Status: ",
-                        status.name),
-                    react_1.default.createElement("dd", { className: "flex items-center" },
-                        react_1.default.createElement(StatusIndicator_1.default, { status: status }))),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("dt", { className: "hidden" }, "Asset ID"),
-                    react_1.default.createElement("dd", { className: "text-gray-700" },
-                        "#",
-                        id))),
-            fileSize && (react_1.default.createElement("dl", { className: "col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm" },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("dt", { className: "hidden" }, "Asset size"),
-                    react_1.default.createElement("dd", { className: "text-gray-600" },
-                        (0, pretty_bytes_1.default)(fileSize),
-                        ", ",
-                        fileWidth,
-                        " x ",
-                        fileHeight,
-                        "px"))))),
+            label,
+            description),
         react_1.default.createElement("div", { className: "flex" },
             replaceAsset,
             react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear }))));

package/lib/SourceDropdown/SourceDropdown.d.ts

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

package/lib/SourceDropdown/SourceDropdown.js

@@ -22,31 +22,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 interactions_1 = require("@react-aria/interactions");
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const uuid_1 = __importDefault(require("../utils/uuid"));
-const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-const HistoryIcon_1 = require("../Icons/HistoryIcon");
-function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, setSource, currentResource, recentSources, }) {
-    const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
-    const filteredRecentSources = recentSources.filter((item) => item.path?.length);
-    const [recentLocationSelection, setRecentLocationSelection] = (0, react_1.useState)();
-    const [uniqueId] = (0, react_1.useState)((0, uuid_1.default)());
+const react_aria_1 = require("react-aria");
+function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
+    const [uniqueId] = (0, react_1.useState)((0, generic_browser_lib_1.uuid)());
     const buttonRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     // Watch the focus and blur on the menu and close if focus leaves the control
-    const { focusWithinProps } = (0, interactions_1.useFocusWithin)({
+    const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({
         onBlurWithin: () => {
             setIsOpen(false);
         },
     });
     // Listen for Esc key within this element
-    const { keyboardProps } = (0, interactions_1.useKeyboard)({
+    const { keyboardProps } = (0, react_aria_1.useKeyboard)({
         onKeyDown: (e) => {
             if (isOpen && e.key === 'Escape') {
                 setIsOpen(false);
@@ -56,96 +47,26 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
     });
     const handleSourceClick = (source) => {
         setIsOpen(false);
-        setRecentLocationSelection(null);
         buttonRef.current?.focus();
         onSourceSelect(source);
     };
-    const handleRootSelect = () => {
-        setIsOpen(false);
-        setRecentLocationSelection(null);
-        buttonRef.current?.focus();
-        onRootSelect();
-    };
-    const handleRecentLocationClick = (location) => {
-        setIsOpen(false);
-        setRecentLocationSelection(location);
-        buttonRef.current?.focus();
-        if (location.path) {
-            const [rootNode, ...path] = location.path;
-            setSource({
-                source: location.source,
-                resource: rootNode,
-            }, path);
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        if (recentLocationSelection?.path) {
-            const lastResource = recentLocationSelection.path[recentLocationSelection.path.length - 1];
-            // If the current resource selected in the resource browser is no longer the item selected in the
-            // recent locations section dropdown then we set the selection to null to prevent active statuses.
-            if (currentResource && currentResource.id !== lastResource?.id) {
-                setRecentLocationSelection(null);
-            }
-        }
-    }, [recentLocationSelection, currentResource]);
+    if (!sources.length) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
     return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 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-1.5 w-full" },
-            selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { className: "sr-only" }, "current source "),
-                react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 
-                    // Ignoring this specific line in test coverage because its a super niche issue that I could only replicate in Matrix
-                    /* istanbul ignore next */
-                    recentLocationSelection
-                        ? currentResource?.type.code || selectedSource.resource?.type.code
-                        : selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
-                react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, 
-                // Ignoring this specific line in test coverage because its a super niche issue that I could only replicate in Matrix
-                /* istanbul ignore next */
-                recentLocationSelection
-                    ? currentResource?.name || selectedSource.resource?.name || selectedSource.source.name
-                    : 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(generic_browser_lib_1.Icon, { icon: 'root', "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
-                "All available sources")),
+            react_1.default.createElement("span", { className: "sr-only" }, "current source "),
+            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: selectedSource.type, "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
+            react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, selectedSource.name),
             react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'arrow-down', "aria-hidden": true, className: "absolute right-3" })),
-        react_1.default.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-2 rounded border-gray-300 p-2 overflow-y-scroll max-h-80 ${!isOpen ? 'hidden' : ''}` },
-            react_1.default.createElement("li", { key: "return-root", className: "flex items-center text-sm font-semibold mb-2 bg-white border-1 rounded border-grey-200" },
-                react_1.default.createElement("button", { type: "button", onClick: handleRootSelect, className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
-                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
-                    "All available sources")),
-            isLoading && (react_1.default.createElement("li", { className: "mt-2" },
-                react_1.default.createElement(generic_browser_lib_1.Spinner, { size: "sm", label: "Loading sources", className: "m-3" }))),
-            !isLoading && filteredRecentSources.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
-                react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
-                    react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5 flex gap-1 items-center" },
-                        react_1.default.createElement(HistoryIcon_1.HistoryIcon, null),
-                        "Recent locations")),
-                react_1.default.createElement("ul", { "aria-label": "recent location nodes", className: "flex flex-col mt-2" }, filteredRecentSources.map((item, index) => {
-                    const lastResource = item.path && item.path[item.path.length - 1];
-                    const isSelectedSource = item.source?.id === selectedSource?.source.id &&
-                        lastResource?.id === recentLocationSelection?.path?.[recentLocationSelection.path?.length - 1]?.id;
-                    return (react_1.default.createElement("li", { key: `${index}-${item.source?.id}-${lastResource?.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
-                        react_1.default.createElement("button", { type: "button", onClick: () => handleRecentLocationClick(item), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
-                            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: (lastResource?.type.code || 'folder'), resourceSource: "matrix", "aria-label": lastResource?.name || item.source?.name, className: "shrink-0 mr-2.5" }),
-                            react_1.default.createElement("span", { className: "text-left mr-7" }, lastResource?.name || item.source?.name),
-                            isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
-                })))),
-            !isLoading &&
-                categorisedSources.map(({ key, label, sources }, index) => {
-                    return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || filteredRecentSources.length > 0 ? 'mt-3' : ''}` },
-                        react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
-                            react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, label)),
-                        sources?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col mt-2" }, sources.map(({ source, resource }) => {
-                            const isSelectedSource = source.id === selectedSource?.source.id &&
-                                resource?.id === selectedSource?.resource?.id &&
-                                !recentLocationSelection;
-                            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` },
-                                    react_1.default.createElement(generic_browser_lib_1.Icon, { 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(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
-                        })))));
-                }))));
+        react_1.default.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll max-h-80 ${!isOpen ? 'hidden' : ''}` }, sources.map((source) => {
+            const { id, name, type } = source;
+            const isSelectedSource = id === selectedSource.id;
+            return (react_1.default.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
+                react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick(source), className: `relative grow flex items-center p-2 border-1 border-white rounded hover:bg-gray-50 hover:border-gray-300 focus:bg-gray-100` },
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
+                    react_1.default.createElement("span", { className: "text-left mr-7" }, name),
+                    isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
+        }))));
 }
 exports.default = SourceDropdown;

package/lib/SourceList/SourceList.d.ts

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

package/lib/SourceList/SourceList.js

@@ -1,82 +1,21 @@
 "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_1 = __importDefault(require("react"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const clsx_1 = __importDefault(require("clsx"));
-const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-const HistoryIcon_1 = require("../Icons/HistoryIcon");
-const SourceList = function ({ sources, selectedResource, previewModalState, isLoading, onSourceSelect, onSourceDrilldown, handleReload, setSource, recentSources, error, }) {
-    const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
-    const listRef = (0, react_1.useRef)(null);
-    const filteredRecentSources = recentSources.filter((item) => item.path?.length);
-    (0, react_1.useEffect)(() => {
-        if (listRef.current) {
-            listRef.current?.focus({
-                preventScroll: true,
-            });
-        }
-    }, []);
-    if (isLoading) {
-        return (react_1.default.createElement("div", { className: "flex flex-col bg-gray-100 min-h-full", "aria-label": "loading Source list" },
-            react_1.default.createElement(generic_browser_lib_1.SkeletonList, { itemCount: 3 }),
-            react_1.default.createElement(generic_browser_lib_1.SkeletonList, { itemCount: 3 })));
-    }
-    return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `Source list`, className: (0, clsx_1.default)('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0 px-7 py-4') },
-        error && react_1.default.createElement(generic_browser_lib_1.ResourceState, { state: "error", message: error.message, handleReload: handleReload }),
-        !error && filteredRecentSources.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
-            react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
-                react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5 flex gap-1 items-center" },
-                    react_1.default.createElement(HistoryIcon_1.HistoryIcon, null),
-                    "Recent locations")),
-            react_1.default.createElement("ul", { "aria-label": `recent location nodes`, className: "flex flex-col" }, filteredRecentSources.map((item, index) => {
-                if (item.path) {
-                    const lastResource = item.path[item.path.length - 1];
-                    const [rootNode, ...path] = item.path;
-                    return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${index}-${item.source?.id}-${lastResource?.id}`, item: { source: item.source, resource: lastResource }, label: lastResource?.name || item.source?.name || '', type: lastResource?.type?.code || 'folder', previewModalState: previewModalState, onSelect: () => {
-                            setSource({
-                                source: item.source,
-                                resource: rootNode,
-                            }, path);
-                        }, className: (0, clsx_1.default)(index === 0 && 'rounded-t-lg mt-3', index === filteredRecentSources.length - 1 && 'rounded-b-lg'), showChevron: true }));
-                }
-            })))),
-        !error &&
-            categorisedSources.map(({ key, label, sources }, index) => {
-                return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || filteredRecentSources.length > 0 ? 'mt-3' : ''}` },
-                    react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
-                        react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, label)),
-                    sources.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col" }, sources.map(({ source, resource }) => {
-                        if (!resource || resource.childCount === 0) {
-                            return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${source.id}-${resource?.id}`, item: { source, resource }, label: resource?.name || source.name, type: resource?.type.code || 'folder', previewModalState: previewModalState, onSelect: onSourceDrilldown, className: "mt-3 rounded-lg", showChevron: true }));
-                        }
-                        return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${source.id}-${resource?.id}`, item: { source, resource }, selected: resource?.id == selectedResource?.id && resource != null, label: resource?.name || source.name, type: resource?.type.code || 'folder', childCount: resource?.childCount || undefined, previewModalState: previewModalState, onSelect: onSourceSelect, onDrillDown: onSourceDrilldown, className: "mt-3 rounded-lg", showChevron: true }));
-                    })))));
-            })));
-};
+function SourceList({ sources, onSourceSelect }) {
+    return (react_1.default.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-4.5 pr-4.5 pb-4.5 pt-3" },
+        react_1.default.createElement("div", { className: "text-md font-semibold" }, "Select an environment to use"),
+        react_1.default.createElement("ul", { tabIndex: -1, "aria-label": `environment list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
+            return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
+                react_1.default.createElement("button", { onClick: () => {
+                        onSourceSelect(source);
+                    }, className: "w-full p-1 mt-3 bg-white border-1 border-grey-200 min-h-[64px] rounded-lg flex items-center text-md font-semibold" },
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: source.type, className: "ml-4" }),
+                    react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word ml-4" }, source.name || source.id),
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'arrow-right', className: "absolute ml-1 right-4" }))));
+        }))));
+}
 exports.default = SourceList;