@squiz/resource-browser 1.32.1-alpha.33 → 1.32.1-alpha.34

package/lib/Hooks/useAsync.d.ts

@@ -0,0 +1,21 @@
+import { DependencyList } from 'react';
+export type UseAsyncProps<TReturnType, TDefaultValueType> = {
+    /** The async callback to call for fetching data. */
+    callback: () => TReturnType | Promise<TReturnType>;
+    /** The default value to populate the data as when initially mounted or reloading data. */
+    defaultValue: TReturnType | TDefaultValueType;
+};
+/**
+ * Hook for invoking a piece of async code and keeping track of its state.
+ *
+ * Data is loaded in 3 different ways:
+ * 1. On initial mount.
+ * 2. When any of the `deps` change.
+ * 3. When the `relaod` function is called.
+ */
+export declare const useAsync: <TReturnType, TDefaultValueType>({ callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>, deps: DependencyList) => {
+    data: TReturnType | TDefaultValueType;
+    error: Error | null;
+    isLoading: boolean;
+    reload: () => void;
+};

package/lib/Hooks/useAsync.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsync = void 0;
+const react_1 = require("react");
+/**
+ * Hook for invoking a piece of async code and keeping track of its state.
+ *
+ * Data is loaded in 3 different ways:
+ * 1. On initial mount.
+ * 2. When any of the `deps` change.
+ * 3. When the `relaod` function is called.
+ */
+const useAsync = ({ callback, defaultValue }, deps) => {
+    const [data, setData] = (0, react_1.useState)(defaultValue);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const reload = (0, react_1.useCallback)(() => {
+        setIsLoading(true);
+        setError(null);
+        setData(defaultValue);
+        try {
+            const result = callback();
+            if (result instanceof Promise) {
+                // if the callback returned a promise wait for it to either resolve or reject.
+                result
+                    .then((resolved) => {
+                    setData(resolved);
+                    setIsLoading(false);
+                })
+                    .catch((e) => {
+                    setError(e instanceof Error ? e : new Error(String(e)));
+                    setIsLoading(false);
+                });
+            }
+            else {
+                // if the callback returned something other than a promise assume it is the data we want.
+                setData(result);
+                setIsLoading(false);
+            }
+        }
+        catch (e) {
+            // callback threw outside of the scope of the promise.
+            setError(e instanceof Error ? e : new Error(String(e)));
+            setIsLoading(false);
+        }
+    }, deps);
+    // reload data on dependency change (and initial mount)
+    (0, react_1.useEffect)(() => {
+        reload();
+    }, deps);
+    return { data, error, isLoading, reload };
+};
+exports.useAsync = useAsync;

package/lib/Hooks/useChildResources.d.ts

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

package/lib/Hooks/useChildResources.js

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

package/lib/Hooks/useResource.d.ts

@@ -0,0 +1,15 @@
+import { Resource, ResourceReference } from '../types';
+type UseResourceProps = {
+    onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
+    reference?: ResourceReference | null;
+};
+/**
+ * Loads the resource indicated by the provided reference.
+ */
+export declare const useResource: ({ onRequestResource, reference }: UseResourceProps) => {
+    data: Resource | null;
+    error: Error | null;
+    isLoading: boolean;
+    reload: () => void;
+};
+export {};

package/lib/Hooks/useResource.js

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

package/lib/Hooks/useResourcePath.d.ts

@@ -9,7 +9,7 @@ import { Hierarchy, ScopedSource, Resource } from '../types';
 export declare const useResourcePath: () => {
     source: ScopedSource | null;
     currentResource: Resource | null;
-    hierarchy: Hierarchy<ScopedSource | Resource>;
+    hierarchy: Hierarchy<Resource | ScopedSource>;
     setSource: (source: ScopedSource | null) => void;
     push: (resource: Resource) => void;
     popUntil: (node: ScopedSource | Resource) => void;

package/lib/PreviewPanel/details/MatrixResource.js

@@ -24,7 +24,8 @@ const MatrixResource = ({ resource: { id, type, name, status } }) => {
                 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(StatusIndicator_1.default, { status: status }),
+                        react_1.default.createElement(StatusIndicator_1.default, { className: "mr-1", status: status }),
+                        " ",
                         status.name))))));
 };
 exports.default = MatrixResource;

package/lib/ResourceBrowserContext/ResourceBrowserContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Resource, ResourceReference, Source } from '../types';
+export type ResourceBrowserContextProps = {
+    onRequestSources: () => Promise<Source[]>;
+    onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+    onRequestResource(reference: ResourceReference): Promise<Resource | null>;
+};
+export declare const ResourceBrowserContext: React.Context<ResourceBrowserContextProps>;

package/lib/ResourceBrowserContext/ResourceBrowserContext.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowserContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.ResourceBrowserContext = react_1.default.createContext({
+    onRequestSources: () => {
+        throw new Error('onRequestSources has not been configured.');
+    },
+    onRequestChildren: () => {
+        throw new Error('onRequestChildren has not been configured.');
+    },
+    onRequestResource: () => {
+        throw new Error('onRequestResource has not been configured.');
+    },
+});

package/lib/ResourceItem/ResourceItem.js

@@ -11,7 +11,7 @@ const ResourceItem = ({ item, selected, label, type, childCount, previewModalSta
     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 min-h-[64px] ${className}` },
+    return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}` },
         react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), "aria-label": childCount === undefined ? `Drill down to ${label} children` : '', className: `
           relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount !== undefined && childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `, title: title },

package/lib/ResourcePicker/ResetButton.d.ts

@@ -0,0 +1,5 @@
+export type ResetButtonProps = {
+    onClick: () => void;
+    isDisabled?: boolean;
+};
+export declare const ResetButton: ({ onClick, isDisabled }: ResetButtonProps) => JSX.Element;

package/lib/ResourcePicker/ResetButton.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetButton = void 0;
+const react_1 = __importDefault(require("react"));
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const ResetButton = ({ onClick, isDisabled }) => (react_1.default.createElement("button", { type: "button", "aria-label": `Remove selection`, title: `Remove selection`, className: "text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed", disabled: isDisabled, onClick: onClick },
+    react_1.default.createElement(CloseRounded_1.default, null)));
+exports.ResetButton = ResetButton;

package/lib/ResourcePicker/ResourcePicker.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DOMAttributes } from '@react-types/shared';
+import { Resource } from '../types';
+export type ResourcePickerProps = {
+    resource: Resource | null;
+    allowedTypes: string[] | undefined;
+    error: Error | null;
+    isLoading: boolean;
+    isDisabled?: boolean;
+    children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
+    onClear: () => void;
+};
+declare const ResourcePicker: ({ resource, allowedTypes, error, isLoading, isDisabled, children, onClear, }: ResourcePickerProps) => JSX.Element;
+export default ResourcePicker;

package/lib/ResourcePicker/ResourcePicker.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 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 Error_1 = require("./States/Error");
+const Loading_1 = require("./States/Loading");
+const Selected_1 = require("./States/Selected");
+const clsx_1 = __importDefault(require("clsx"));
+const ResourcePicker = ({ resource, allowedTypes, error, isLoading, isDisabled, children, onClear, }) => {
+    const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
+    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" }), 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, onClear: onClear }),
+                resource && react_1.default.createElement(Selected_1.SelectedState, { resource: resource, isDisabled: isDisabled, onClear: onClear }))))));
+};
+exports.default = ResourcePicker;

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

@@ -0,0 +1,6 @@
+export type ErrorStateProps = {
+    error: Error;
+    isDisabled?: boolean;
+    onClear: () => void;
+};
+export declare const ErrorState: ({ error, isDisabled, onClear }: ErrorStateProps) => JSX.Element;

package/lib/ResourcePicker/States/Error.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 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("div", { className: "text-red-300" }, error.message),
+    react_1.default.createElement(ResetButton_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
+exports.ErrorState = ErrorState;

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

@@ -0,0 +1 @@
+export declare const LoadingState: () => JSX.Element;

package/lib/ResourcePicker/States/Loading.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 LoadingState = () => (react_1.default.createElement("div", { className: "col-start-2 col-end-2" },
+    react_1.default.createElement(Spinner_1.default, { label: "Loading selection", className: "text-gray-600 m-2" })));
+exports.LoadingState = LoadingState;

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

@@ -0,0 +1,7 @@
+import { Resource } from '../../types';
+export type SelectedStateProps = {
+    resource: Resource;
+    isDisabled?: boolean;
+    onClear: () => void;
+};
+export declare const SelectedState: ({ resource: { id, type, name, status, squizImage }, isDisabled, onClear, }: SelectedStateProps) => JSX.Element;

package/lib/ResourcePicker/States/Selected.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 Icon_1 = __importDefault(require("../../Icons/Icon"));
+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("div", { className: "justify-self-start self-center" }, name),
+            react_1.default.createElement(ResetButton_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" },
+                    "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("div", null,
+                react_1.default.createElement("dt", { className: "hidden" }, "Asset size"),
+                react_1.default.createElement("dd", { className: "ml-4 text-gray-600" },
+                    (0, pretty_bytes_1.default)(fileSize),
+                    ", ",
+                    fileWidth,
+                    " x ",
+                    fileHeight,
+                    "px"))))));
+};
+exports.SelectedState = SelectedState;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -34,15 +34,15 @@ const ResourceBreadcrumb_1 = __importDefault(require("../ResourceBreadcrumb/Reso
 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");
-const useSources_1 = require("../Hooks/useSources");
 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 { sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, useSources_1.useSources)({ onRequestSources });
-    const { resources, isLoading: isResourcesLoading, reloadResources: handleResourceReload, error: resourceError, } = (0, useChildResources_1.useChildResources)({ source, currentResource, onRequestChildren });
+    const { data: sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, useAsync_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);
     }, [push]);

package/lib/Skeleton/ListItem/SkeletonListItem.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (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" },
+const SkeletonListItem = () => (react_1.default.createElement("li", { className: "flex items-center p-1 first:mt-0 bg-white border-1 border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b" },
     react_1.default.createElement("div", { className: "animate-skeleton-pulse 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" },

package/lib/SourceDropdown/SourceDropdown.js

@@ -62,7 +62,7 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
         buttonRef.current?.focus();
         onRootSelect();
     };
-    return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 border border-2 rounded border-gray-300" },
+    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 "),
@@ -73,8 +73,8 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                 react_1.default.createElement(Icon_1.default, { 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 border-2 rounded border-gray-300 p-2 ${!isOpen ? 'hidden' : ''}` },
-            react_1.default.createElement("li", { key: "return-root", className: "flex items-center text-sm font-semibold mb-2 bg-white border rounded border-grey-200" },
+        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("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" }),
                     "All available sources")),

package/lib/StatusIndicator/StatusIndicator.d.ts

@@ -1,6 +1,7 @@
 import { Status } from '../types';
 export type StatusIndicatorProps = {
+    className?: string;
     status: Status;
 };
-declare const StatusIndicator: ({ status }: StatusIndicatorProps) => JSX.Element;
+declare const StatusIndicator: ({ className, status }: StatusIndicatorProps) => JSX.Element;
 export default StatusIndicator;

package/lib/StatusIndicator/StatusIndicator.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
 const statusColour = {
     // Duplicated from the Matrix repository.
     // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
@@ -19,8 +20,8 @@ const statusColour = {
     safe_editing_pending_approval: '#d688db',
     safe_edit_approved_to_go_live: '#ffb34a',
 };
-const StatusIndicator = ({ status }) => {
+const StatusIndicator = ({ className, status }) => {
     const color = statusColour[status.code] || statusColour.unknown;
-    return (react_1.default.createElement("span", { style: { backgroundColor: color }, className: "block rounded-full w-3 h-3 border border-solid border-black border-opacity-20" }));
+    return (react_1.default.createElement("span", { style: { backgroundColor: color }, className: (0, clsx_1.default)('block rounded-full w-3 h-3 border-1 border-solid border-black border-opacity-20', className), title: status.name }));
 };
 exports.default = StatusIndicator;

package/lib/index.css

@@ -475,6 +475,9 @@
 .squiz-rb-scope .ml-auto {
   margin-left: auto;
 }
+.squiz-rb-scope .mr-1 {
+  margin-right: 0.25rem;
+}
 .squiz-rb-scope .mr-2 {
   margin-right: 0.5rem;
 }
@@ -711,6 +714,9 @@
 .squiz-rb-scope .border {
   border-width: 1px;
 }
+.squiz-rb-scope .border-1 {
+  border-width: 1px;
+}
 .squiz-rb-scope .border-2 {
   border-width: 2px;
 }

package/lib/index.d.ts

@@ -1,11 +1,12 @@
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
+import { ResourceBrowserContext } from './ResourceBrowserContext/ResourceBrowserContext';
 export type { HydratedResourceReference, Resource, ResourceReference, Source };
-export default function ComponentEditorContentBrowser({ modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, isDisabled, }: {
+export { ResourceBrowserContext };
+type ResourceBrowserInputProps = {
     modalTitle: string;
-    allowedTypes: string[] | undefined;
-    onRequestSources: () => Promise<Source[]>;
-    onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
-    onRequestResource(reference: ResourceReference): Promise<Resource | null>;
-    onChange(resource: HydratedResourceReference | null): void;
+    allowedTypes?: string[];
     isDisabled?: boolean;
-}): JSX.Element;
+    value: ResourceReference | null;
+    onChange(resource: HydratedResourceReference | null): void;
+};
+export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, isDisabled, }: ResourceBrowserInputProps) => JSX.Element;

package/lib/index.js

@@ -1,20 +1,42 @@
 "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 = __importDefault(require("react"));
-const ModalTrigger_1 = __importDefault(require("./Modal/ModalTrigger"));
+exports.ResourceBrowserInput = exports.ResourceBrowserContext = void 0;
+const react_1 = __importStar(require("react"));
 const ResourcePickerContainer_1 = __importDefault(require("./ResourcePickerContainer/ResourcePickerContainer"));
-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 clsx_1 = __importDefault(require("clsx"));
-function ComponentEditorContentBrowser({ modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, isDisabled, }) {
-    const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
+const ResourceBrowserContext_1 = require("./ResourceBrowserContext/ResourceBrowserContext");
+Object.defineProperty(exports, "ResourceBrowserContext", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContext; } });
+const ResourcePicker_1 = __importDefault(require("./ResourcePicker/ResourcePicker"));
+const useResource_1 = require("./Hooks/useResource");
+const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, isDisabled, }) => {
+    const { onRequestSources, onRequestChildren, onRequestResource } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
+    const { data: resource, error, isLoading } = (0, useResource_1.useResource)({ onRequestResource, reference: value });
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        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" })),
-            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" }), isDisabled: isDisabled }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange }))))));
-}
-exports.default = ComponentEditorContentBrowser;
+        react_1.default.createElement(ResourcePicker_1.default, { resource: resource, allowedTypes: allowedTypes, error: error, isLoading: isLoading, isDisabled: isDisabled, onClear: () => onChange(null) }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange })))));
+};
+exports.ResourceBrowserInput = ResourceBrowserInput;