@squiz/generic-browser-lib 1.39.1-alpha.1 → 1.39.1-alpha.11

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/Icons/Icon.d.ts

@@ -25,6 +25,7 @@ export declare const iconSources: {
         video_file: typeof import("./MatrixResources").Video;
         word_doc: typeof import("./MatrixResources").Word;
     };
+    component: never[];
 };
 export type ResourceSources = keyof typeof iconSources;
 export type IconOptions = string;
@@ -43,8 +44,9 @@ export type IconOptions = string;
  * @example
  * <Icon resourceSource="matrix" icon="page" className="custom-class" />
  */
-export declare function Icon({ resourceSource, icon, isDecorative, ...props }: {
+export declare function Icon({ resourceSource, icon, componentIcon, isDecorative, ...props }: {
     icon?: IconOptions;
     resourceSource?: ResourceSources;
     isDecorative?: boolean;
+    componentIcon?: React.ReactNode | undefined;
 } & React.HTMLAttributes<HTMLElement> & React.SVGAttributes<SVGElement>): JSX.Element;

package/lib/Icons/Icon.js

@@ -10,6 +10,7 @@ const MatrixResourceMap_1 = __importDefault(require("./MatrixResources/MatrixRes
 exports.iconSources = {
     generic: GenericIconMap_1.default,
     matrix: MatrixResourceMap_1.default,
+    component: [],
 };
 /**
  * Renders an icon based on the resource source and the icon name
@@ -26,7 +27,11 @@ exports.iconSources = {
  * @example
  * <Icon resourceSource="matrix" icon="page" className="custom-class" />
  */
-function Icon({ resourceSource = 'generic', icon, isDecorative = true, ...props }) {
+function Icon({ resourceSource = 'generic', icon, componentIcon, isDecorative = true, ...props }) {
+    if (resourceSource === 'component' && componentIcon !== undefined) {
+        const className = props?.className || '';
+        return react_1.default.createElement("div", { className: className }, componentIcon);
+    }
     const icons = exports.iconSources[resourceSource] || null;
     // If the resource source is the current source and the icon is in the current source map, render the icon
     if (icons && icon && icon in icons) {

package/lib/Modal/Modal.js

@@ -33,7 +33,7 @@ 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);

package/lib/Modal/ModalTrigger.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-export declare function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }: {
+export declare function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon, isDisabled, children, ...props }: {
     label: string;
+    labelClasses?: string;
+    containerClasses?: string;
     showLabel?: boolean;
     icon?: React.ReactNode;
     isDisabled?: boolean;

package/lib/Modal/ModalTrigger.js

@@ -10,17 +10,18 @@ const react_stately_1 = require("react-stately");
 const clsx_1 = __importDefault(require("clsx"));
 const Modal_1 = require("./Modal");
 const ModalOpeningButton_1 = require("./ModalOpeningButton");
-function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }) {
+function ModalTrigger({ label, labelClasses, showLabel, containerClasses, icon, isDisabled, children, ...props }) {
     const state = (0, react_stately_1.useOverlayTriggerState)(props);
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, state);
     let ariaAttr = {};
     if (!showLabel) {
         ariaAttr = { ...ariaAttr, 'aria-label': label };
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, ...ariaAttr, isDisabled: isDisabled, className: (0, clsx_1.default)('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') },
+    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,
-            showLabel && react_1.default.createElement("span", { className: "ml-1 text-sm font-semibold leading-4" }, label)),
+            showLabel && react_1.default.createElement("span", { className: `${labelClasses || 'ml-1 text-sm font-semibold leading-4'}` }, label)),
         state.isOpen && (react_1.default.createElement(Modal_1.Modal, { isDismissable: true, state: state, overlayProps: overlayProps }, (titleProps) => children(state.close, titleProps)))));
 }
 exports.ModalTrigger = ModalTrigger;

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -9,5 +9,6 @@ export interface PreviewPanelProps {
     onSelect: (resource: any) => void;
     onClose: () => void;
     ResourceComponent?: React.ElementType;
+    selectionCallback?: (param: any) => void;
 }
-export declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, }: PreviewPanelProps) => JSX.Element;
+export declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, }: PreviewPanelProps) => JSX.Element;

package/lib/PreviewPanel/PreviewPanel.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const react_responsive_1 = require("react-responsive");
 const Icon_1 = require("../Icons/Icon");
 const PreviewModal_1 = __importDefault(require("./PreviewModal"));
-const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, }) {
+const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, selectionCallback, }) {
     // Watch the media size to see if we are on mobile size
     const isMobile = (0, react_responsive_1.useMediaQuery)({ query: '(max-width: 640px)' });
     // If we are on mobile and the selected resource changes show the preview panel modal.
@@ -41,10 +41,10 @@ const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState,
         }
     }, [resource, isMobile]);
     const previewPanel = resource && (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && react_1.default.createElement(ResourceComponent, { resource: resource })),
+        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.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { OverlayTriggerState } from 'react-stately';
 import { ResourceSources } from '../Icons/Icon';
@@ -12,8 +13,9 @@ interface ResourceItem<T> {
     onDrillDown?: (node: T) => void;
     className: string;
     allowedTypes?: string[] | undefined;
+    componentIcon?: ReactElement | undefined;
     iconSource?: ResourceSources;
     showChevron?: boolean;
 }
-declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, iconSource, showChevron, }: ResourceItem<T>) => JSX.Element;
+declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource, showChevron, }: ResourceItem<T>) => JSX.Element;
 export { ResourceItem };

package/lib/ResourceItem/ResourceItem.js

@@ -8,15 +8,16 @@ const react_1 = __importDefault(require("react"));
 const react_aria_1 = require("react-aria");
 const ModalOpeningButton_1 = require("../Modal/ModalOpeningButton");
 const Icon_1 = require("../Icons/Icon");
-const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, iconSource = 'matrix', showChevron = false, }) => {
+const uuid_1 = require("../Utils/uuid");
+const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource = 'matrix', showChevron = false, }) => {
     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}` },
+    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 },
-            react_1.default.createElement(Icon_1.Icon, { icon: type, resourceSource: iconSource, "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}` }),
+            react_1.default.createElement(Icon_1.Icon, { icon: type, resourceSource: iconSource, "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}`, componentIcon: componentIcon }),
             react_1.default.createElement("span", { className: `relative  flex items-center ${selected ? 'mr-8' : ''}` },
                 react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word" }, label),
                 selected && react_1.default.createElement(Icon_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" })),

package/lib/ResourceState/ResourceState.d.ts

@@ -1,7 +1,8 @@
 interface ResourceState {
     state: 'error' | 'empty';
     message?: string;
-    handleReload: () => void;
+    handleReload?: () => void;
+    showButton?: boolean;
 }
-declare const ResourceState: ({ state, message, handleReload }: ResourceState) => JSX.Element;
+declare const ResourceState: ({ state, message, handleReload, showButton }: ResourceState) => JSX.Element;
 export { ResourceState };

package/lib/ResourceState/ResourceState.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResourceState = void 0;
 const react_1 = __importDefault(require("react"));
 const Icon_1 = require("../Icons/Icon");
-const ResourceState = function ({ state, message, handleReload }) {
-    return (react_1.default.createElement("div", { className: "flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
+const ResourceState = function ({ state, message, handleReload, showButton = true }) {
+    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: "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),
-        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')));
+        showButton && RetryButton));
 };
 exports.ResourceState = ResourceState;

package/lib/Skeleton/List/SkeletonList.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonList = void 0;
 const react_1 = __importDefault(require("react"));
 const SkeletonListItem_1 = require("../ListItem/SkeletonListItem");
+const uuid_1 = require("../../Utils/uuid");
 const clsx_1 = __importDefault(require("clsx"));
-const SkeletonList = ({ itemCount = 8, className, ariaLabel }) => (react_1.default.createElement("ul", { className: (0, clsx_1.default)(`flex flex-col px-7 my-4 focus-visible:outline-0`, className), "aria-label": `${ariaLabel || 'Skeleton loader list'}` }, [...Array(itemCount)].map((_item, index) => {
-    return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: index });
+const SkeletonList = ({ itemCount = 8, className, ariaLabel }) => (react_1.default.createElement("ul", { className: (0, clsx_1.default)(`flex flex-col px-7 my-4 focus-visible:outline-0`, className), "aria-label": `${ariaLabel || 'Skeleton loader list'}` }, [...Array(itemCount)].map((_item) => {
+    return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: (0, uuid_1.uuid)() });
 })));
 exports.SkeletonList = SkeletonList;

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/lib/Utils/uuid.d.ts

@@ -0,0 +1,2 @@
+declare function uuid(): string;
+export { uuid };

package/lib/Utils/uuid.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uuid = void 0;
+function uuid() {
+    return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (Number(c) ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16));
+}
+exports.uuid = uuid;

package/lib/index.d.ts

@@ -10,3 +10,4 @@ export * from './PreviewPanel/PreviewPanel';
 export * from './PreviewPanel/PreviewPanelHOC';
 export * from './Hooks/useAsync';
 export * from './ResetButton/ResetButton';
+export * from './Utils/uuid';

package/lib/index.js

@@ -1,4 +1,5 @@
 "use strict";
+/* istanbul ignore file */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,3 +27,4 @@ __exportStar(require("./PreviewPanel/PreviewPanel"), exports);
 __exportStar(require("./PreviewPanel/PreviewPanelHOC"), exports);
 __exportStar(require("./Hooks/useAsync"), exports);
 __exportStar(require("./ResetButton/ResetButton"), exports);
+__exportStar(require("./Utils/uuid"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.39.1-alpha.1",
+  "version": "1.39.1-alpha.11",
   "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": "16b9f02b751a923a71f96684bd46c781fc97dcbc"
+  "gitHead": "788f8adc16c48ce3121dca04ca370ebc2c537758"
 }

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/Icons/Icon.spec.tsx

@@ -59,4 +59,12 @@ describe('Icon', () => {
       }
     }
   });
+
+  it('should render passed componentIcon and resourceSource is set to component', async () => {
+    const Component = () => <div data-testid="test-icon" />;
+    const { getByTestId } = render(
+      <Icon resourceSource="component" componentIcon={(<Component />) as React.ReactNode} />,
+    );
+    expect(getByTestId('test-icon')).toBeInTheDocument();
+  });
 });

package/src/Icons/Icon.tsx

@@ -5,6 +5,7 @@ import MatrixResourceMap from './MatrixResources/MatrixResourceMap';
 export const iconSources = {
   generic: GenericIconMap,
   matrix: MatrixResourceMap,
+  component: [],
 };
 
 // The resource sources options
@@ -29,14 +30,21 @@ export type IconOptions = string;
 export function Icon({
   resourceSource = 'generic',
   icon,
+  componentIcon,
   isDecorative = true,
   ...props
 }: {
   icon?: IconOptions;
   resourceSource?: ResourceSources;
   isDecorative?: boolean;
+  componentIcon?: React.ReactNode | undefined;
 } & React.HTMLAttributes<HTMLElement> &
   React.SVGAttributes<SVGElement>) {
+  if (resourceSource === 'component' && componentIcon !== undefined) {
+    const className = props?.className || '';
+    return <div className={className}>{componentIcon}</div>;
+  }
+
   const icons = (iconSources[resourceSource] as any) || null;
 
   // If the resource source is the current source and the icon is in the current source map, render the icon

package/src/Modal/Modal.spec.tsx

@@ -22,6 +22,26 @@ describe('Modal', () => {
       </div>,
     );
     expect(screen.queryByTestId('modal')).toBeFalsy();
+    expect(screen.queryAllByLabelText('Open testing modal')).toHaveLength(0);
+  });
+
+  it('Modal should render label', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel={false}>
+          {(onClose, titleProps) => (
+            <div data-testingid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+    expect(screen.getByLabelText('Open testing modal')).toBeTruthy();
   });
 
   it('Modal opens when triggered', async () => {

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>

package/src/Modal/ModalTrigger.tsx

@@ -9,13 +9,17 @@ import { ModalOpeningButton } from './ModalOpeningButton';
 
 export function ModalTrigger({
   label,
+  labelClasses,
   showLabel,
+  containerClasses,
   icon,
   isDisabled,
   children,
   ...props
 }: {
   label: string;
+  labelClasses?: string;
+  containerClasses?: string;
   showLabel?: boolean;
   icon?: React.ReactNode;
   isDisabled?: boolean;
@@ -30,25 +34,28 @@ export function ModalTrigger({
   }
 
   return (
-    <>
+    <div className="squiz-gb-scope">
       <ModalOpeningButton
         type="button"
         {...triggerProps}
         {...ariaAttr}
         isDisabled={isDisabled}
         className={clsx(
-          'flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none',
+          `${
+            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}
-        {showLabel && <span className="ml-1 text-sm font-semibold leading-4">{label}</span>}
+        {showLabel && <span className={`${labelClasses || 'ml-1 text-sm font-semibold leading-4'}`}>{label}</span>}
       </ModalOpeningButton>
       {state.isOpen && (
         <Modal isDismissable state={state} overlayProps={overlayProps}>
           {(titleProps) => children(state.close, titleProps)}
         </Modal>
       )}
-    </>
+    </div>
   );
 }

package/src/PreviewPanel/PreviewPanel.tsx

@@ -14,6 +14,7 @@ export interface PreviewPanelProps {
   onSelect: (resource: any) => void;
   onClose: () => void;
   ResourceComponent?: React.ElementType;
+  selectionCallback?: (param: any) => void;
 }
 
 export const PreviewPanel = function ({
@@ -23,6 +24,7 @@ export const PreviewPanel = function ({
   onSelect,
   onClose,
   ResourceComponent,
+  selectionCallback,
 }: PreviewPanelProps) {
   // Watch the media size to see if we are on mobile size
   const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
@@ -36,7 +38,9 @@ export const PreviewPanel = function ({
 
   const previewPanel = resource && (
     <>
-      <div className="flex flex-col grow">{ResourceComponent && <ResourceComponent resource={resource} />}</div>
+      <div className="flex flex-col grow">
+        {ResourceComponent && <ResourceComponent resource={resource} selectionCallback={selectionCallback} />}
+      </div>
       <div className="flex justify-end border-t border-gray-300">
         <button
           type="button"
@@ -50,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>}
 
@@ -78,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

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { useOverlayTrigger } from 'react-aria';
 import { OverlayTriggerState } from 'react-stately';
 
 import { ModalOpeningButton } from '../Modal/ModalOpeningButton';
 import { Icon, IconOptions, ResourceSources } from '../Icons/Icon';
+import { uuid } from '../Utils/uuid';
 
 interface ResourceItem<T> {
   item: T;
@@ -17,6 +18,7 @@ interface ResourceItem<T> {
   onDrillDown?: (node: T) => void;
   className: string;
   allowedTypes?: string[] | undefined;
+  componentIcon?: ReactElement | undefined;
   iconSource?: ResourceSources;
   showChevron?: boolean;
 }
@@ -32,6 +34,7 @@ const ResourceItem = <T,>({
   onDrillDown,
   className,
   allowedTypes,
+  componentIcon,
   iconSource = 'matrix',
   showChevron = false,
 }: ResourceItem<T>) => {
@@ -40,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}`}>
+    <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}
@@ -59,6 +65,7 @@ const ResourceItem = <T,>({
           resourceSource={iconSource}
           aria-label={type}
           className={`mr-4 shrink-0 ${isDisabled && 'opacity-40'}`}
+          componentIcon={componentIcon}
         />
         <span className={`relative  flex items-center ${selected ? 'mr-8' : ''}`}>
           <span className="line-clamp-2 text-left break-word">{label}</span>

package/src/ResourceState/ResourceState.tsx

@@ -4,26 +4,31 @@ import { Icon, IconOptions } from '../Icons/Icon';
 interface ResourceState {
   state: 'error' | 'empty';
   message?: string;
-  handleReload: () => void;
+  handleReload?: () => void;
+  showButton?: boolean;
 }
 
-const ResourceState = function ({ state, message, handleReload }: ResourceState) {
+const ResourceState = function ({ state, message, handleReload, showButton = true }: ResourceState) {
+  const RetryButton = (
+    <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"
+    >
+      <Icon icon={state === 'empty' ? 'back' : 'retry'} aria-hidden />
+      {state === 'empty' ? 'Back to source list' : 'Try again'}
+    </button>
+  );
+
   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">
         {state === 'empty' ? 'There are no items to display' : message}
       </span>
       {/* Retry button */}
-      <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"
-      >
-        <Icon icon={state === 'empty' ? 'back' : 'retry'} aria-hidden />
-        {state === 'empty' ? 'Back to source list' : 'Try again'}
-      </button>
+      {showButton && RetryButton}
     </div>
   );
 };

package/src/Skeleton/List/SkeletonList.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SkeletonListItem } from '../ListItem/SkeletonListItem';
+import { uuid } from '../../Utils/uuid';
 import clsx from 'clsx';
 
 export type SkeletonListProps = {
@@ -13,8 +14,8 @@ export const SkeletonList = ({ itemCount = 8, className, ariaLabel }: SkeletonLi
     className={clsx(`flex flex-col px-7 my-4 focus-visible:outline-0`, className)}
     aria-label={`${ariaLabel || 'Skeleton loader list'}`}
   >
-    {[...Array(itemCount)].map((_item, index: number) => {
-      return <SkeletonListItem key={index} />;
+    {[...Array(itemCount)].map((_item) => {
+      return <SkeletonListItem key={uuid()} />;
     })}
   </ul>
 );

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>
   );

package/src/Utils/uuid.ts

@@ -0,0 +1,7 @@
+function uuid(): string {
+  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
+    (Number(c) ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16),
+  );
+}
+
+export { uuid };

package/src/index.ts

@@ -1,3 +1,5 @@
+/* istanbul ignore file */
+
 export * from './Icons/Icon';
 
 export * from './Spinner/Spinner';
@@ -18,3 +20,5 @@ export * from './PreviewPanel/PreviewPanelHOC';
 export * from './Hooks/useAsync';
 
 export * from './ResetButton/ResetButton';
+
+export * from './Utils/uuid';