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

package/CHANGELOG.md

@@ -1,101 +1,154 @@
-# @squiz/resource-browser
+# Change Log
 
-## 1.69.1
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### Patch Changes
+## 2.1.8-rc.0 (2024-05-30)
 
-- 5cd6ef6: Updated logic & handling of recent locations in resource browser
+**Note:** Version bump only for package @squiz/resource-browser
 
-## 1.69.0
+## [2.1.7-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.1.6-rc.0...@squiz/resource-browser-v2@2.1.7-rc.0) (2024-05-27)
 
-### Minor Changes
+**Note:** Version bump only for package @squiz/resource-browser-v2
 
-- b642152: updates to source list node selection
+## [2.1.6-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.1.5-rc.0...@squiz/resource-browser-v2@2.1.6-rc.0) (2024-05-27)
 
-## 1.68.1
+**Note:** Version bump only for package @squiz/resource-browser-v2
 
-### Patch Changes
+## [2.1.5-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.1.4-rc.0...@squiz/resource-browser-v2@2.1.5-rc.0) (2024-05-23)
 
-- 7c324d7: Fixed useChildResources to ignore previous data (race condition bug)
-- Updated dependencies [7c324d7]
-  - @squiz/generic-browser-lib@1.67.0
+**Note:** Version bump only for package @squiz/resource-browser-v2
 
-## 1.68.0
+## [2.1.4-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.1.3-rc.0...@squiz/resource-browser-v2@2.1.4-rc.0) (2024-05-20)
 
-### Minor Changes
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.1.3-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.1.2-rc.0...@squiz/resource-browser-v2@2.1.3-rc.0) (2024-05-20)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.1.2-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.1.1-rc.0...@squiz/resource-browser-v2@2.1.2-rc.0) (2024-05-15)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.1.1-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.1.0-rc.0...@squiz/resource-browser-v2@2.1.1-rc.0) (2024-05-13)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+# [2.1.0-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.9-rc.0...@squiz/resource-browser-v2@2.1.0-rc.0) (2024-05-13)
+
+### Features
+
+-   **prodam-133:** add source dropdown to rb wrapper ([a258b0f](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/commit/a258b0febebca94aad1885f602d6a10a323ab95f))
+
+## [2.0.9-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.8-rc.0...@squiz/resource-browser-v2@2.0.9-rc.0) (2024-05-13)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.0.8-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.7-rc.0...@squiz/resource-browser-v2@2.0.8-rc.0) (2024-05-10)
 
-- 8c2491b: Added recent locations section to resource browser
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.0.7-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.6-rc.0...@squiz/resource-browser-v2@2.0.7-rc.0) (2024-05-09)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.0.6-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.5-rc.0...@squiz/resource-browser-v2@2.0.6-rc.0) (2024-05-07)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.0.5-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.4-rc.0...@squiz/resource-browser-v2@2.0.5-rc.0) (2024-05-07)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.0.4-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.3-rc.0...@squiz/resource-browser-v2@2.0.4-rc.0) (2024-05-03)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.0.3-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.2-rc.0...@squiz/resource-browser-v2@2.0.3-rc.0) (2024-05-02)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## [2.0.2-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser-v2@2.0.1-rc.0...@squiz/resource-browser-v2@2.0.2-rc.0) (2024-04-29)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+## 2.0.1-rc.0 (2024-04-26)
+
+**Note:** Version bump only for package @squiz/resource-browser-v2
+
+# @squiz/resource-browser
 
 ## 1.67.1
 
 ### Patch Changes
 
-- 9e4cad8: Fixed minor issue with finding best matched lineage in resource browser
+-   9e4cad8: Fixed minor issue with finding best matched lineage in resource browser
 
 ## 1.67.0
 
 ### Minor Changes
 
-- 5fa9b39: Updated resource browser to allow replacing the previously selected resource. Replacing will open the resource browser to the location where the resource resides.
+-   5fa9b39: Updated resource browser to allow replacing the previously selected resource. Replacing will open the resource browser to the location where the resource resides.
 
 ### Patch Changes
 
-- Updated dependencies [5fa9b39]
-- Updated dependencies [5fa9b39]
-  - @squiz/dx-json-schema-lib@1.67.0
-  - @squiz/generic-browser-lib@1.66.0
+-   Updated dependencies [5fa9b39]
+-   Updated dependencies [5fa9b39]
+    -   @squiz/dx-json-schema-lib@1.67.0
+    -   @squiz/generic-browser-lib@1.66.0
 
 ## 1.66.3
 
 ### Patch Changes
 
-- 8421756: Selected image assets in the resource browser will now display the actual image instead of just the image asset icon if they have a URL specified
+-   8421756: Selected image assets in the resource browser will now display the actual image instead of just the image asset icon if they have a URL specified
 
 ## 1.66.2
 
 ### Patch Changes
 
-- 6d41052: Added white background to resource picker input to avoid it inheriting the background colour of its parent element.
+-   6d41052: Added white background to resource picker input to avoid it inheriting the background colour of its parent element.
 
 ## 1.66.1
 
 ### Patch Changes
 
-- 81c7cba: Image asset previews will now display the image if there is a URL in the returned resource data
-  Also fixes a bug around the selected resource name not having break-word applied so the filename was not wrapping as expected
+-   81c7cba: Image asset previews will now display the image if there is a URL in the returned resource data
+    Also fixes a bug around the selected resource name not having break-word applied so the filename was not wrapping as expected
 
 ## 1.66.0
 
 ### Minor Changes
 
-- 5032c38: Added content page asset icon.
+-   5032c38: Added content page asset icon.
 
 ### Patch Changes
 
-- Updated dependencies [5032c38]
-  - @squiz/generic-browser-lib@1.65.0
+-   Updated dependencies [5032c38]
+    -   @squiz/generic-browser-lib@1.65.0
 
 ## 1.65.0
 
 ### Minor Changes
 
-- ac68ec6: Unpinned Squiz dependencies, they should now be following semver.
+-   ac68ec6: Unpinned Squiz dependencies, they should now be following semver.
 
 ### Patch Changes
 
-- Updated dependencies [ac68ec6]
-  - @squiz/dx-json-schema-lib@1.65.0
+-   Updated dependencies [ac68ec6]
+    -   @squiz/dx-json-schema-lib@1.65.0
 
 ## 1.64.1
 
 ### Patch Changes
 
-- Updated dependencies [e717e6e]
-  - @squiz/generic-browser-lib@1.64.0
-  - @squiz/dx-json-schema-lib@1.64.0
+-   Updated dependencies [e717e6e]
+    -   @squiz/generic-browser-lib@1.64.0
+    -   @squiz/dx-json-schema-lib@1.64.0
 
 ## 1.64.0
 
 ### Minor Changes
 
-- e7d4c0f: Updated disabled styling for component-editing-ui & resource browser
+-   e7d4c0f: Updated disabled styling for component-editing-ui & resource browser

package/LICENSE.md

@@ -0,0 +1,15 @@
+This software is copyright Squiz and may only be used with the explicit
+permission of the copyright holder.
+
+1. Squiz shall make the Services available to You pursuant to your Agreement and these terms.
+2. Squiz shall provide the Services only in accordance with applicable laws and government regulations and where applicable your Agreement.
+3. You shall:
+   (a) be responsible for Your compliance with these terms and the Agreement;
+   (b) prevent unauthorised access to or use of the Services, and notify Squiz promptly of any such unauthorised access or use, and
+   (c) use the Services only in accordance with the Documentation and applicable laws and government regulations.
+4. You shall not:
+   (a) sell, resell, rent or lease the Services;
+   (b) use the Services to store or transmit Malicious Code;
+   (c) interfere with or disrupt the integrity or performance of the Services or third-party data contained therein, or
+   (d) attempt to gain unauthorised access to the Services or their related systems or networks.
+5. You acknowledge that Squiz retains ownership of the Software, the Documentation and the source code and all proprietary rights relating thereto and You agree all Intellectual Property Rights in the Software and Documentation are and shall remain the exclusive property of Squiz and its third party suppliers, as applicable. Unless expressly permitted in this Subscription Agreement, You must not use any of Squiz's or its third party suppliers' intellectual property without Squiz or its third party suppliers' prior written consent. Nothing in these terms should be construed as transferring any aspects of such rights mentioned in this clause to You or any Third Party. Squiz reserves any and all rights not expressly granted herein.

package/README.md

@@ -0,0 +1,9 @@
+# Resource Browser
+
+The Resource Browser is a generic frontend intended for use across the Squiz DXP when a end user needs to browse for and select a resource via a React frontend UI. It is intended to allow rendering of various compatible sources and to move from one source to another seamlessly. It is not intended to provide an actual UI for any specific datasource; these must be provided via the plugin framework.
+
+## Plugins
+
+The Resource Browser does not know how to interface with any source systems; this support needs to be plugged into it. A plugin interface has been defined to allow any source system to be added into the Resource Browser as needed with as complex a UI as that source needs. These plugin can be defined inline when simple (e.g testing) or published to NPM as a packages and consumed by a specific application.
+
+An example plugin with comments as documentation can be found [here](./src/__mocks__/PluginExample.tsx).

package/jest.config.ts

@@ -2,28 +2,29 @@ import type { Config } from 'jest';
 
 // Sync object
 const config: Config = {
-  preset: 'ts-jest',
-  clearMocks: true,
-  collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.stories.{ts,tsx}'],
-  coverageThreshold: {
-    global: {
-      branches: 90,
-      functions: 90,
-      lines: 90,
-      statements: 90,
+    preset: 'ts-jest',
+    clearMocks: true,
+    collectCoverage: true,
+    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.stories.{ts,tsx}'],
+    coverageThreshold: {
+        global: {
+            branches: 90,
+            functions: 90,
+            lines: 90,
+            statements: 90,
+        },
     },
-  },
-  errorOnDeprecated: true,
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
-  testTimeout: 60_000,
-  testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['/lib/', `/node_modules/`],
-  maxWorkers: 1,
-  moduleNameMapper: {
-    '^.+\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.ts',
-  },
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+    errorOnDeprecated: true,
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+    testTimeout: 60_000,
+    testEnvironment: 'jsdom',
+    testPathIgnorePatterns: ['/lib/', `/node_modules/`],
+    maxWorkers: 1,
+    moduleNameMapper: {
+        '^.+\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.ts',
+        '^@squiz/resource-browser-ui-lib$': '<rootDir>/../resource-browser-ui-lib/src/index',
+    },
+    setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
 };
 
 export default config;

package/lib/Hooks/useSelectedState.d.ts

@@ -0,0 +1,15 @@
+import { ResourceBrowserPlugin, ResourceBrowserResource } from '../types';
+type UseResourceProps = {
+    plugin: ResourceBrowserPlugin | null;
+    resource: ResourceBrowserResource | null;
+};
+/**
+ * Loads the selected state for the provided resource
+ */
+export declare const useSelectedState: ({ plugin, resource }: UseResourceProps) => {
+    data: import("../types").ResourceBrowserSelectedState | null;
+    error: Error | null;
+    isLoading: boolean;
+    reload: () => void;
+};
+export {};

package/lib/Hooks/useSelectedState.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedState = void 0;
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+/**
+ * Loads the selected state for the provided resource
+ */
+const useSelectedState = ({ plugin, resource }) => {
+    // Find the resolver for this resource
+    const renderSelectedResource = resource && plugin?.renderSelectedResource;
+    return (0, generic_browser_lib_1.useAsync)({
+        callback: () => (resource && renderSelectedResource ? renderSelectedResource(resource) : null),
+        defaultValue: null,
+    }, [resource]);
+};
+exports.useSelectedState = useSelectedState;

package/lib/Hooks/useSources.d.ts

@@ -1,12 +1,13 @@
-import { Source } from '../types';
+import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
 type UseSourcesProps = {
-    onRequestSources: () => Promise<Source[]>;
+    onRequestSources: () => Promise<ResourceBrowserSource[]>;
+    plugins: Array<ResourceBrowserPlugin>;
 };
 /**
  * Loads and caches the source list when a component using the hook is mounted.
  */
-export declare const useSources: ({ onRequestSources }: UseSourcesProps) => {
-    data: Source[];
+export declare const useSources: ({ onRequestSources, plugins }: UseSourcesProps) => {
+    data: ResourceBrowserSource[];
     error: Error | null;
     isLoading: boolean;
     reload: () => void;

package/lib/Hooks/useSources.js

@@ -5,5 +5,29 @@ const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 /**
  * Loads and caches the source list when a component using the hook is mounted.
  */
-const useSources = ({ onRequestSources }) => (0, generic_browser_lib_1.useAsync)({ callback: onRequestSources, defaultValue: [] }, []);
+const useSources = ({ onRequestSources, plugins }) => {
+    return (0, generic_browser_lib_1.useAsync)({
+        callback: () => {
+            return new Promise((resolve, reject) => {
+                // Get all the sources from the outer context
+                onRequestSources()
+                    .then((sources) => {
+                    // Remove any sources which we don't have a plugin to handle
+                    resolve(sources.filter((source) => {
+                        return !!plugins.find((plugin) => {
+                            if (plugin.type === source.type) {
+                                return true;
+                            }
+                            return false;
+                        });
+                    }));
+                })
+                    .catch((e) => {
+                    reject(e);
+                });
+            });
+        },
+        defaultValue: [],
+    }, [plugins]);
+};
 exports.useSources = useSources;

package/lib/MainContainer/MainContainer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserResource } from '../types';
+interface MainContainerProps {
+    title: string;
+    titleAriaProps: DOMAttributes<FocusableElement>;
+    allowedTypes: string[] | undefined;
+    sources: ResourceBrowserSource[];
+    selectedSource: ResourceBrowserSource | null;
+    onSourceSelect(source: ResourceBrowserSource | null): void;
+    onChange(resource: ResourceBrowserResource | null): void;
+    onClose: () => void;
+    preselectedResource?: ResourceBrowserResource | null;
+    plugin: ResourceBrowserPlugin | null;
+}
+declare function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedSource, onSourceSelect, onChange, onClose, preselectedResource, plugin, }: MainContainerProps): React.JSX.Element;
+export default MainContainer;

package/lib/MainContainer/MainContainer.js

@@ -0,0 +1,61 @@
+"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 SourceDropdown_1 = __importDefault(require("../SourceDropdown/SourceDropdown"));
+const SourceList_1 = __importDefault(require("../SourceList/SourceList"));
+function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedSource, onSourceSelect, onChange, onClose, preselectedResource, plugin, }) {
+    const [headerPortal, setHeaderPortal] = (0, react_1.useState)(null);
+    const SourceBrowser = plugin?.sourceBrowserComponent();
+    // Can't use a useRef as it wont update on change when a source is selected, so need to use a ref callback to store in state
+    const setHeaderPortalRef = (0, react_1.useCallback)((node) => {
+        if (node !== null) {
+            setHeaderPortal(node);
+        }
+    }, [setHeaderPortal]);
+    // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
+    return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
+        react_1.default.createElement("div", { className: "flex items-center p-4.5" },
+            react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" },
+                !plugin && 'Environment Selector',
+                plugin && title),
+            plugin && selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
+                sources.length > 1 && (react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
+                    react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect }))),
+                plugin.createHeaderPortal && (react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "px-3 border-l border-gray-300 w-300px" })))),
+            react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
+                react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
+        react_1.default.createElement("div", { className: "border-t border-gray-300 h-[calc(100%-72px)]" },
+            plugin && selectedSource && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, preselectedResource: preselectedResource || undefined, onSelected: (resource) => {
+                    onChange(resource);
+                    onClose();
+                } })),
+            !selectedSource && react_1.default.createElement(SourceList_1.default, { sources: sources, onSourceSelect: onSourceSelect }))));
+}
+exports.default = MainContainer;

package/lib/Plugin/Plugin.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+/**
+ *  This plugin component exsits to deal with React rules of Hooks stupidity.
+ *
+ *  For it to not freak out when we want to change from one plugin to another we have to render
+ *  something to the ReactDom for each plugin and 'activate' that component when that plugin
+ *  needs to render its UI etc.
+ */
+export type PluginRenderType = ResourceBrowserInputProps & {
+    render: boolean;
+};
+export declare const PluginRender: ({ render, ...props }: PluginRenderType) => React.JSX.Element;

package/lib/Plugin/Plugin.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginRender = void 0;
+const react_1 = __importDefault(require("react"));
+const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserInput");
+const PluginRender = ({ render, ...props }) => {
+    if (render) {
+        return react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props });
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+};
+exports.PluginRender = PluginRender;

package/lib/ResourceBrowserContext/ResourceBrowserContext.d.ts

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren } from 'react';
-import { OnRequestResource, OnRequestSources, OnRequestChildren } from '../types';
+import { OnRequestSources, ResourceBrowserPlugin } from '../types';
 export type ResourceBrowserContextProps = {
     onRequestSources: OnRequestSources;
-    onRequestChildren: OnRequestChildren;
-    onRequestResource: OnRequestResource;
+    plugins: Array<ResourceBrowserPlugin>;
 };
 /**
  * @internal Direct usage of this object is discouraged. It will be privated in a future major version.

package/lib/ResourceBrowserContext/ResourceBrowserContext.js

@@ -38,31 +38,18 @@ 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.');
-    },
+    plugins: [],
 });
 const ResourceBrowserContextProvider = (props) => {
     const CACHE_DURATION = 30000; // 30 seconds
-    const { value: { onRequestSources, onRequestChildren, onRequestResource, ...other }, children, } = props;
+    const { value: { onRequestSources, ...other }, children, } = props;
     const cache = new expiry_map_1.default(CACHE_DURATION);
     const memoized = (0, react_1.useMemo)(() => ({
         onRequestSources: (0, p_memoize_1.default)(onRequestSources, {
             cache,
             cacheKey: () => 'onRequestSources',
         }),
-        onRequestChildren: (0, p_memoize_1.default)(onRequestChildren, {
-            cache,
-            cacheKey: ([source, resource]) => `onRequestChildren.${source.id}.${resource?.id}`,
-        }),
-        onRequestResource: (0, p_memoize_1.default)(onRequestResource, {
-            cache,
-            cacheKey: ([reference]) => `onRequestResource.${reference.source}.${reference.resource}`,
-        }),
-    }), [onRequestSources, onRequestChildren, onRequestResource]);
-    return (react_1.default.createElement(exports.ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children));
+    }), [onRequestSources]);
+    return react_1.default.createElement(exports.ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
 };
 exports.ResourceBrowserContextProvider = ResourceBrowserContextProvider;

package/lib/ResourceBrowserInput/ResourceBrowserInput.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from '../types';
+export type ResourceBrowserInputProps = {
+    modalTitle: string;
+    allowedTypes?: string[];
+    isDisabled?: boolean;
+    value: ResourceBrowserUnresolvedResource | null;
+    useResource(referenceId: string | null, source: ResourceBrowserSource | null): {
+        data: ResourceBrowserResource | null;
+        error: Error | null;
+        isLoading: boolean;
+    };
+    onChange(resource: ResourceBrowserResource | null): void;
+    onClear?(): void;
+    plugin: ResourceBrowserPlugin | null;
+    source: ResourceBrowserSource | null;
+    sources: ResourceBrowserSource[];
+    isLoading: boolean;
+    error: Error | null;
+    setSource(source: ResourceBrowserSource | null): void;
+    isModalOpen: boolean;
+    onModalStateChange(isOpen: boolean): void;
+};
+export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }: ResourceBrowserInputProps) => React.JSX.Element;

package/lib/ResourceBrowserInput/ResourceBrowserInput.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowserInput = void 0;
+const react_1 = __importDefault(require("react"));
+const MainContainer_1 = __importDefault(require("../MainContainer/MainContainer"));
+const ResourcePicker_1 = require("../ResourcePicker/ResourcePicker");
+const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
+    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+    const defaultOnClear = () => onChange(null);
+    const onClearFunction = onClear ?? defaultOnClear;
+    return (react_1.default.createElement(ResourcePicker_1.ResourcePicker, { resource: resource, plugin: plugin, allowedTypes: allowedTypes, error: resourceError || error, isLoading: isResourceLoading || isLoading, isDisabled: isDisabled, onClear: onClearFunction, isModalOpen: isModalOpen, onModalStateChange: onModalStateChange }, (onClose, titleProps) => (react_1.default.createElement(MainContainer_1.default, { selectedSource: source, sources: sources, preselectedResource: resource, plugin: plugin, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onSourceSelect: setSource, onClose: onClose, onChange: onChange }))));
+};
+exports.ResourceBrowserInput = ResourceBrowserInput;

package/lib/ResourcePicker/ResourcePicker.d.ts

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

package/lib/ResourcePicker/ResourcePicker.js

@@ -3,24 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourcePicker = void 0;
 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 generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
 const Error_1 = require("./States/Error");
 const Loading_1 = require("./States/Loading");
 const Selected_1 = require("./States/Selected");
+const useSelectedState_1 = require("../Hooks/useSelectedState");
 const clsx_1 = __importDefault(require("clsx"));
-const ResourcePicker = ({ resource, allowedTypes, error, isLoading, isDisabled, children, onClear, }) => {
+const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
+    const { data: selectedState, error, isLoading } = (0, useSelectedState_1.useSelectedState)({ resource, plugin });
     const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
-    const isEmpty = resource === null && !isLoading && !error;
+    const isEmpty = resource === null && !isExternalLoading && !externalError;
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'resource-picker--disabled') },
         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(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, scope: "squiz-rb-scope" }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
+        isEmpty ? (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
+                isOpen: isModalOpen,
+                onOpenChange: onModalStateChange,
+            }, 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, scope: "squiz-rb-scope" }, 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 }),
-                resource && (react_1.default.createElement(Selected_1.SelectedState, { resource: resource, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
+                (isExternalLoading || isLoading) && react_1.default.createElement(Loading_1.LoadingState, null),
+                (externalError || error) && (react_1.default.createElement(Error_1.ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),
+                !isExternalLoading && resource && selectedState && (react_1.default.createElement(Selected_1.SelectedState, { isModalOpen: isModalOpen, onModalStateChange: onModalStateChange, resource: resource, showThumbnail: selectedState?.showThumbnail || false, icon: selectedState?.icon, label: selectedState?.label, description: selectedState?.description, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
 };
-exports.default = ResourcePicker;
+exports.ResourcePicker = ResourcePicker;