@squiz/resource-browser 1.32.1-alpha.32 → 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/Icons/Generics/Back.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Back({ isDecorative, ...props }: {
+    isDecorative: boolean;
+} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Back.js

@@ -0,0 +1,12 @@
+"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"));
+function Back({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M15.2912 7.00501H4.12124L9.00124 2.12501C9.39124 1.73501 9.39124 1.09501 9.00124 0.705006C8.61124 0.315006 7.98124 0.315006 7.59124 0.705006L1.00124 7.29501C0.61124 7.68501 0.61124 8.31501 1.00124 8.70501L7.59124 15.295C7.98124 15.685 8.61124 15.685 9.00124 15.295C9.39124 14.905 9.39124 14.275 9.00124 13.885L4.12124 9.00501H15.2912C15.8412 9.00501 16.2912 8.55501 16.2912 8.00501C16.2912 7.45501 15.8412 7.00501 15.2912 7.00501Z", fill: "#3D3D3D" }),
+        !isDecorative && react_1.default.createElement("title", null, "back icon")));
+}
+exports.default = Back;

package/lib/Icons/Generics/Empty.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Empty({ isDecorative, ...props }: {
+    isDecorative: boolean;
+} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Empty.js

@@ -0,0 +1,12 @@
+"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"));
+function Empty({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M1.3925 3.82749C0.612495 4.60749 0.612495 5.88749 1.3925 6.66749L4.5125 9.78749C2.0125 13.5475 0.752495 18.1875 1.3325 23.1675C2.37249 32.2475 9.75249 39.6275 18.8325 40.6675C23.8125 41.2475 28.4525 39.9875 32.2125 37.4875L35.3325 40.6075C36.1125 41.3875 37.3725 41.3875 38.1525 40.6075C38.9325 39.8275 38.9325 38.5675 38.1525 37.7875L4.21249 3.82749C3.4325 3.04749 2.17249 3.04749 1.3925 3.82749ZM21.1925 36.8075C12.3725 36.8075 5.19249 29.6275 5.19249 20.8075C5.19249 17.8475 6.01249 15.0875 7.43249 12.6875L29.3125 34.5675C26.9125 35.9875 24.1525 36.8075 21.1925 36.8075ZM13.0725 7.04749L10.1725 4.12749C13.3325 2.0275 17.1125 0.807495 21.1925 0.807495C32.2325 0.807495 41.1925 9.76749 41.1925 20.8075C41.1925 24.8875 39.9725 28.6675 37.8725 31.8275L34.9525 28.9075C36.3725 26.5275 37.1925 23.7675 37.1925 20.8075C37.1925 11.9875 30.0125 4.80749 21.1925 4.80749C18.2325 4.80749 15.4725 5.62749 13.0725 7.04749Z", fill: "#949494" }),
+        !isDecorative && react_1.default.createElement("title", null, "empty icon")));
+}
+exports.default = Empty;

package/lib/Icons/Generics/GenericIconMap.d.ts

@@ -1,4 +1,4 @@
-import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close, Error, Retry } from '.';
+import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close, Error, Retry, Empty, Back } from '.';
 declare const GenericIconMap: {
     'arrow-right': typeof ArrowRight;
     'arrow-down': typeof ArrowDown;
@@ -8,5 +8,7 @@ declare const GenericIconMap: {
     close: typeof Close;
     error: typeof Error;
     retry: typeof Retry;
+    empty: typeof Empty;
+    back: typeof Back;
 };
 export default GenericIconMap;

package/lib/Icons/Generics/GenericIconMap.js

@@ -11,6 +11,8 @@ const GenericIconMap = {
     close: _1.Close,
     error: _1.Error,
     retry: _1.Retry,
+    empty: _1.Empty,
+    back: _1.Back,
 };
 // Export our map
 exports.default = GenericIconMap;

package/lib/Icons/Generics/index.d.ts

@@ -6,3 +6,5 @@ export { default as ResourceSelect } from './ResourceSelect';
 export { default as Close } from './Close';
 export { default as Error } from './Error';
 export { default as Retry } from './Retry';
+export { default as Empty } from './Empty';
+export { default as Back } from './Back';

package/lib/Icons/Generics/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Retry = exports.Error = exports.Close = exports.ResourceSelect = exports.Root = exports.Selected = exports.ArrowDown = exports.ArrowRight = void 0;
+exports.Back = exports.Empty = exports.Retry = exports.Error = exports.Close = exports.ResourceSelect = exports.Root = exports.Selected = exports.ArrowDown = exports.ArrowRight = void 0;
 // Exports all icons from the Generics folder
 var ArrowRight_1 = require("./ArrowRight");
 Object.defineProperty(exports, "ArrowRight", { enumerable: true, get: function () { return __importDefault(ArrowRight_1).default; } });
@@ -21,3 +21,7 @@ var Error_1 = require("./Error");
 Object.defineProperty(exports, "Error", { enumerable: true, get: function () { return __importDefault(Error_1).default; } });
 var Retry_1 = require("./Retry");
 Object.defineProperty(exports, "Retry", { enumerable: true, get: function () { return __importDefault(Retry_1).default; } });
+var Empty_1 = require("./Empty");
+Object.defineProperty(exports, "Empty", { enumerable: true, get: function () { return __importDefault(Empty_1).default; } });
+var Back_1 = require("./Back");
+Object.defineProperty(exports, "Back", { enumerable: true, get: function () { return __importDefault(Back_1).default; } });

package/lib/Icons/Icon.d.ts

@@ -9,6 +9,8 @@ export declare const iconSources: {
         close: typeof import("./Generics").Close;
         error: typeof import("./Generics").Error;
         retry: typeof import("./Generics").Retry;
+        empty: typeof import("./Generics").Empty;
+        back: typeof import("./Generics").Back;
     };
     matrix: {
         audio_file: typeof import("./MatrixResources").Audio;

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.d.ts

@@ -5,10 +5,10 @@ interface ResourceItem<T> {
     selected?: boolean;
     label: string;
     type: string;
-    childCount: number;
+    childCount?: number;
     previewModalState: OverlayTriggerState;
     onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
-    onDrillDown: (node: T) => void;
+    onDrillDown?: (node: T) => void;
     className: string;
     allowedTypes?: string[] | undefined;
 }

package/lib/ResourceItem/ResourceItem.js

@@ -11,15 +11,16 @@ 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}` },
-        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), className: `
-          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
+    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 },
             react_1.default.createElement(Icon_1.default, { icon: type, resourceSource: "matrix", "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}` }),
             react_1.default.createElement("span", { className: `relative  flex items-center ${selected ? 'mr-8' : ''}` },
                 react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word" }, label),
-                selected && react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" }))),
-        childCount > 0 && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded outline-0 before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-50 focus:bg-gray-50` },
+                selected && react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" })),
+            childCount === undefined && react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "absolute right-5" })),
+        childCount !== undefined && childCount > 0 && onDrillDown && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded outline-0 before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-50 focus:bg-gray-50` },
             react_1.default.createElement("span", { className: "ml-auto flex items-center" },
                 react_1.default.createElement("span", { className: "truncate w-14 text-right", title: String(childCount) }, childCount),
                 react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "ml-1" }))))));

package/lib/ResourceList/ResourceList.d.ts

@@ -9,8 +9,9 @@ export interface ResourceListProps {
     onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
     onResourceDrillDown: (resource: Resource) => void;
     allowedTypes?: string[] | undefined;
-    error: Error | null;
+    handleReturnToRoot: () => void;
     handleReload: () => void;
+    error: Error | null;
 }
-declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, error, handleReload, }: ResourceListProps) => JSX.Element;
+declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }: ResourceListProps) => JSX.Element;
 export default ResourceList;

package/lib/ResourceList/ResourceList.js

@@ -29,8 +29,8 @@ 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 ResourceError_1 = __importDefault(require("../ResourceError/ResourceError"));
-const ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, error, handleReload, }) {
+const ResourceState_1 = __importDefault(require("../ResourceState/ResourceState"));
+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
     (0, react_1.useEffect)(() => {
@@ -44,7 +44,8 @@ const ResourceList = function ({ resources, selectedResource, previewModalState,
         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(ResourceError_1.default, { errorMessage: error.message, handleReload: handleReload }),
+        !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 &&
             resources.map((resource) => {

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]);
@@ -79,8 +79,8 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
             react_1.default.createElement("div", { className: "overflow-y-scroll flex-1 grow-[3] border-r border-gray-300" },
                 react_1.default.createElement("h3", { className: "sr-only" }, "Resource List"),
                 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, onSourceDrillDown: handleSourceDrilldown, allowedTypes: allowedTypes, 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, handleReload: handleResourceReload, error: resourceError }))),
+                !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 }))));
 }
 exports.default = ResourcePickerContainer;

package/lib/ResourceState/ResourceState.d.ts

@@ -0,0 +1,7 @@
+interface ResourceState {
+    state: 'error' | 'empty';
+    message?: string;
+    handleReload: () => void;
+}
+declare const ResourceState: ({ state, message, handleReload }: ResourceState) => JSX.Element;
+export default ResourceState;

package/lib/{ResourceError/ResourceError.js → ResourceState/ResourceState.js}

@@ -5,12 +5,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 ResourceError = function ({ errorMessage, handleReload }) {
+const ResourceState = function ({ state, message, handleReload }) {
     return (react_1.default.createElement("div", { className: "flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
-        react_1.default.createElement(Icon_1.default, { icon: 'error', "aria-hidden": true }),
-        react_1.default.createElement("span", { className: "text-md text-gray-800 font-semibold leading-5" }, errorMessage),
-        react_1.default.createElement("button", { type: "button", onClick: handleReload, className: "flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 w-[119px] h-9 mt-3 rounded text-md font-bold text-gray-700" },
-            react_1.default.createElement(Icon_1.default, { icon: 'retry', "aria-hidden": true }),
-            " Try again")));
+        react_1.default.createElement(Icon_1.default, { icon: state, "aria-hidden": true }),
+        react_1.default.createElement("span", { className: "text-md text-gray-800 font-semibold leading-5" }, state === 'empty' ? 'There are no items to display' : message),
+        react_1.default.createElement("button", { type: "button", onClick: handleReload, className: "flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 h-9 mt-3 rounded text-md font-bold text-gray-700 py-2 px-3" },
+            react_1.default.createElement(Icon_1.default, { icon: state === 'empty' ? 'back' : 'retry', "aria-hidden": true }),
+            state === 'empty' ? 'Back to source list' : 'Try again')));
 };
-exports.default = ResourceError;
+exports.default = ResourceState;