@squiz/resource-browser 1.39.1-alpha.8 → 1.40.0

package/lib/index.css

@@ -526,6 +526,9 @@
 .squiz-rb-scope .block {
   display: block;
 }
+.squiz-rb-scope .inline-block {
+  display: inline-block;
+}
 .squiz-rb-scope .flex {
   display: flex;
 }
@@ -652,6 +655,14 @@
 .squiz-rb-scope .grow-\[3\] {
   flex-grow: 3;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.squiz-rb-scope .animate-spin {
+  animation: spin 1s linear infinite;
+}
 .squiz-rb-scope .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -742,6 +753,9 @@
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.squiz-rb-scope .border-current {
+  border-color: currentColor;
+}
 .squiz-rb-scope .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
@@ -850,6 +864,9 @@
 .squiz-rb-scope .text-right {
   text-align: right;
 }
+.squiz-rb-scope .align-\[-0\.125em\] {
+  vertical-align: -0.125em;
+}
 .squiz-rb-scope .text-base {
   font-size: 1rem;
 }
@@ -913,6 +930,10 @@
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.squiz-rb-scope .antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 .squiz-rb-scope .opacity-40 {
   opacity: 0.4;
 }
@@ -990,6 +1011,57 @@
   gap: 0.5rem;
   justify-items: center;
 }
+.squiz-rb-scope .spinner {
+  display: inline-block;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.squiz-rb-scope .spinner {
+  animation: spin 1s linear infinite;
+  vertical-align: -0.125em;
+}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes spin {
+  }
+  .squiz-rb-scope .spinner {
+    animation: spin 1.5s linear infinite;
+  }
+}
+.squiz-rb-scope .spinner {
+  height: 20px;
+  width: 20px;
+}
+.squiz-rb-scope .spinner__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.squiz-rb-scope .spinner--md {
+  height: 32px;
+  width: 32px;
+}
+.squiz-rb-scope .animate-skeleton-pulse {
+  animation: pulse 2s linear infinite;
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .squiz-rb-scope *,
 .squiz-rb-scope button {
   -webkit-font-smoothing: antialiased;
@@ -1153,6 +1225,16 @@
   --tw-text-opacity: 1;
   color: rgb(148 148 148 / var(--tw-text-opacity));
 }
+@media (prefers-reduced-motion: reduce) {
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .squiz-rb-scope .motion-reduce\:animate-\[spin_1\.5s_linear_infinite\] {
+    animation: spin 1.5s linear infinite;
+  }
+}
 @media not all and (min-width: 768px) {
   .squiz-rb-scope .max-md\:hidden {
     display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.39.1-alpha.8",
+  "version": "1.40.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "1.39.1-alpha.8",
-    "@squiz/generic-browser-lib": "1.39.1-alpha.8",
+    "@squiz/dx-json-schema-lib": "1.40.0",
+    "@squiz/generic-browser-lib": "1.40.0",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "b9a1cd2a55425b237ca60c01288af38c496616cf"
+  "gitHead": "42d08bd61b20a1a8a4bb6ccb4a9c60ababcd8f39"
 }

package/postcss.config.js

@@ -5,6 +5,12 @@ module.exports = {
     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'],
     }),
   ],

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
-import { screen, render, waitFor, within } from '@testing-library/react';
+import { screen, render, waitFor, within, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { mockResource, mockSource } from '../__mocks__/MockModels';
 import { Resource, Source, Hierarchy } from '../types';
@@ -175,8 +175,10 @@ describe('ResourcePickerContainer', () => {
         mockResource({ id: '3', name: 'Test Page 3' }),
       ]);
 
-    // Component has finished initial render
-    const { getAllByText } = render(<ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />);
+    const { getAllByText } = await act(async () => {
+      // Component has finished initial render
+      return render(<ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />);
+    });
     await waitFor(() => {
       expect(getAllByText('Test system')[0]).toBeInTheDocument();
     });
@@ -198,10 +200,12 @@ describe('ResourcePickerContainer', () => {
   ])(
     'Selecting a node on %s shows its properties in the details panel',
     async (description: string, width: number, expectedPreviewPanelCloseButtons: number) => {
-      render(
-        <ResponsiveContext.Provider value={{ width }}>
-          <ResourcePickerContainer {...baseProps} />
-        </ResponsiveContext.Provider>,
+      await act(async () =>
+        render(
+          <ResponsiveContext.Provider value={{ width }}>
+            <ResourcePickerContainer {...baseProps} />
+          </ResponsiveContext.Provider>,
+        ),
       );
       await waitFor(() => {
         expect(screen.getByRole('button', { name: 'Drill down to Test Website children' })).toBeInTheDocument();
@@ -393,7 +397,7 @@ describe('ResourcePickerContainer', () => {
         }),
       ]);
 
-    const { getByLabelText, getByText, getAllByText } = render(
+    const { getByLabelText, getByText, getAllByText, queryAllByText } = render(
       <ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />,
     );
     await waitFor(() => {
@@ -408,6 +412,11 @@ describe('ResourcePickerContainer', () => {
       expect(getByLabelText('Resource breadcrumb')).toBeInTheDocument();
     });
 
+    // Loading is done
+    await waitFor(() => {
+      expect(queryAllByText('loading Resource list')).toHaveLength(0);
+    });
+
     // Drill down again
     user.click(screen.getByRole('button', { name: 'Drill down to Test Page children' }));
 

package/src/index.scss

@@ -6,6 +6,8 @@
 // Components
 @import './ResourceBreadcrumb/resource-breadcrumb';
 @import './ResourcePicker/resource-picker';
+@import '@squiz/generic-browser-lib/src/Spinner/spinner';
+@import '@squiz/generic-browser-lib/src/Skeleton/skeleton';
 
 *,
 button {

package/tailwind.config.cjs

@@ -1,11 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    '../generic-browser-lib/src/**/*.{js,ts,jsx,tsx}',
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/flowbite/**/*.js',
-  ],
+  content: {
+    relative: true,
+    files: [
+      '../generic-browser-lib/src/**/*.{js,ts,jsx,tsx,scss}',
+      './index.html',
+      './src/**/*.{js,ts,jsx,tsx}',
+      './node_modules/flowbite/**/*.js',
+    ],
+  },
   theme: {
     extend: {
       borderWidth: {