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

package/lib/index.css

@@ -354,12 +354,6 @@
   white-space: nowrap;
   border-width: 0;
 }
-.squiz-rb-scope .visible {
-  visibility: visible;
-}
-.squiz-rb-scope .collapse {
-  visibility: collapse;
-}
 .squiz-rb-scope .fixed {
   position: fixed;
 }
@@ -405,9 +399,6 @@
 .squiz-rb-scope .top-\[calc\(100\%\+5px\)\] {
   top: calc(100% + 5px);
 }
-.squiz-rb-scope .z-10 {
-  z-index: 10;
-}
 .squiz-rb-scope .z-50 {
   z-index: 50;
 }
@@ -435,10 +426,6 @@
 .squiz-rb-scope .m-5 {
   margin: 1.25rem;
 }
-.squiz-rb-scope .mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
 .squiz-rb-scope .mx-20 {
   margin-left: 5rem;
   margin-right: 5rem;
@@ -451,18 +438,10 @@
   margin-left: 1.25rem;
   margin-right: 1.25rem;
 }
-.squiz-rb-scope .mx-6 {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
 .squiz-rb-scope .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.squiz-rb-scope .my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .squiz-rb-scope .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -472,21 +451,18 @@
 .squiz-rb-scope .ml-1 {
   margin-left: 0.25rem;
 }
+.squiz-rb-scope .ml-4 {
+  margin-left: 1rem;
+}
 .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;
 }
 .squiz-rb-scope .mr-2\.5 {
   margin-right: 0.625rem;
 }
-.squiz-rb-scope .mr-3 {
-  margin-right: 0.75rem;
-}
 .squiz-rb-scope .mr-4 {
   margin-right: 1rem;
 }
@@ -505,9 +481,6 @@
 .squiz-rb-scope .mt-1 {
   margin-top: 0.25rem;
 }
-.squiz-rb-scope .mt-2 {
-  margin-top: 0.5rem;
-}
 .squiz-rb-scope .mt-20 {
   margin-top: 5rem;
 }
@@ -526,9 +499,6 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-.squiz-rb-scope .block {
-  display: block;
-}
 .squiz-rb-scope .inline-block {
   display: inline-block;
 }
@@ -538,9 +508,6 @@
 .squiz-rb-scope .grid {
   display: grid;
 }
-.squiz-rb-scope .contents {
-  display: contents;
-}
 .squiz-rb-scope .hidden {
   display: none;
 }
@@ -553,9 +520,6 @@
 .squiz-rb-scope .h-2 {
   height: 0.5rem;
 }
-.squiz-rb-scope .h-3 {
-  height: 0.75rem;
-}
 .squiz-rb-scope .h-36 {
   height: 9rem;
 }
@@ -568,9 +532,6 @@
 .squiz-rb-scope .h-9 {
   height: 2.25rem;
 }
-.squiz-rb-scope .h-\[164px\] {
-  height: 164px;
-}
 .squiz-rb-scope .h-\[20px\] {
   height: 20px;
 }
@@ -592,9 +553,6 @@
 .squiz-rb-scope .max-h-80 {
   max-height: 20rem;
 }
-.squiz-rb-scope .max-h-full {
-  max-height: 100%;
-}
 .squiz-rb-scope .min-h-\[64px\] {
   min-height: 64px;
 }
@@ -613,9 +571,6 @@
 .squiz-rb-scope .w-14 {
   width: 3.5rem;
 }
-.squiz-rb-scope .w-3 {
-  width: 0.75rem;
-}
 .squiz-rb-scope .w-3\/4 {
   width: 75%;
 }
@@ -640,9 +595,6 @@
 .squiz-rb-scope .w-\[56px\] {
   width: 56px;
 }
-.squiz-rb-scope .w-\[60px\] {
-  width: 60px;
-}
 .squiz-rb-scope .w-\[calc\(100\%\+4px\)\] {
   width: calc(100% + 4px);
 }
@@ -655,12 +607,12 @@
 .squiz-rb-scope .max-w-\[200px\] {
   max-width: 200px;
 }
+.squiz-rb-scope .max-w-\[400px\] {
+  max-width: 400px;
+}
 .squiz-rb-scope .max-w-\[50rem\] {
   max-width: 50rem;
 }
-.squiz-rb-scope .max-w-full {
-  max-width: 100%;
-}
 .squiz-rb-scope .flex-1 {
   flex: 1 1 0%;
 }
@@ -684,9 +636,6 @@
 .squiz-rb-scope .cursor-not-allowed {
   cursor: not-allowed;
 }
-.squiz-rb-scope .resize {
-  resize: both;
-}
 .squiz-rb-scope .grid-cols-\[24px_1fr_45px\] {
   grid-template-columns: 24px 1fr 45px;
 }
@@ -696,9 +645,6 @@
 .squiz-rb-scope .flex-col {
   flex-direction: column;
 }
-.squiz-rb-scope .flex-wrap {
-  flex-wrap: wrap;
-}
 .squiz-rb-scope .items-center {
   align-items: center;
 }
@@ -749,17 +695,6 @@
 .squiz-rb-scope .rounded-lg {
   border-radius: 0.5rem;
 }
-.squiz-rb-scope .rounded-b-lg {
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-.squiz-rb-scope .rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-}
-.squiz-rb-scope .border {
-  border-width: 1px;
-}
 .squiz-rb-scope .border-1 {
   border-width: 1px;
 }
@@ -784,10 +719,6 @@
 .squiz-rb-scope .border-solid {
   border-style: solid;
 }
-.squiz-rb-scope .border-black {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
-}
 .squiz-rb-scope .border-current {
   border-color: currentColor;
 }
@@ -795,8 +726,9 @@
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
 }
-.squiz-rb-scope .border-opacity-20 {
-  --tw-border-opacity: 0.2;
+.squiz-rb-scope .border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 .squiz-rb-scope .bg-black {
   --tw-bg-opacity: 1;
@@ -883,17 +815,25 @@
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.squiz-rb-scope .py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 .squiz-rb-scope .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+.squiz-rb-scope .pb-0 {
+  padding-bottom: 0px;
+}
 .squiz-rb-scope .pb-4 {
   padding-bottom: 1rem;
 }
+.squiz-rb-scope .pl-4 {
+  padding-left: 1rem;
+}
+.squiz-rb-scope .pr-4 {
+  padding-right: 1rem;
+}
+.squiz-rb-scope .pt-3 {
+  padding-top: 0.75rem;
+}
 .squiz-rb-scope .text-left {
   text-align: left;
 }
@@ -976,6 +916,14 @@
 .squiz-rb-scope .opacity-40 {
   opacity: 0.4;
 }
+.squiz-rb-scope .shadow-md {
+  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 12px 4px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .squiz-rb-scope .outline-0 {
   outline-width: 0px;
 }
@@ -986,44 +934,6 @@
 .squiz-rb-scope .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
-  max-width: 250px;
-  cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label:hover {
-  text-decoration-line: underline;
-}
-.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label:focus {
-  text-decoration-line: underline;
-}
-@media (min-width: 768px) {
-  .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
-    max-width: 90px;
-  }
-}
-.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:nth-child(n+3) {
-  display: none;
-}
-.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:nth-last-child(-n+2) {
-  display: flex;
-}
-@media not all and (min-width: 768px) {
-  .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:nth-last-child(-n+2) {
-    display: none;
-  }
-}
-.squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__item:last-child {
-  display: flex;
-}
-.squiz-rb-scope .resource-breadcrumb--expanded .resource-breadcrumb__expander {
-  display: none;
-}
-.squiz-rb-scope .resource-breadcrumb--expanded .resource-breadcrumb__item:last-child {
-  display: flex;
-}
 .squiz-rb-scope .resource-picker {
   display: grid;
   grid-template-columns: 24px 1fr;
@@ -1061,27 +971,6 @@
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
-.squiz-rb-scope .checkered-bg {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  background-size: 24px 24px;
-  background-position: 0 0, 12px 12px;
-  background-image:
-    linear-gradient(
-      45deg,
-      #e0e0e0 25%,
-      transparent 25%,
-      transparent 75%,
-      #e0e0e0 75%,
-      #e0e0e0),
-    linear-gradient(
-      45deg,
-      #e0e0e0 25%,
-      transparent 25%,
-      transparent 75%,
-      #e0e0e0 75%,
-      #e0e0e0);
-}
 .squiz-rb-scope .spinner {
   display: inline-block;
   border-radius: 9999px;
@@ -1146,6 +1035,15 @@
 .squiz-rb-scope .p-4\.5 {
   padding: 18px;
 }
+.squiz-rb-scope .pl-4\.5 {
+  padding-left: 18px;
+}
+.squiz-rb-scope .pr-4\.5 {
+  padding-right: 18px;
+}
+.squiz-rb-scope .pb-4\.5 {
+  padding-bottom: 18px;
+}
 .squiz-rb-scope .break-word {
   word-break: break-word;
   overflow-wrap: anywhere;
@@ -1174,34 +1072,14 @@
   content: var(--tw-content);
   top: 0.375rem;
 }
-.squiz-rb-scope .before\:top-2\/4::before {
-  content: var(--tw-content);
-  top: 50%;
-}
-.squiz-rb-scope .before\:z-0::before {
-  content: var(--tw-content);
-  z-index: 0;
-}
 .squiz-rb-scope .before\:z-40::before {
   content: var(--tw-content);
   z-index: 40;
 }
-.squiz-rb-scope .before\:mr-2::before {
-  content: var(--tw-content);
-  margin-right: 0.5rem;
-}
 .squiz-rb-scope .before\:h-\[calc\(100\%-0\.75rem\)\]::before {
   content: var(--tw-content);
   height: calc(100% - 0.75rem);
 }
-.squiz-rb-scope .before\:h-px::before {
-  content: var(--tw-content);
-  height: 1px;
-}
-.squiz-rb-scope .before\:w-full::before {
-  content: var(--tw-content);
-  width: 100%;
-}
 .squiz-rb-scope .before\:w-px::before {
   content: var(--tw-content);
   width: 1px;
@@ -1216,34 +1094,17 @@
   --tw-bg-opacity: 1;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity));
 }
-.squiz-rb-scope .before\:bg-gray-300::before {
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
-}
 .squiz-rb-scope .before\:bg-opacity-25::before {
   content: var(--tw-content);
   --tw-bg-opacity: 0.25;
 }
-.squiz-rb-scope .before\:content-\[\'\/\'\]::before {
-  --tw-content: "/";
-  content: var(--tw-content);
-}
 .squiz-rb-scope .first\:mt-0:first-child {
   margin-top: 0px;
 }
-.squiz-rb-scope .first\:rounded-t:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
 .squiz-rb-scope .first\:rounded-t-lg:first-child {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
-.squiz-rb-scope .last\:rounded-b:last-child {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .squiz-rb-scope .last\:rounded-b-lg:last-child {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1251,14 +1112,14 @@
 .squiz-rb-scope .last\:border-b:last-child {
   border-bottom-width: 1px;
 }
+.squiz-rb-scope .hover\:border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+}
 .squiz-rb-scope .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
 }
-.squiz-rb-scope .hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
-}
 .squiz-rb-scope .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
@@ -1310,32 +1171,11 @@
     animation: spin 1.5s linear infinite;
   }
 }
-@media not all and (min-width: 768px) {
-  .squiz-rb-scope .max-md\:hidden {
-    display: none;
-  }
-}
 @media not all and (min-width: 640px) {
   .squiz-rb-scope .max-sm\:hidden {
     display: none;
   }
 }
-@media (min-width: 640px) {
-  .squiz-rb-scope .sm\:flex-1 {
-    flex: 1 1 0%;
-  }
-  .squiz-rb-scope .sm\:grow-\[2\] {
-    flex-grow: 2;
-  }
-  .squiz-rb-scope .sm\:overflow-y-scroll {
-    overflow-y: scroll;
-  }
-}
-@media (min-width: 768px) {
-  .squiz-rb-scope .md\:font-semibold {
-    font-weight: 600;
-  }
-}
 @media (min-width: 1024px) {
   .squiz-rb-scope .lg\:h-\[calc\(100vh-9rem\)\] {
     height: calc(100vh - 9rem);

package/lib/index.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
-import { ResourceBrowserContext, ResourceBrowserContextProvider, ResourceBrowserContextProps } from './ResourceBrowserContext/ResourceBrowserContext';
-export type { HydratedResourceReference, Resource, ResourceReference, Source, ResourceBrowserContextProps };
+import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
+import { ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
 export { ResourceBrowserContext, ResourceBrowserContextProvider };
-export type ResourceBrowserInputProps = {
+export * from './types';
+export type ResourceBrowserProps = {
     modalTitle: string;
     allowedTypes?: string[];
     isDisabled?: boolean;
-    value: ResourceReference | null;
-    onChange(resource: HydratedResourceReference | null): void;
+    value: ResourceBrowserUnresolvedResource | null;
+    onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
 };
-export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, isDisabled, onClear, }: ResourceBrowserInputProps) => React.JSX.Element;
+export declare const ResourceBrowser: (props: ResourceBrowserProps) => React.JSX.Element;

package/lib/index.js

@@ -22,24 +22,80 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourceBrowserInput = exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
+exports.ResourceBrowser = exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
 const react_1 = __importStar(require("react"));
-const ResourcePickerContainer_1 = __importDefault(require("./ResourcePickerContainer/ResourcePickerContainer"));
 const ResourceBrowserContext_1 = require("./ResourceBrowserContext/ResourceBrowserContext");
 Object.defineProperty(exports, "ResourceBrowserContext", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContext; } });
 Object.defineProperty(exports, "ResourceBrowserContextProvider", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContextProvider; } });
-const ResourcePicker_1 = __importDefault(require("./ResourcePicker/ResourcePicker"));
-const useResource_1 = require("./Hooks/useResource");
-const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, isDisabled, onClear, }) => {
-    const { onRequestSources, onRequestChildren, onRequestResource } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
-    const { data: resource, error, isLoading } = (0, useResource_1.useResource)({ onRequestResource, reference: value });
-    const defaultOnClear = () => onChange(null);
-    const onClearFunction = onClear ?? defaultOnClear;
+const useSources_1 = require("./Hooks/useSources");
+const Plugin_1 = require("./Plugin/Plugin");
+__exportStar(require("./types"), exports);
+const ResourceBrowser = (props) => {
+    const { value } = props;
+    const [error, setError] = (0, react_1.useState)(null);
+    const { onRequestSources, plugins } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const [source, setSource] = (0, react_1.useState)(null);
+    const { data: sources, isLoading, error: sourcesError } = (0, useSources_1.useSources)({ onRequestSources, plugins });
+    const [plugin, setPlugin] = (0, react_1.useState)(null);
+    // MainContainer will render a list of sources of one is not provided to it, callback to allow it to set the source once a user selects
+    const handleSourceSelect = (0, react_1.useCallback)((source) => {
+        setSource(source);
+    }, [setSource]);
+    // Try to auto set the source
+    (0, react_1.useEffect)(() => {
+        let source = null;
+        setError(null);
+        // If there is a provided value try to use its source
+        if (value) {
+            // Search the sources for it matching against the value.source property
+            source = sources.find((source) => source.id === value?.sourceId) || null;
+            // If the source is null and we arent loading the sources
+            if (source === null && !isLoading) {
+                // Set an error as the passed in value's source wasnt returned by onRequestSources
+                setError(new Error('Unable to find resource source.'));
+            }
+        }
+        else if (sources?.length === 1) {
+            // If only one source is passed in select it automatically
+            source = sources[0];
+        }
+        setSource(source);
+    }, [value, isLoading, sources, setSource, setError]);
+    (0, react_1.useEffect)(() => {
+        if (source) {
+            const plugin = plugins.find((plugin) => {
+                return plugin.type === source.type;
+            });
+            setPlugin(plugin || null);
+        }
+        else {
+            setPlugin(null);
+        }
+    }, [plugins, source]);
+    const handleModalStateChange = (0, react_1.useCallback)((isOpen) => {
+        setIsModalOpen(isOpen);
+    }, [setIsModalOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!isModalOpen && !value && sources?.length > 1) {
+            setSource(null);
+        }
+    }, [sources, isModalOpen]);
+    // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(ResourcePicker_1.default, { resource: resource, allowedTypes: allowedTypes, error: error, isLoading: isLoading, isDisabled: isDisabled, onClear: () => onClearFunction() }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { preselectedSourceId: value?.source, preselectedResource: resource, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestResource: onRequestResource, onRequestChildren: onRequestChildren, onChange: onChange })))));
+        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", render: plugin === null, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, useResource: () => {
+                return {
+                    data: null,
+                    error: null,
+                    isLoading: false,
+                };
+            }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }),
+        plugins.map((thisPlugin) => {
+            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: error, plugin: plugin, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
+        })));
 };
-exports.ResourceBrowserInput = ResourceBrowserInput;
+exports.ResourceBrowser = ResourceBrowser;