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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "2.1.8-rc.0",
+    "version": "2.1.10-rc.0",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -23,7 +23,7 @@
         "@react-types/shared": "^3.22.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "^1.66.0",
-        "@squiz/resource-browser-ui-lib": "^0.8.1-rc.0",
+        "@squiz/resource-browser-ui-lib": "^0.8.2-rc.0",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",
@@ -81,5 +81,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "95c233207d4a87157029512d0bd9edacaf15826d"
+    "gitHead": "0799116e7501bb4eaa3c401be6304231d8910f75"
 }

package/postcss.config.js

@@ -1,17 +1,21 @@
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-    require('postcss-nested'),
-    require('postcss-prefix-selector')({
-      prefix: '.squiz-rb-scope',
-      transform(prefix, selector, prefixedSelector, filePath, rule) {
-        if (selector.match(/(squiz-gb-scope)/)) {
-          return selector;
-        }
-        return prefixedSelector;
-      },
-      includeFiles: ['./src/index.scss'],
-    }),
-  ],
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+        require('postcss-nested'),
+        require('postcss-prefix-selector')({
+            prefix: '.squiz-rb-scope',
+            transform(prefix, selector, prefixedSelector, filePath, rule) {
+                if (selector.match(/(squiz-gb-scope)/)) {
+                    return selector;
+                }
+                if (selector.match(/(::)/)) {
+                    const index = prefixedSelector.indexOf('::');
+                    return `${prefixedSelector.slice(0, index)}:not(.squiz-rb-plugin *)${prefixedSelector.slice(index)}`;
+                }
+                return `${prefixedSelector}:not(.squiz-rb-plugin *)`;
+            },
+            includeFiles: ['./src/index.scss'],
+        }),
+    ],
 };

package/src/Hooks/useSources.spec.ts

@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { mockSource, mockPlugin } from '../__mocks__/MockModels';
-import { useSources } from './useSources';
+import { useSources, UseSourcesProps } from './useSources';
 
 describe('useSources', () => {
     it('Should trigger and load the sources', async () => {
@@ -35,4 +35,33 @@ describe('useSources', () => {
         expect(result.current.data).toEqual([sources[0]]);
         expect(result.current.data.length).toEqual(1);
     });
+
+    it('Should calculate the async key from the plugins type so it wont always change on re-renders', async () => {
+        const sources = [mockSource()];
+        const plugins = [mockPlugin()];
+        const onRequestSources = jest.fn().mockResolvedValue(sources);
+        const { rerender, result } = renderHook((props: UseSourcesProps) =>
+            useSources({ onRequestSources: props?.onRequestSources || onRequestSources, plugins: props?.plugins || plugins }),
+        );
+
+        expect(result.current.isLoading).toBe(true);
+        expect(result.current.error).toBe(null);
+        expect(result.current.data).toEqual([]);
+
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.data).toEqual(sources);
+
+        // Wont go back to loading data (plugin keys havent changed)
+        rerender({ onRequestSources, plugins: [mockPlugin()] });
+        expect(result.current.isLoading).toBe(false);
+
+        // Will go back to loading as change in keys
+        rerender({ onRequestSources, plugins: [mockPlugin(), mockPlugin({ type: 'matrix' })] });
+        expect(result.current.isLoading).toBe(true);
+
+        // Will go back to loading as change in keys (order change will cause reload)
+        rerender({ onRequestSources, plugins: [mockPlugin({ type: 'matrix' }), mockPlugin()] });
+        expect(result.current.isLoading).toBe(true);
+    });
 });

package/src/Hooks/useSources.ts

@@ -1,7 +1,7 @@
 import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
 import { useAsync } from '@squiz/generic-browser-lib';
 
-type UseSourcesProps = {
+export type UseSourcesProps = {
     onRequestSources: () => Promise<ResourceBrowserSource[]>;
     plugins: Array<ResourceBrowserPlugin>;
 };
@@ -10,6 +10,7 @@ type UseSourcesProps = {
  * Loads and caches the source list when a component using the hook is mounted.
  */
 export const useSources = ({ onRequestSources, plugins }: UseSourcesProps) => {
+    const pluginsKey = plugins.reduce((acc, plugin) => acc + plugin.type, '');
     return useAsync(
         {
             callback: () => {
@@ -36,6 +37,6 @@ export const useSources = ({ onRequestSources, plugins }: UseSourcesProps) => {
             },
             defaultValue: [] as ResourceBrowserSource[],
         },
-        [plugins],
+        [onRequestSources, pluginsKey],
     );
 };

package/src/MainContainer/MainContainer.tsx

@@ -79,7 +79,7 @@ function MainContainer({
                     </svg>
                 </button>
             </div>
-            <div className="border-t border-gray-300 h-[calc(100%-72px)]">
+            <div className="squiz-rb-plugin border-t border-gray-300 overflow-y-hidden">
                 {plugin && selectedSource && SourceBrowser && (
                     <SourceBrowser
                         source={selectedSource}