@squiz/generic-browser-lib 1.66.0 → 1.67.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @squiz/generic-browser-lib
 
+## 1.67.1
+
+### Patch Changes
+
+- e60bb77: Added ID attribute to component buttons
+
+## 1.67.0
+
+### Minor Changes
+
+- 7c324d7: Added ignorePrevious option to useAsync hook (to ignore previous data)
+
 ## 1.66.0
 
 ### Minor Changes

package/lib/Hooks/useAsync.d.ts

@@ -4,6 +4,8 @@ export type UseAsyncProps<TReturnType, TDefaultValueType> = {
     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;
+    /** Optional toggle to ignore previous async callback data */
+    ignorePrevious?: boolean;
 };
 /**
  * Hook for invoking async code and keeping track of its state.
@@ -13,7 +15,7 @@ export type UseAsyncProps<TReturnType, TDefaultValueType> = {
  * 2. When any of the `deps` change.
  * 3. When the `reload` function is called.
  */
-export declare const useAsync: <TReturnType, TDefaultValueType>({ callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>, deps: DependencyList) => {
+export declare const useAsync: <TReturnType, TDefaultValueType>({ callback, defaultValue, ignorePrevious }: UseAsyncProps<TReturnType, TDefaultValueType>, deps: DependencyList) => {
     data: TReturnType | TDefaultValueType;
     error: Error | null;
     isLoading: boolean;

package/lib/Hooks/useAsync.js

@@ -10,14 +10,16 @@ const react_1 = require("react");
  * 2. When any of the `deps` change.
  * 3. When the `reload` function is called.
  */
-const useAsync = ({ callback, defaultValue }, deps) => {
+const useAsync = ({ callback, defaultValue, ignorePrevious = false }, deps) => {
     const [data, setData] = (0, react_1.useState)(defaultValue);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const requestCountRef = (0, react_1.useRef)(0);
     const reload = (0, react_1.useCallback)(() => {
         setIsLoading(true);
         setError(null);
         setData(defaultValue);
+        const currentRequestCount = ignorePrevious ? ++requestCountRef.current : 0;
         try {
             const isArrayOfCallbacks = Array.isArray(callback);
             const promises = isArrayOfCallbacks ? callback.map((cb) => cb()) : [callback()];
@@ -29,12 +31,18 @@ const useAsync = ({ callback, defaultValue }, deps) => {
             }
             Promise.all(promises)
                 .then((resolved) => {
-                setData(isArrayOfCallbacks ? resolved : resolved[0]);
-                setIsLoading(false);
+                // If ignorePrevious is set to TRUE we only set the new data if it's the most recent request
+                // and not a previous request that has taken longer than expected.
+                if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+                    setData(isArrayOfCallbacks ? resolved : resolved[0]);
+                    setIsLoading(false);
+                }
             })
                 .catch((e) => {
-                setError(e instanceof Error ? e : new Error(String(e)));
-                setIsLoading(false);
+                if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+                    setError(e instanceof Error ? e : new Error(String(e)));
+                    setIsLoading(false);
+                }
             });
         }
         catch (e) {

package/lib/ResourceItem/ResourceItem.d.ts

@@ -16,6 +16,7 @@ interface ResourceItem<T> {
     componentIcon?: ReactElement | undefined;
     iconSource?: ResourceSources;
     showChevron?: boolean;
+    id?: string;
 }
-declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource, showChevron, }: ResourceItem<T>) => React.JSX.Element;
+declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource, showChevron, id, }: ResourceItem<T>) => React.JSX.Element;
 export { ResourceItem };

package/lib/ResourceItem/ResourceItem.js

@@ -9,14 +9,14 @@ const react_aria_1 = require("react-aria");
 const ModalOpeningButton_1 = require("../Modal/ModalOpeningButton");
 const Icon_1 = require("../Icons/Icon");
 const utils_1 = require("../Utils/utils");
-const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource = 'matrix', showChevron = false, }) => {
+const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource = 'matrix', showChevron = false, id, }) => {
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, previewModalState);
     const isDisabled = allowedTypes !== undefined && !allowedTypes.includes((0, utils_1.transformSnakeCase)(type));
     const title = isDisabled ? "You can't select this item" : label;
     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, utils_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 },
+        `, title: title, id: id },
             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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.66.0",
+  "version": "1.67.1",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/Hooks/useAsync.spec.ts

@@ -3,9 +3,10 @@ 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, ignorePrevious = false) => {
     return renderHook(
-      ({ deps }: { deps: DependencyList }) => useAsync({ callback, defaultValue: 'Initial state' }, deps),
+      ({ deps }: { deps: DependencyList }) =>
+        useAsync({ callback, defaultValue: 'Initial state', ignorePrevious }, deps),
       { initialProps: { deps } },
     );
   };

package/src/Hooks/useAsync.ts

@@ -1,10 +1,12 @@
-import { DependencyList, useState, useCallback, useEffect } from 'react';
+import { DependencyList, useState, useCallback, useEffect, useRef } from 'react';
 
 export type UseAsyncProps<TReturnType, TDefaultValueType> = {
   /** 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;
+  /** Optional toggle to ignore previous async callback data */
+  ignorePrevious?: boolean;
 };
 
 /**
@@ -16,18 +18,21 @@ export type UseAsyncProps<TReturnType, TDefaultValueType> = {
  * 3. When the `reload` function is called.
  */
 export const useAsync = <TReturnType, TDefaultValueType>(
-  { callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>,
+  { callback, defaultValue, ignorePrevious = false }: UseAsyncProps<TReturnType, TDefaultValueType>,
   deps: DependencyList,
 ) => {
   const [data, setData] = useState(defaultValue);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const requestCountRef = useRef(0);
 
   const reload = useCallback(() => {
     setIsLoading(true);
     setError(null);
     setData(defaultValue);
 
+    const currentRequestCount = ignorePrevious ? ++requestCountRef.current : 0;
+
     try {
       const isArrayOfCallbacks = Array.isArray(callback);
       const promises = isArrayOfCallbacks ? callback.map((cb) => cb()) : [callback()];
@@ -41,12 +46,18 @@ export const useAsync = <TReturnType, TDefaultValueType>(
 
       Promise.all(promises)
         .then((resolved: TReturnType[]) => {
-          setData(isArrayOfCallbacks ? (resolved as TReturnType) : resolved[0]);
-          setIsLoading(false);
+          // If ignorePrevious is set to TRUE we only set the new data if it's the most recent request
+          // and not a previous request that has taken longer than expected.
+          if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+            setData(isArrayOfCallbacks ? (resolved as TReturnType) : resolved[0]);
+            setIsLoading(false);
+          }
         })
         .catch((e: unknown) => {
-          setError(e instanceof Error ? e : new Error(String(e)));
-          setIsLoading(false);
+          if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+            setError(e instanceof Error ? e : new Error(String(e)));
+            setIsLoading(false);
+          }
         });
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)));

package/src/ResourceItem/ResourceItem.tsx

@@ -21,6 +21,7 @@ interface ResourceItem<T> {
   componentIcon?: ReactElement | undefined;
   iconSource?: ResourceSources;
   showChevron?: boolean;
+  id?: string;
 }
 
 const ResourceItem = <T,>({
@@ -37,6 +38,7 @@ const ResourceItem = <T,>({
   componentIcon,
   iconSource = 'matrix',
   showChevron = false,
+  id,
 }: ResourceItem<T>) => {
   const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
   const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(transformSnakeCase(type));
@@ -59,6 +61,7 @@ const ResourceItem = <T,>({
         } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `}
         title={title}
+        id={id}
       >
         <Icon
           icon={type as IconOptions}