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

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/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,7 +10,7 @@ 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 = {};
@@ -18,9 +18,10 @@ function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }
         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') },
+        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,7 +41,7 @@ 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,

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: `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 }) {
+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: "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/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.3",
   "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": "5be5e45cfe2e31be51e8a09e2a1a934900ff29fe"
 }

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/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;
@@ -37,12 +41,15 @@ export function ModalTrigger({
         {...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}>

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"

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,7 @@ 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={`flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`} key={uuid()}>
       <ModalOpeningButton
         type="button"
         {...triggerProps}
@@ -59,6 +62,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,10 +4,22 @@ 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">
       <Icon icon={state as IconOptions} aria-hidden />
@@ -16,14 +28,7 @@ const ResourceState = function ({ state, message, handleReload }: ResourceState)
         {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/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';