@squiz/resource-browser 1.35.1-alpha.6 → 1.38.0-alpha.2

package/lib/Hooks/useChildResources.d.ts

@@ -8,7 +8,7 @@ type UseChildResourcesProps = {
  * Triggers a reload of the child resources when the source or current resource change.
  */
 export declare const useChildResources: ({ source, currentResource, onRequestChildren }: UseChildResourcesProps) => {
-    data: never[] | Resource[];
+    data: Resource[] | never[];
     error: Error | null;
     isLoading: boolean;
     reload: () => void;

package/lib/Hooks/useChildResources.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChildResources = void 0;
-const useAsync_1 = require("./useAsync");
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 /**
  * Triggers a reload of the child resources when the source or current resource change.
  */
-const useChildResources = ({ source, currentResource, onRequestChildren }) => (0, useAsync_1.useAsync)({
+const useChildResources = ({ source, currentResource, onRequestChildren }) => (0, generic_browser_lib_1.useAsync)({
     callback: () => (source ? onRequestChildren(source.source, currentResource || source.resource) : []),
     defaultValue: [],
 }, [source, currentResource]);

package/lib/Hooks/useResource.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResource = void 0;
-const useAsync_1 = require("./useAsync");
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 /**
  * Loads the resource indicated by the provided reference.
  */
-const useResource = ({ onRequestResource, reference }) => (0, useAsync_1.useAsync)({
+const useResource = ({ onRequestResource, reference }) => (0, generic_browser_lib_1.useAsync)({
     callback: () => (reference ? onRequestResource(reference) : null),
     defaultValue: null,
 }, [reference?.source, reference?.resource]);

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -1,13 +1,5 @@
-import { OverlayTriggerState } from 'react-stately';
-import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { Resource } from '../types';
-export interface PreviewPanelProps {
-    resource: Resource | null;
-    modalState: OverlayTriggerState;
-    previewModalOverlayProps: DOMAttributes<FocusableElement>;
-    allowedTypes: string[] | undefined;
-    onSelect: (resource: Resource) => void;
-    onClose: () => void;
-}
-declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, }: PreviewPanelProps) => JSX.Element;
-export default PreviewPanel;
+/// <reference types="react" />
+import { PreviewPanelProps } from '@squiz/generic-browser-lib';
+export type { PreviewPanelProps };
+declare const _default: import("react").FC<import("@squiz/generic-browser-lib").PreviewPanelHOCProps & PreviewPanelProps>;
+export default _default;

package/lib/PreviewPanel/PreviewPanel.js

@@ -1,59 +1,8 @@
 "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 generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const MatrixResource_1 = __importDefault(require("./details/MatrixResource"));
-const PreviewModal_1 = __importDefault(require("./PreviewModal"));
-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)' });
-    // If we are on mobile and the selected resource changes show the preview panel modal.
-    (0, react_1.useEffect)(() => {
-        if (!modalState.isOpen) {
-            modalState.setOpen(Boolean(resource && isMobile));
-        }
-    }, [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, { 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(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"),
-        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")))),
-        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;
+exports.default = (0, generic_browser_lib_1.PreviewPanelHOC)(MatrixResource_1.default);

package/lib/PreviewPanel/details/MatrixResource.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Icon_1 = __importDefault(require("../../Icons/Icon"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
 const MatrixResource = ({ resource: { id, type, name, 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.code, resourceSource: "matrix", className: "w-14 h-14" }),
+            react_1.default.createElement(generic_browser_lib_1.Icon, { 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" },

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.js

@@ -22,12 +22,9 @@ 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 Icon_1 = __importDefault(require("../Icons/Icon"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }) {
     // Track expanded state
     const [expandedHierarchy, setExpandedHierarchy] = (0, react_1.useState)(false);
@@ -43,7 +40,7 @@ const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnTo
         react_1.default.createElement("ol", { className: "flex flex-wrap 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: "" }))),
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'root', "aria-label": "Return to source list", className: "" }))),
             hierarchy.map(({ key, label, node }, index) => {
                 return (react_1.default.createElement("li", { key: `${key}`, className: "resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2" },
                     index !== hierarchy.length - 1 && (react_1.default.createElement("button", { type: "button", onClick: () => onBreadcrumbSelect(node) },

package/lib/ResourceList/ResourceList.js

@@ -22,14 +22,9 @@ 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 ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
-const SkeletonListItem_1 = require("../Skeleton/ListItem/SkeletonListItem");
-const ResourceState_1 = __importDefault(require("../ResourceState/ResourceState"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }) {
     const listRef = (0, react_1.useRef)(null);
     // When resources change, because we are on a new page, reset focus to the list
@@ -40,16 +35,15 @@ const ResourceList = function ({ resources, selectedResource, previewModalState,
             });
         }
     }, [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 focus-visible:outline-0" },
-        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 && error && react_1.default.createElement(ResourceState_1.default, { state: "error", message: error.message, handleReload: handleReload }),
-        !isLoading && !error && resources.length === 0 && (react_1.default.createElement(ResourceState_1.default, { state: "empty", handleReload: handleReturnToRoot })),
-        !isLoading &&
-            !error &&
+    if (isLoading) {
+        return react_1.default.createElement(generic_browser_lib_1.SkeletonList, { itemCount: 8, ariaLabel: "loading Resource list", className: "text-sm font-semibold" });
+    }
+    return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `Resource list`, className: "flex flex-col text-sm font-semibold px-7 my-4 focus-visible:outline-0" },
+        error && react_1.default.createElement(generic_browser_lib_1.ResourceState, { state: "error", message: error.message, handleReload: handleReload }),
+        !error && resources.length === 0 && react_1.default.createElement(generic_browser_lib_1.ResourceState, { state: "empty", handleReload: handleReturnToRoot }),
+        !error &&
             resources.map((resource) => {
-                return (react_1.default.createElement(ResourceItem_1.default, { key: resource.id, item: resource, selected: resource.id == selectedResource?.id, label: resource.name, type: resource.type.code, childCount: resource.childCount, previewModalState: previewModalState, onSelect: onResourceSelect, onDrillDown: onResourceDrillDown, className: "border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b", allowedTypes: allowedTypes }));
+                return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: resource.id, item: resource, selected: resource.id == selectedResource?.id, label: resource.name, type: resource.type.code, childCount: resource.childCount, previewModalState: previewModalState, onSelect: onResourceSelect, onDrillDown: onResourceDrillDown, className: "border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b", allowedTypes: allowedTypes }));
             })));
 };
 exports.default = ResourceList;

package/lib/ResourcePicker/ResourcePicker.js

@@ -7,7 +7,7 @@ const react_1 = __importDefault(require("react"));
 const AdsClickRounded_1 = __importDefault(require("@mui/icons-material/AdsClickRounded"));
 const AddCircleOutlineRounded_1 = __importDefault(require("@mui/icons-material/AddCircleOutlineRounded"));
 const PhotoLibraryRounded_1 = __importDefault(require("@mui/icons-material/PhotoLibraryRounded"));
-const ModalTrigger_1 = __importDefault(require("../Modal/ModalTrigger"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const Error_1 = require("./States/Error");
 const Loading_1 = require("./States/Loading");
 const Selected_1 = require("./States/Selected");
@@ -17,7 +17,7 @@ const ResourcePicker = ({ resource, allowedTypes, error, isLoading, isDisabled,
     const isEmpty = resource === null && !isLoading && !error;
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'bg-gray-300') },
         isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
-        isEmpty ? (react_1.default.createElement(ModalTrigger_1.default, { showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
+        isEmpty ? (react_1.default.createElement(generic_browser_lib_1.ModalTrigger, { showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
             react_1.default.createElement("div", { className: "resource-picker-info__layout" },
                 isLoading && react_1.default.createElement(Loading_1.LoadingState, null),
                 error && react_1.default.createElement(Error_1.ErrorState, { error: error, isDisabled: isDisabled, onClear: onClear }),

package/lib/ResourcePicker/States/Error.js

@@ -5,10 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorState = void 0;
 const react_1 = __importDefault(require("react"));
-const Icon_1 = __importDefault(require("../../Icons/Icon"));
-const ResetButton_1 = require("../ResetButton");
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const ErrorState = ({ error, isDisabled, onClear }) => (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement(Icon_1.default, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
+    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
     react_1.default.createElement("div", { className: "text-red-300 w-full" }, error.message),
-    react_1.default.createElement(ResetButton_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
+    react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
 exports.ErrorState = ErrorState;

package/lib/ResourcePicker/States/Loading.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingState = void 0;
 const react_1 = __importDefault(require("react"));
-const Spinner_1 = __importDefault(require("../../Spinner/Spinner"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const LoadingState = () => (react_1.default.createElement("div", { className: "col-start-2 col-end-2" },
-    react_1.default.createElement(Spinner_1.default, { label: "Loading selection", className: "m-2" })));
+    react_1.default.createElement(generic_browser_lib_1.Spinner, { label: "Loading selection", className: "m-2" })));
 exports.LoadingState = LoadingState;

package/lib/ResourcePicker/States/Selected.js

@@ -6,18 +6,17 @@ 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 Icon_1 = __importDefault(require("../../Icons/Icon"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
-const ResetButton_1 = require("../ResetButton");
 const SelectedState = ({ resource: { id, type, name, status, squizImage }, isDisabled, onClear, }) => {
     const fileSize = squizImage?.imageVariations?.original?.byteSize;
     const fileWidth = squizImage?.imageVariations?.original?.width;
     const fileHeight = squizImage?.imageVariations?.original?.height;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Icon_1.default, { icon: type.code, resourceSource: "matrix", className: "w-4 h-4 flex self-center" }),
+            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-4 h-4 flex self-center" }),
             react_1.default.createElement("div", { className: "justify-self-start self-center" }, name),
-            react_1.default.createElement(ResetButton_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })),
+            react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })),
         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" },

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -28,20 +28,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_stately_1 = require("react-stately");
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const SourceList_1 = __importDefault(require("../SourceList/SourceList"));
 const ResourceList_1 = __importDefault(require("../ResourceList/ResourceList"));
 const ResourceBreadcrumb_1 = __importDefault(require("../ResourceBreadcrumb/ResourceBreadcrumb"));
 const PreviewPanel_1 = __importDefault(require("../PreviewPanel/PreviewPanel"));
 const SourceDropdown_1 = __importDefault(require("../SourceDropdown/SourceDropdown"));
 const useResourcePath_1 = require("../Hooks/useResourcePath");
-const useAsync_1 = require("../Hooks/useAsync");
 const useChildResources_1 = require("../Hooks/useChildResources");
 function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onChange, onClose, }) {
     const previewModalState = (0, react_stately_1.useOverlayTriggerState)({});
     const [selectedResource, setSelectedResource] = (0, react_1.useState)(null);
     const [previewModalOverlayProps, setPreviewModalOverlayProps] = (0, react_1.useState)({});
     const { source, currentResource, hierarchy, setSource, push, popUntil } = (0, useResourcePath_1.useResourcePath)();
-    const { data: sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, useAsync_1.useAsync)({ callback: onRequestSources, defaultValue: [] }, []);
+    const { data: sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, generic_browser_lib_1.useAsync)({ callback: onRequestSources, defaultValue: [] }, []);
     const { data: resources, isLoading: isResourcesLoading, reload: handleResourceReload, error: resourceError, } = (0, useChildResources_1.useChildResources)({ source, currentResource, onRequestChildren });
     const handleResourceDrillDown = (0, react_1.useCallback)((resource) => {
         push(resource);
@@ -81,6 +81,7 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
                 hierarchy.length > 0 && (react_1.default.createElement(ResourceBreadcrumb_1.default, { hierarchy: hierarchy, onBreadcrumbSelect: popUntil, onReturnToRoot: handleReturnToRoot })),
                 !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, error: sourceError })),
                 source && (react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, selectedResource: selectedResource, isLoading: isResourcesLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes, handleReturnToRoot: handleReturnToRoot, handleReload: handleResourceReload, error: resourceError }))),
-            react_1.default.createElement(PreviewPanel_1.default, { resource: selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose }))));
+            react_1.default.createElement("div", { className: "sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white" },
+                react_1.default.createElement(PreviewPanel_1.default, { resource: selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose })))));
 }
 exports.default = ResourcePickerContainer;

package/lib/SourceDropdown/SourceDropdown.js

@@ -28,8 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const interactions_1 = require("@react-aria/interactions");
-const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
-const Icon_1 = __importDefault(require("../Icons/Icon"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const uuid_1 = __importDefault(require("../uuid"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
 function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }) {
@@ -66,20 +65,20 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
         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(Icon_1.default, { icon: selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
+                react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 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]" }, selectedSource.resource?.name || selectedSource.source.name))),
             !selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "sr-only" }, "view "),
-                react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
+                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(Icon_1.default, { 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 ${!isOpen ? 'hidden' : ''}` },
+            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(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
+                    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(Spinner_1.default, { size: "sm", label: "Loading sources", className: "m-3" }))),
+                react_1.default.createElement(generic_browser_lib_1.Spinner, { size: "sm", label: "Loading sources", className: "m-3" }))),
             !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 ? 'mt-3' : ''}` },
@@ -89,9 +88,9 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                             const isSelectedSource = source.id === selectedSource?.source.id && resource?.id === selectedSource?.resource?.id;
                             return (react_1.default.createElement("li", { key: `${source.id}-${resource?.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
                                 react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick({ source, resource }), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
-                                    react_1.default.createElement(Icon_1.default, { icon: resource?.type.code, resourceSource: "matrix", "aria-label": resource?.type.name, className: "shrink-0 mr-2.5" }),
+                                    react_1.default.createElement(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(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
+                                    isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
                         })))));
                 }))));
 }

package/lib/SourceList/SourceList.js

@@ -27,11 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
-const SkeletonList_1 = require("../Skeleton/List/SkeletonList");
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const clsx_1 = __importDefault(require("clsx"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-const ResourceState_1 = __importDefault(require("../ResourceState/ResourceState"));
 const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, error, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const listRef = (0, react_1.useRef)(null);
@@ -42,21 +40,20 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
             });
         }
     }, []);
-    return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `${isLoading ? 'loading' : ''} Source list`, className: (0, clsx_1.default)('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0', !isLoading && 'px-7 py-4') },
-        isLoading && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("li", null,
-                react_1.default.createElement(SkeletonList_1.SkeletonList, { itemCount: 3 })),
-            react_1.default.createElement("li", null,
-                react_1.default.createElement(SkeletonList_1.SkeletonList, { itemCount: 3 })))),
-        !isLoading && error && react_1.default.createElement(ResourceState_1.default, { state: "error", message: error.message, handleReload: handleReload }),
-        !isLoading &&
-            !error &&
+    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 &&
             categorisedSources.map(({ key, label, sources }, index) => {
                 return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
                     react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
                         react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, label)),
                     sources.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col" }, sources.map(({ source, resource }) => {
-                        return (react_1.default.createElement(ResourceItem_1.default, { key: `${source.id}-${resource?.id}`, item: { source, resource }, label: resource?.name || source.name, type: resource?.type.code || 'folder', previewModalState: previewModalState, onSelect: onSourceSelect, className: "mt-3 rounded-lg" }));
+                        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: onSourceSelect, className: "mt-3 rounded-lg", showChevron: true }));
                     })))));
             })));
 };

package/lib/index.css

@@ -577,6 +577,9 @@
 .squiz-rb-scope .h-screen {
   height: 100vh;
 }
+.squiz-rb-scope .max-h-80 {
+  max-height: 20rem;
+}
 .squiz-rb-scope .min-h-\[64px\] {
   min-height: 64px;
 }
@@ -920,57 +923,6 @@
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.squiz-rb-scope .spinner {
-  display: inline-block;
-  border-radius: 9999px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: currentColor;
-  border-right-color: transparent;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.squiz-rb-scope .spinner {
-  animation: spin 1s linear infinite;
-  vertical-align: -0.125em;
-}
-@media (prefers-reduced-motion: reduce) {
-  @keyframes spin {
-  }
-  .squiz-rb-scope .spinner {
-    animation: spin 1.5s linear infinite;
-  }
-}
-.squiz-rb-scope .spinner {
-  height: 20px;
-  width: 20px;
-}
-.squiz-rb-scope .spinner__wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.squiz-rb-scope .spinner--md {
-  height: 32px;
-  width: 32px;
-}
-.squiz-rb-scope .animate-skeleton-pulse {
-  animation: pulse 2s linear infinite;
-}
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.45;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
   max-width: 250px;
   cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.35.1-alpha.6",
+  "version": "1.38.0-alpha.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "1.35.1-alpha.6",
+    "@squiz/dx-json-schema-lib": "1.38.0-alpha.2",
+    "@squiz/generic-browser-lib": "1.38.0-alpha.2",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -73,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "59c19bcba89607f7909e83d5d9f6895841870a3a"
+  "gitHead": "9c2f775a7d6607a73e5b25577d82be939d74ffec"
 }

package/src/Hooks/useChildResources.ts

@@ -1,5 +1,5 @@
 import { Resource, ScopedSource, Source } from '../types';
-import { useAsync } from './useAsync';
+import { useAsync } from '@squiz/generic-browser-lib';
 
 type UseChildResourcesProps = {
   source: ScopedSource | null;

package/src/Hooks/useResource.ts

@@ -1,4 +1,4 @@
-import { useAsync } from './useAsync';
+import { useAsync } from '@squiz/generic-browser-lib';
 import { Resource, ResourceReference } from '../types';
 
 type UseResourceProps = {

package/src/Hooks/useSources.ts

@@ -1,5 +1,5 @@
 import { Source } from '../types';
-import { useAsync } from './useAsync';
+import { useAsync } from '@squiz/generic-browser-lib';
 
 type UseSourcesProps = {
   onRequestSources: () => Promise<Source[]>;

package/src/PreviewPanel/PreviewPanel.tsx

@@ -1,87 +1,6 @@
-import React, { useEffect } from 'react';
-import { useMediaQuery } from 'react-responsive';
-import { OverlayTriggerState } from 'react-stately';
-import { DOMAttributes, FocusableElement } from '@react-types/shared';
-
-import Icon, { IconOptions } from '../Icons/Icon';
+import { PreviewPanelHOC, PreviewPanelProps } from '@squiz/generic-browser-lib';
 import MatrixResource from './details/MatrixResource';
-import { Resource } from '../types';
-import PreviewModal from './PreviewModal';
-
-export interface PreviewPanelProps {
-  resource: Resource | null;
-  modalState: OverlayTriggerState;
-  previewModalOverlayProps: DOMAttributes<FocusableElement>;
-  allowedTypes: string[] | undefined;
-  onSelect: (resource: Resource) => void;
-  onClose: () => void;
-}
-
-const PreviewPanel = function ({
-  resource,
-  previewModalOverlayProps,
-  modalState,
-  onSelect,
-  onClose,
-}: PreviewPanelProps) {
-  // Watch the media size to see if we are on mobile size
-  const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
-
-  // If we are on mobile and the selected resource changes show the preview panel modal.
-  useEffect(() => {
-    if (!modalState.isOpen) {
-      modalState.setOpen(Boolean(resource && isMobile));
-    }
-  }, [resource, isMobile]);
-
-  const previewPanel = resource && (
-    <>
-      <div className="flex flex-col grow">
-        <MatrixResource resource={resource} />
-      </div>
-      <div className="flex justify-end border-t border-gray-300">
-        <button
-          type="button"
-          onClick={() => onSelect(resource)}
-          className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5"
-        >
-          Select
-        </button>
-      </div>
-    </>
-  );
-
-  return (
-    <div className="sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white">
-      {/* Dialog has its own title */}
-      {!isMobile && <h3 className="sr-only">Resource Details</h3>}
-
-      {/* Nothing selected, show an info message */}
-      {resource === null && (
-        <div className="max-sm:hidden flex flex-col h-full">
-          <div className="flex flex-col grow items-center mt-20 mx-20">
-            <Icon icon={'resource-select' as IconOptions} aria-hidden />
-            <div className="text-sm text-gray-600 text-center mt-4">Make a selection to see more info here.</div>
-          </div>
-          <div className="flex justify-end border-t border-gray-300">
-            <button disabled type="button" className="rounded text-sm text-white bg-blue-300/[.6] py-2 px-2.5 m-5">
-              Select
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Resource details shows in a new modal / bottom popover on mobile size */}
-      {resource && isMobile && modalState.isOpen && (
-        <PreviewModal state={modalState} overlayProps={previewModalOverlayProps} onClose={onClose}>
-          {previewPanel}
-        </PreviewModal>
-      )}
 
-      {/* If not mobile, just print the details out */}
-      {resource && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
-    </div>
-  );
-};
+export type { PreviewPanelProps };
 
-export default PreviewPanel;
+export default PreviewPanelHOC(MatrixResource);