@squiz/generic-browser-lib 1.39.1-alpha.9 → 1.40.1-alpha.0

package/lib/Hooks/useAsync.d.ts

@@ -1,17 +1,17 @@
 import { DependencyList } from 'react';
 export type UseAsyncProps<TReturnType, TDefaultValueType> = {
-    /** The async callback to call for fetching data. */
-    callback: () => TReturnType | Promise<TReturnType>;
+    /** The async callback or an array of async callbacks to call for fetching data. */
+    callback: (() => TReturnType | Promise<TReturnType>) | Array<() => 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.
+ * Hook for invoking 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.
+ * 3. When the `reload` function is called.
  */
 export declare const useAsync: <TReturnType, TDefaultValueType>({ callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>, deps: DependencyList) => {
     data: TReturnType | TDefaultValueType;

package/lib/Hooks/useAsync.js

@@ -3,12 +3,12 @@ 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.
+ * Hook for invoking 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.
+ * 3. When the `reload` function is called.
  */
 const useAsync = ({ callback, defaultValue }, deps) => {
     const [data, setData] = (0, react_1.useState)(defaultValue);
@@ -19,32 +19,30 @@ const useAsync = ({ callback, defaultValue }, deps) => {
         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.
+            const isArrayOfCallbacks = Array.isArray(callback);
+            const promises = isArrayOfCallbacks ? callback.map((cb) => cb()) : [callback()];
+            if (!(promises[0] instanceof Promise)) {
+                const result = promises[0];
                 setData(result);
                 setIsLoading(false);
+                return;
             }
+            Promise.all(promises)
+                .then((resolved) => {
+                setData(isArrayOfCallbacks ? resolved : resolved[0]);
+                setIsLoading(false);
+            })
+                .catch((e) => {
+                setError(e instanceof Error ? e : new Error(String(e)));
+                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)
+    // Reload data on dependency change (and initial mount)
     (0, react_1.useEffect)(() => {
         reload();
     }, deps);

package/lib/Modal/Modal.js

@@ -33,13 +33,13 @@ const react_aria_1 = require("react-aria");
 function ModalContent({ children, ...props }) {
     const ref = (0, react_1.useRef)(null);
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)(props, ref);
-    return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg" }, children(titleProps)));
+    return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg outline-0" }, children(titleProps)));
 }
 function Modal({ isDismissable, state, overlayProps, children, ...props }) {
     const ref = (0, react_1.useRef)(null);
     const { modalProps, underlayProps } = (0, react_aria_1.useModalOverlay)({ isDismissable, ...props }, state, ref);
     return (react_1.default.createElement(react_aria_1.Overlay, null,
-        react_1.default.createElement("div", { className: "squiz-gb-scope squiz-cb-scope squiz-rb-scope" },
+        react_1.default.createElement("div", { className: "squiz-gb-scope" },
             react_1.default.createElement("div", { ...underlayProps, className: "h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25" },
                 react_1.default.createElement("div", { ...modalProps, ref: ref, className: "h-full flex items-center justify-center" },
                     react_1.default.createElement(ModalContent, { ...overlayProps }, (titleProps) => children(titleProps)))))));

package/lib/Modal/ModalTrigger.js

@@ -17,7 +17,7 @@ function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon,
     if (!showLabel) {
         ariaAttr = { ...ariaAttr, 'aria-label': label };
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope" },
         react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, ...ariaAttr, isDisabled: isDisabled, className: (0, clsx_1.default)(`${containerClasses ||
                 'flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none'}`, isDisabled && 'hover:bg-transparent cursor-not-allowed text-gray-600') },
             icon,

package/lib/PreviewPanel/PreviewPanel.js

@@ -44,7 +44,7 @@ const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState,
         react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && react_1.default.createElement(ResourceComponent, { resource: resource, selectionCallback: selectionCallback })),
         react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
             react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5" }, "Select"))));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope h-full" },
         !isMobile && react_1.default.createElement("h3", { className: "sr-only" }, "Resource Details"),
         resource === null && (react_1.default.createElement("div", { className: "max-sm:hidden flex flex-col h-full" },
             react_1.default.createElement("div", { className: "flex flex-col grow items-center mt-20 mx-20" },

package/lib/ResourceItem/ResourceItem.js

@@ -13,7 +13,7 @@ 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-1 border-grey-200 min-h-[64px] ${className}`, key: (0, uuid_1.uuid)() },
+    return (react_1.default.createElement("li", { className: `squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`, key: (0, uuid_1.uuid)() },
         react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { 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 },

package/lib/ResourceState/ResourceState.js

@@ -10,7 +10,7 @@ const ResourceState = function ({ state, message, handleReload, showButton = tru
     const RetryButton = (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.Icon, { icon: state === 'empty' ? 'back' : 'retry', "aria-hidden": true }),
         state === 'empty' ? 'Back to source list' : 'Try again'));
-    return (react_1.default.createElement("div", { className: "flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
         react_1.default.createElement(Icon_1.Icon, { 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),
         showButton && RetryButton));

package/lib/Spinner/Spinner.js

@@ -7,7 +7,7 @@ exports.Spinner = void 0;
 const react_1 = __importDefault(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Spinner = ({ size = 'sm', className, label = 'Loading' }) => {
-    return (react_1.default.createElement("div", { className: "spinner__wrapper text-gray-600", "aria-label": label },
+    return (react_1.default.createElement("div", { className: "squiz-gb-scope spinner__wrapper text-gray-600", "aria-label": label },
         react_1.default.createElement("div", { className: (0, clsx_1.default)('spinner', size && `spinner--${size}`, className), role: "status" })));
 };
 exports.Spinner = Spinner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.39.1-alpha.9",
+  "version": "1.40.1-alpha.0",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -72,5 +72,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "947f8ee7b28d83be28cd8f83e919911d5ca07f2c"
+  "gitHead": "81931ba6a9e9e62f6a5a9e8aac73b3c50418f478"
 }

package/postcss.config.js

@@ -6,6 +6,12 @@ module.exports = {
     require('postcss-prefix-selector')({
       prefix: '.squiz-gb-scope',
       includeFiles: ['./src/index.scss'],
+      transform(prefix, selector, prefixedSelector, filePath, rule) {
+        if (selector.match(/(squiz-gb-scope)/)) {
+          return selector;
+        }
+        return prefixedSelector;
+      },
     }),
   ],
 };

package/src/Hooks/useAsync.spec.ts

@@ -3,7 +3,7 @@ import { renderHook, waitFor } from '@testing-library/react';
 import { useAsync } from './useAsync';
 
 describe('useAsync', () => {
-  const renderAsyncHook = (callback: () => any, deps: DependencyList) => {
+  const renderAsyncHook = (callback: () => any | [], deps: DependencyList) => {
     return renderHook(
       ({ deps }: { deps: DependencyList }) => useAsync({ callback, defaultValue: 'Initial state' }, deps),
       { initialProps: { deps } },
@@ -103,4 +103,33 @@ describe('useAsync', () => {
       expect(result.current.data).toBe('Initial state');
     },
   );
+
+  test('useAsync handles multiple asynchronous callbacks', async () => {
+    const asyncCallbackOne = jest.fn(() => Promise.resolve('First Async Data'));
+    const asyncCallbackTwo = jest.fn(() => Promise.resolve('Second Async Data'));
+
+    const { result } = renderHook(() =>
+      useAsync(
+        {
+          callback: [asyncCallbackOne, asyncCallbackTwo],
+          defaultValue: 'Default Value',
+        },
+        [],
+      ),
+    );
+
+    // Initial state
+    expect(result.current.data).toBe('Default Value');
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.error).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.data).toStrictEqual(['First Async Data', 'Second Async Data']);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe(null);
+    });
+
+    expect(asyncCallbackOne).toHaveBeenCalled();
+    expect(asyncCallbackTwo).toHaveBeenCalled();
+  });
 });

package/src/Hooks/useAsync.ts

@@ -1,19 +1,19 @@
 import { DependencyList, useState, useCallback, useEffect } from 'react';
 
 export type UseAsyncProps<TReturnType, TDefaultValueType> = {
-  /** The async callback to call for fetching data. */
-  callback: () => TReturnType | Promise<TReturnType>;
+  /** The async callback or an array of async callbacks to call for fetching data. */
+  callback: (() => TReturnType | Promise<TReturnType>) | Array<() => 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.
+ * Hook for invoking 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.
+ * 3. When the `reload` function is called.
  */
 export const useAsync = <TReturnType, TDefaultValueType>(
   { callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>,
@@ -22,38 +22,39 @@ export const useAsync = <TReturnType, TDefaultValueType>(
   const [data, setData] = useState(defaultValue);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+
   const reload = 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: TReturnType) => {
-            setData(resolved);
-            setIsLoading(false);
-          })
-          .catch((e: unknown) => {
-            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.
+      const isArrayOfCallbacks = Array.isArray(callback);
+      const promises = isArrayOfCallbacks ? callback.map((cb) => cb()) : [callback()];
+
+      if (!(promises[0] instanceof Promise)) {
+        const result = promises[0];
         setData(result);
         setIsLoading(false);
+        return;
       }
+
+      Promise.all(promises)
+        .then((resolved: TReturnType[]) => {
+          setData(isArrayOfCallbacks ? (resolved as TReturnType) : resolved[0]);
+          setIsLoading(false);
+        })
+        .catch((e: unknown) => {
+          setError(e instanceof Error ? e : new Error(String(e)));
+          setIsLoading(false);
+        });
     } catch (e: unknown) {
-      // 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)
+  // Reload data on dependency change (and initial mount)
   useEffect(() => {
     reload();
   }, deps);

package/src/Modal/Modal.tsx

@@ -21,7 +21,7 @@ function ModalContent({
     <div
       {...dialogProps}
       ref={ref}
-      className="z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg"
+      className="z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg outline-0"
     >
       {children(titleProps)}
     </div>
@@ -40,7 +40,7 @@ export function Modal({ isDismissable, state, overlayProps, children, ...props }
 
   return (
     <Overlay>
-      <div className="squiz-gb-scope squiz-cb-scope squiz-rb-scope">
+      <div className="squiz-gb-scope">
         <div
           {...underlayProps}
           className="h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25"

package/src/Modal/ModalTrigger.tsx

@@ -34,7 +34,7 @@ export function ModalTrigger({
   }
 
   return (
-    <>
+    <div className="squiz-gb-scope">
       <ModalOpeningButton
         type="button"
         {...triggerProps}
@@ -56,6 +56,6 @@ export function ModalTrigger({
           {(titleProps) => children(state.close, titleProps)}
         </Modal>
       )}
-    </>
+    </div>
   );
 }

package/src/PreviewPanel/PreviewPanel.tsx

@@ -54,7 +54,7 @@ export const PreviewPanel = function ({
   );
 
   return (
-    <>
+    <div className="squiz-gb-scope h-full">
       {/* Dialog has its own title */}
       {!isMobile && <h3 className="sr-only">Resource Details</h3>}
 
@@ -82,6 +82,6 @@ export const PreviewPanel = function ({
 
       {/* If not mobile, just print the details out */}
       {resource && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
-    </>
+    </div>
   );
 };

package/src/ResourceItem/ResourceItem.tsx

@@ -43,7 +43,10 @@ const ResourceItem = <T,>({
   const title = isDisabled ? "You can't select this item" : label;
 
   return (
-    <li className={`flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`} key={uuid()}>
+    <li
+      className={`squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`}
+      key={uuid()}
+    >
       <ModalOpeningButton
         type="button"
         {...triggerProps}

package/src/ResourceState/ResourceState.tsx

@@ -21,7 +21,7 @@ const ResourceState = function ({ state, message, handleReload, showButton = tru
   );
 
   return (
-    <div className="flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
+    <div className="squiz-gb-scope flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
       <Icon icon={state as IconOptions} aria-hidden />
       {/* Message */}
       <span className="text-md text-gray-800 font-semibold leading-5">

package/src/Spinner/Spinner.tsx

@@ -9,7 +9,7 @@ export type SpinnerProps = {
 
 export const Spinner = ({ size = 'sm', className, label = 'Loading' }: SpinnerProps): ReactElement => {
   return (
-    <div className="spinner__wrapper text-gray-600" aria-label={label}>
+    <div className="squiz-gb-scope spinner__wrapper text-gray-600" aria-label={label}>
       <div className={clsx('spinner', size && `spinner--${size}`, className)} role="status" />
     </div>
   );