@inventreedb/ui 0.8.2 → 0.9.0

package/dist/node_modules/@tanstack/react-query/build/modern/useBaseQuery.js

@@ -21,6 +21,7 @@ function useBaseQuery(options, Observer, queryClient) {
   client.getDefaultOptions().queries?._experimental_beforeQuery?.(
     defaultedOptions
   );
+  const query = client.getQueryCache().get(defaultedOptions.queryHash);
   if (process.env.NODE_ENV !== "production") {
     if (!defaultedOptions.queryFn) {
       console.error(
@@ -30,7 +31,7 @@ function useBaseQuery(options, Observer, queryClient) {
   }
   defaultedOptions._optimisticResults = isRestoring ? "isRestoring" : "optimistic";
   ensureSuspenseTimers(defaultedOptions);
-  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary);
+  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary, query);
   useClearResetErrorBoundary(errorResetBoundary);
   const isNewCacheEntry = !client.getQueryCache().get(defaultedOptions.queryHash);
   const [observer] = React.useState(
@@ -63,7 +64,7 @@ function useBaseQuery(options, Observer, queryClient) {
     result,
     errorResetBoundary,
     throwOnError: defaultedOptions.throwOnError,
-    query: client.getQueryCache().get(defaultedOptions.queryHash),
+    query,
     suspense: defaultedOptions.suspense
   })) {
     throw result.error;
@@ -78,7 +79,7 @@ function useBaseQuery(options, Observer, queryClient) {
       fetchOptimistic(defaultedOptions, observer, errorResetBoundary)
     ) : (
       // subscribe to the "cache promise" so that we can finalize the currentThenable once data comes in
-      client.getQueryCache().get(defaultedOptions.queryHash)?.promise
+      query?.promise
     );
     promise?.catch(noop).finally(() => {
       observer.updateResult();

package/dist/node_modules/@tanstack/react-query/build/modern/useBaseQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseQuery.js","sources":["../../../../../../node_modules/@tanstack/react-query/build/modern/useBaseQuery.js"],"sourcesContent":["\"use client\";\n\n// src/useBaseQuery.ts\nimport * as React from \"react\";\nimport { isServer, noop, notifyManager } from \"@tanstack/query-core\";\nimport { useQueryClient } from \"./QueryClientProvider.js\";\nimport { useQueryErrorResetBoundary } from \"./QueryErrorResetBoundary.js\";\nimport {\n  ensurePreventErrorBoundaryRetry,\n  getHasError,\n  useClearResetErrorBoundary\n} from \"./errorBoundaryUtils.js\";\nimport { useIsRestoring } from \"./IsRestoringProvider.js\";\nimport {\n  ensureSuspenseTimers,\n  fetchOptimistic,\n  shouldSuspend,\n  willFetch\n} from \"./suspense.js\";\nfunction useBaseQuery(options, Observer, queryClient) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (typeof options !== \"object\" || Array.isArray(options)) {\n      throw new Error(\n        'Bad argument type. Starting with v5, only the \"Object\" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object'\n      );\n    }\n  }\n  const isRestoring = useIsRestoring();\n  const errorResetBoundary = useQueryErrorResetBoundary();\n  const client = useQueryClient(queryClient);\n  const defaultedOptions = client.defaultQueryOptions(options);\n  client.getDefaultOptions().queries?._experimental_beforeQuery?.(\n    defaultedOptions\n  );\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!defaultedOptions.queryFn) {\n      console.error(\n        `[${defaultedOptions.queryHash}]: No queryFn was passed as an option, and no default queryFn was found. The queryFn parameter is only optional when using a default queryFn. More info here: https://tanstack.com/query/latest/docs/framework/react/guides/default-query-function`\n      );\n    }\n  }\n  defaultedOptions._optimisticResults = isRestoring ? \"isRestoring\" : \"optimistic\";\n  ensureSuspenseTimers(defaultedOptions);\n  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary);\n  useClearResetErrorBoundary(errorResetBoundary);\n  const isNewCacheEntry = !client.getQueryCache().get(defaultedOptions.queryHash);\n  const [observer] = React.useState(\n    () => new Observer(\n      client,\n      defaultedOptions\n    )\n  );\n  const result = observer.getOptimisticResult(defaultedOptions);\n  const shouldSubscribe = !isRestoring && options.subscribed !== false;\n  React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        const unsubscribe = shouldSubscribe ? observer.subscribe(notifyManager.batchCalls(onStoreChange)) : noop;\n        observer.updateResult();\n        return unsubscribe;\n      },\n      [observer, shouldSubscribe]\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult()\n  );\n  React.useEffect(() => {\n    observer.setOptions(defaultedOptions);\n  }, [defaultedOptions, observer]);\n  if (shouldSuspend(defaultedOptions, result)) {\n    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary);\n  }\n  if (getHasError({\n    result,\n    errorResetBoundary,\n    throwOnError: defaultedOptions.throwOnError,\n    query: client.getQueryCache().get(defaultedOptions.queryHash),\n    suspense: defaultedOptions.suspense\n  })) {\n    throw result.error;\n  }\n  ;\n  client.getDefaultOptions().queries?._experimental_afterQuery?.(\n    defaultedOptions,\n    result\n  );\n  if (defaultedOptions.experimental_prefetchInRender && !isServer && willFetch(result, isRestoring)) {\n    const promise = isNewCacheEntry ? (\n      // Fetch immediately on render in order to ensure `.promise` is resolved even if the component is unmounted\n      fetchOptimistic(defaultedOptions, observer, errorResetBoundary)\n    ) : (\n      // subscribe to the \"cache promise\" so that we can finalize the currentThenable once data comes in\n      client.getQueryCache().get(defaultedOptions.queryHash)?.promise\n    );\n    promise?.catch(noop).finally(() => {\n      observer.updateResult();\n    });\n  }\n  return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;\n}\nexport {\n  useBaseQuery\n};\n//# sourceMappingURL=useBaseQuery.js.map"],"names":[],"mappings":";;;;;;;AAGA,MAAA,QAAA,OAAA,OAAA;AAgBA,SAAS,aAAa,SAAS,UAAU,aAAa;AACpD,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,OAAO,YAAY,YAAY,MAAM,QAAQ,OAAO,GAAG;AACzD,YAAM,IAAI;AAAA,QACR;AAAA,MACR;AAAA,IACI;AAAA,EACF;AACA,QAAM,cAAc,eAAc;AAClC,QAAM,qBAAqB,2BAA0B;AACrD,QAAM,SAAS,eAAe,WAAW;AACzC,QAAM,mBAAmB,OAAO,oBAAoB,OAAO;AAC3D,SAAO,oBAAoB,SAAS;AAAA,IAClC;AAAA,EACJ;AACE,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,iBAAiB,SAAS;AAC7B,cAAQ;AAAA,QACN,IAAI,iBAAiB,SAAS;AAAA,MACtC;AAAA,IACI;AAAA,EACF;AACA,mBAAiB,qBAAqB,cAAc,gBAAgB;AACpE,uBAAqB,gBAAgB;AACrC,kCAAgC,kBAAkB,kBAAkB;AACpE,6BAA2B,kBAAkB;AAC7C,QAAM,kBAAkB,CAAC,OAAO,cAAa,EAAG,IAAI,iBAAiB,SAAS;AAC9E,QAAM,CAAC,QAAQ,IAAI,MAAM;AAAA,IACvB,MAAM,IAAI;AAAA,MACR;AAAA,MACA;AAAA,IACN;AAAA,EACA;AACE,QAAM,SAAS,SAAS,oBAAoB,gBAAgB;AAC5D,QAAM,kBAAkB,CAAC,eAAe,QAAQ,eAAe;AAC/D,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,CAAC,kBAAkB;AACjB,cAAM,cAAc,kBAAkB,SAAS,UAAU,cAAc,WAAW,aAAa,CAAC,IAAI;AACpG,iBAAS,aAAY;AACrB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,UAAU,eAAe;AAAA,IAChC;AAAA,IACI,MAAM,SAAS,iBAAgB;AAAA,IAC/B,MAAM,SAAS,iBAAgB;AAAA,EACnC;AACE,QAAM,UAAU,MAAM;AACpB,aAAS,WAAW,gBAAgB;AAAA,EACtC,GAAG,CAAC,kBAAkB,QAAQ,CAAC;AAC/B,MAAI,cAAc,kBAAkB,MAAM,GAAG;AAC3C,UAAM,gBAAgB,kBAAkB,UAAU,kBAAkB;AAAA,EACtE;AACA,MAAI,YAAY;AAAA,IACd;AAAA,IACA;AAAA,IACA,cAAc,iBAAiB;AAAA,IAC/B,OAAO,OAAO,cAAa,EAAG,IAAI,iBAAiB,SAAS;AAAA,IAC5D,UAAU,iBAAiB;AAAA,EAC/B,CAAG,GAAG;AACF,UAAM,OAAO;AAAA,EACf;AAEA,SAAO,oBAAoB,SAAS;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AACE,MAAI,iBAAiB,iCAAiC,CAAC,YAAY,UAAU,QAAQ,WAAW,GAAG;AACjG,UAAM,UAAU;AAAA;AAAA,MAEd,gBAAgB,kBAAkB,UAAU,kBAAkB;AAAA;AAAA;AAAA,MAG9D,OAAO,cAAa,EAAG,IAAI,iBAAiB,SAAS,GAAG;AAAA;AAE1D,aAAS,MAAM,IAAI,EAAE,QAAQ,MAAM;AACjC,eAAS,aAAY;AAAA,IACvB,CAAC;AAAA,EACH;AACA,SAAO,CAAC,iBAAiB,sBAAsB,SAAS,YAAY,MAAM,IAAI;AAChF;","x_google_ignoreList":[0]}
+{"version":3,"file":"useBaseQuery.js","sources":["../../../../../../node_modules/@tanstack/react-query/build/modern/useBaseQuery.js"],"sourcesContent":["\"use client\";\n\n// src/useBaseQuery.ts\nimport * as React from \"react\";\nimport { isServer, noop, notifyManager } from \"@tanstack/query-core\";\nimport { useQueryClient } from \"./QueryClientProvider.js\";\nimport { useQueryErrorResetBoundary } from \"./QueryErrorResetBoundary.js\";\nimport {\n  ensurePreventErrorBoundaryRetry,\n  getHasError,\n  useClearResetErrorBoundary\n} from \"./errorBoundaryUtils.js\";\nimport { useIsRestoring } from \"./IsRestoringProvider.js\";\nimport {\n  ensureSuspenseTimers,\n  fetchOptimistic,\n  shouldSuspend,\n  willFetch\n} from \"./suspense.js\";\nfunction useBaseQuery(options, Observer, queryClient) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (typeof options !== \"object\" || Array.isArray(options)) {\n      throw new Error(\n        'Bad argument type. Starting with v5, only the \"Object\" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object'\n      );\n    }\n  }\n  const isRestoring = useIsRestoring();\n  const errorResetBoundary = useQueryErrorResetBoundary();\n  const client = useQueryClient(queryClient);\n  const defaultedOptions = client.defaultQueryOptions(options);\n  client.getDefaultOptions().queries?._experimental_beforeQuery?.(\n    defaultedOptions\n  );\n  const query = client.getQueryCache().get(defaultedOptions.queryHash);\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!defaultedOptions.queryFn) {\n      console.error(\n        `[${defaultedOptions.queryHash}]: No queryFn was passed as an option, and no default queryFn was found. The queryFn parameter is only optional when using a default queryFn. More info here: https://tanstack.com/query/latest/docs/framework/react/guides/default-query-function`\n      );\n    }\n  }\n  defaultedOptions._optimisticResults = isRestoring ? \"isRestoring\" : \"optimistic\";\n  ensureSuspenseTimers(defaultedOptions);\n  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary, query);\n  useClearResetErrorBoundary(errorResetBoundary);\n  const isNewCacheEntry = !client.getQueryCache().get(defaultedOptions.queryHash);\n  const [observer] = React.useState(\n    () => new Observer(\n      client,\n      defaultedOptions\n    )\n  );\n  const result = observer.getOptimisticResult(defaultedOptions);\n  const shouldSubscribe = !isRestoring && options.subscribed !== false;\n  React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        const unsubscribe = shouldSubscribe ? observer.subscribe(notifyManager.batchCalls(onStoreChange)) : noop;\n        observer.updateResult();\n        return unsubscribe;\n      },\n      [observer, shouldSubscribe]\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult()\n  );\n  React.useEffect(() => {\n    observer.setOptions(defaultedOptions);\n  }, [defaultedOptions, observer]);\n  if (shouldSuspend(defaultedOptions, result)) {\n    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary);\n  }\n  if (getHasError({\n    result,\n    errorResetBoundary,\n    throwOnError: defaultedOptions.throwOnError,\n    query,\n    suspense: defaultedOptions.suspense\n  })) {\n    throw result.error;\n  }\n  ;\n  client.getDefaultOptions().queries?._experimental_afterQuery?.(\n    defaultedOptions,\n    result\n  );\n  if (defaultedOptions.experimental_prefetchInRender && !isServer && willFetch(result, isRestoring)) {\n    const promise = isNewCacheEntry ? (\n      // Fetch immediately on render in order to ensure `.promise` is resolved even if the component is unmounted\n      fetchOptimistic(defaultedOptions, observer, errorResetBoundary)\n    ) : (\n      // subscribe to the \"cache promise\" so that we can finalize the currentThenable once data comes in\n      query?.promise\n    );\n    promise?.catch(noop).finally(() => {\n      observer.updateResult();\n    });\n  }\n  return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;\n}\nexport {\n  useBaseQuery\n};\n//# sourceMappingURL=useBaseQuery.js.map"],"names":[],"mappings":";;;;;;;AAGA,MAAA,QAAA,OAAA,OAAA;AAgBA,SAAS,aAAa,SAAS,UAAU,aAAa;AACpD,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,OAAO,YAAY,YAAY,MAAM,QAAQ,OAAO,GAAG;AACzD,YAAM,IAAI;AAAA,QACR;AAAA,MACR;AAAA,IACI;AAAA,EACF;AACA,QAAM,cAAc,eAAc;AAClC,QAAM,qBAAqB,2BAA0B;AACrD,QAAM,SAAS,eAAe,WAAW;AACzC,QAAM,mBAAmB,OAAO,oBAAoB,OAAO;AAC3D,SAAO,oBAAoB,SAAS;AAAA,IAClC;AAAA,EACJ;AACE,QAAM,QAAQ,OAAO,cAAa,EAAG,IAAI,iBAAiB,SAAS;AACnE,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,iBAAiB,SAAS;AAC7B,cAAQ;AAAA,QACN,IAAI,iBAAiB,SAAS;AAAA,MACtC;AAAA,IACI;AAAA,EACF;AACA,mBAAiB,qBAAqB,cAAc,gBAAgB;AACpE,uBAAqB,gBAAgB;AACrC,kCAAgC,kBAAkB,oBAAoB,KAAK;AAC3E,6BAA2B,kBAAkB;AAC7C,QAAM,kBAAkB,CAAC,OAAO,cAAa,EAAG,IAAI,iBAAiB,SAAS;AAC9E,QAAM,CAAC,QAAQ,IAAI,MAAM;AAAA,IACvB,MAAM,IAAI;AAAA,MACR;AAAA,MACA;AAAA,IACN;AAAA,EACA;AACE,QAAM,SAAS,SAAS,oBAAoB,gBAAgB;AAC5D,QAAM,kBAAkB,CAAC,eAAe,QAAQ,eAAe;AAC/D,QAAM;AAAA,IACJ,MAAM;AAAA,MACJ,CAAC,kBAAkB;AACjB,cAAM,cAAc,kBAAkB,SAAS,UAAU,cAAc,WAAW,aAAa,CAAC,IAAI;AACpG,iBAAS,aAAY;AACrB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,UAAU,eAAe;AAAA,IAChC;AAAA,IACI,MAAM,SAAS,iBAAgB;AAAA,IAC/B,MAAM,SAAS,iBAAgB;AAAA,EACnC;AACE,QAAM,UAAU,MAAM;AACpB,aAAS,WAAW,gBAAgB;AAAA,EACtC,GAAG,CAAC,kBAAkB,QAAQ,CAAC;AAC/B,MAAI,cAAc,kBAAkB,MAAM,GAAG;AAC3C,UAAM,gBAAgB,kBAAkB,UAAU,kBAAkB;AAAA,EACtE;AACA,MAAI,YAAY;AAAA,IACd;AAAA,IACA;AAAA,IACA,cAAc,iBAAiB;AAAA,IAC/B;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC/B,CAAG,GAAG;AACF,UAAM,OAAO;AAAA,EACf;AAEA,SAAO,oBAAoB,SAAS;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AACE,MAAI,iBAAiB,iCAAiC,CAAC,YAAY,UAAU,QAAQ,WAAW,GAAG;AACjG,UAAM,UAAU;AAAA;AAAA,MAEd,gBAAgB,kBAAkB,UAAU,kBAAkB;AAAA;AAAA;AAAA,MAG9D,OAAO;AAAA;AAET,aAAS,MAAM,IAAI,EAAE,QAAQ,MAAM;AACjC,eAAS,aAAY;AAAA,IACvB,CAAC;AAAA,EACH;AACA,SAAO,CAAC,iBAAiB,sBAAsB,SAAS,YAAY,MAAM,IAAI;AAChF;","x_google_ignoreList":[0]}

package/dist/types/Plugins.js

@@ -1,8 +1,8 @@
-const INVENTREE_PLUGIN_VERSION = "0.8.2";
-const INVENTREE_REACT_VERSION = "19.1.2";
+const INVENTREE_PLUGIN_VERSION = "0.9.0";
+const INVENTREE_REACT_VERSION = "19.2.4";
 const INVENTREE_REACT_DOM_VERSION = (
   // @ts-ignore
-  "19.1.2"
+  "19.2.4"
 );
 const INVENTREE_MANTINE_VERSION = "8.2.7";
 export {

package/lib/hooks/MonitorBackgroundTask.tsx

@@ -0,0 +1,118 @@
+import { useDocumentVisibility } from '@mantine/hooks';
+import { notifications, showNotification } from '@mantine/notifications';
+import {
+  IconCircleCheck,
+  IconCircleX,
+  IconExclamationCircle
+} from '@tabler/icons-react';
+import { type QueryClient, useQuery } from '@tanstack/react-query';
+import type { AxiosInstance } from 'axios';
+import { useEffect, useState } from 'react';
+import { ApiEndpoints } from '../enums/ApiEndpoints';
+import { apiUrl } from '../functions/Api';
+
+export type MonitorBackgroundTaskProps = {
+  api: AxiosInstance;
+  queryClient?: QueryClient;
+  title?: string;
+  message: string;
+  errorMessage?: string;
+  successMessage?: string;
+  failureMessage?: string;
+  taskId?: string;
+  onSuccess?: () => void;
+  onFailure?: () => void;
+  onComplete?: () => void;
+  onError?: (error: Error) => void;
+};
+
+/**
+ * Hook for monitoring a background task running on the server
+ */
+export default function useMonitorBackgroundTask(
+  props: MonitorBackgroundTaskProps
+) {
+  const visibility = useDocumentVisibility();
+
+  const [tracking, setTracking] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!!props.taskId) {
+      setTracking(true);
+      showNotification({
+        id: `background-task-${props.taskId}`,
+        title: props.title,
+        message: props.message,
+        loading: true,
+        autoClose: false,
+        withCloseButton: false
+      });
+    } else {
+      setTracking(false);
+    }
+  }, [props.taskId]);
+
+  useQuery(
+    {
+      enabled: !!props.taskId && tracking && visibility === 'visible',
+      refetchInterval: 500,
+      queryKey: ['background-task', props.taskId],
+      queryFn: () =>
+        props.api
+          .get(apiUrl(ApiEndpoints.task_overview, props.taskId))
+          .then((response) => {
+            const data = response?.data ?? {};
+
+            if (data.complete) {
+              setTracking(false);
+              props.onComplete?.();
+
+              notifications.update({
+                id: `background-task-${props.taskId}`,
+                title: props.title,
+                loading: false,
+                color: data.success ? 'green' : 'red',
+                message: response.data?.success
+                  ? (props.successMessage ?? props.message)
+                  : (props.failureMessage ?? props.message),
+                icon: response.data?.success ? (
+                  <IconCircleCheck />
+                ) : (
+                  <IconCircleX />
+                ),
+                autoClose: 1000,
+                withCloseButton: true
+              });
+
+              if (data.success) {
+                props.onSuccess?.();
+              } else {
+                props.onFailure?.();
+              }
+            }
+
+            return response;
+          })
+          .catch((error) => {
+            console.error(
+              `Error fetching background task status for task ${props.taskId}:`,
+              error
+            );
+            setTracking(false);
+            props.onError?.(error);
+
+            notifications.update({
+              id: `background-task-${props.taskId}`,
+              title: props.title,
+              loading: false,
+              color: 'red',
+              message: props.errorMessage ?? props.message,
+              icon: <IconExclamationCircle color='red' />,
+              autoClose: 5000,
+              withCloseButton: true
+            });
+          })
+    },
+    props.queryClient
+  );
+}

package/lib/hooks/MonitorDataOutput.tsx

@@ -9,48 +9,44 @@ import { ProgressBar } from '../components/ProgressBar';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { apiUrl } from '../functions/Api';
 
-/**
- * Hook for monitoring a data output process running on the server
- */
-export default function monitorDataOutput({
-  api,
-  queryClient,
-  title,
-  hostname,
-  id
-}: {
+export type MonitorDataOutputProps = {
   api: AxiosInstance;
   queryClient?: QueryClient;
   title: string;
   hostname?: string;
   id?: number;
-}) {
+};
+
+/**
+ * Hook for monitoring a data output process running on the server
+ */
+export default function useMonitorDataOutput(props: MonitorDataOutputProps) {
   const visibility = useDocumentVisibility();
 
   const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
-    if (!!id) {
+    if (!!props.id) {
       setLoading(true);
       showNotification({
-        id: `data-output-${id}`,
-        title: title,
+        id: `data-output-${props.id}`,
+        title: props.title,
         loading: true,
         autoClose: false,
         withCloseButton: false,
         message: <ProgressBar size='lg' value={0} progressLabel />
       });
     } else setLoading(false);
-  }, [id, title]);
+  }, [props.id, props.title]);
 
   useQuery(
     {
-      enabled: !!id && loading && visibility === 'visible',
+      enabled: !!props.id && loading && visibility === 'visible',
       refetchInterval: 500,
-      queryKey: ['data-output', id, title],
+      queryKey: ['data-output', props.id, props.title],
       queryFn: () =>
-        api
-          .get(apiUrl(ApiEndpoints.data_output, id))
+        props.api
+          .get(apiUrl(ApiEndpoints.data_output, props.id))
           .then((response) => {
             const data = response?.data ?? {};
 
@@ -61,21 +57,21 @@ export default function monitorDataOutput({
                 data?.error ?? data?.errors?.error ?? t`Process failed`;
 
               notifications.update({
-                id: `data-output-${id}`,
+                id: `data-output-${props.id}`,
                 loading: false,
                 icon: <IconExclamationCircle />,
                 autoClose: 2500,
-                title: title,
+                title: props.title,
                 message: error,
                 color: 'red'
               });
             } else if (data.complete) {
               setLoading(false);
               notifications.update({
-                id: `data-output-${id}`,
+                id: `data-output-${props.id}`,
                 loading: false,
                 autoClose: 2500,
-                title: title,
+                title: props.title,
                 message: t`Process completed successfully`,
                 color: 'green',
                 icon: <IconCircleCheck />
@@ -83,7 +79,7 @@ export default function monitorDataOutput({
 
               if (data.output) {
                 const url = data.output;
-                const base = hostname ?? window.location.origin;
+                const base = props.hostname ?? window.location.origin;
 
                 const downloadUrl = new URL(url, base);
 
@@ -91,7 +87,7 @@ export default function monitorDataOutput({
               }
             } else {
               notifications.update({
-                id: `data-output-${id}`,
+                id: `data-output-${props.id}`,
                 loading: true,
                 autoClose: false,
                 withCloseButton: false,
@@ -110,19 +106,19 @@ export default function monitorDataOutput({
             return data;
           })
           .catch((error: Error) => {
-            console.error('Error in monitorDataOutput:', error);
+            console.error('Error in useMonitorDataOutput:', error);
             setLoading(false);
             notifications.update({
-              id: `data-output-${id}`,
+              id: `data-output-${props.id}`,
               loading: false,
               autoClose: 2500,
-              title: title,
+              title: props.title,
               message: error.message || t`Process failed`,
               color: 'red'
             });
             return {};
           })
     },
-    queryClient
+    props.queryClient
   );
 }

package/lib/index.ts

@@ -73,4 +73,11 @@ export {
 } from './components/RowActions';
 
 // Shared hooks
-export { default as monitorDataOutput } from './hooks/MonitorDataOutput';
+export {
+  default as useMonitorDataOutput,
+  type MonitorDataOutputProps
+} from './hooks/MonitorDataOutput';
+export {
+  default as useMonitorBackgroundTask,
+  type MonitorBackgroundTaskProps
+} from './hooks/MonitorBackgroundTask';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.8.2",
+    "version": "0.9.0",
     "private": false,
     "type": "module",
     "license": "MIT",
@@ -40,6 +40,7 @@
         "compile": "lingui compile --typescript"
     },
     "dependencies": {
+        "@codecov/vite-plugin": "^1.9.1",
         "@codemirror/autocomplete": "^6.20.1",
         "@codemirror/lang-liquid": "^6.3.2",
         "@codemirror/language": "^6.12.2",
@@ -47,7 +48,7 @@
         "@codemirror/search": "^6.6.0",
         "@codemirror/state": "^6.5.4",
         "@codemirror/theme-one-dark": "^6.1.3",
-        "@codemirror/view": "6.38.2",
+        "@codemirror/view": "6.39.16",
         "@emotion/react": "^11.13.3",
         "@fortawesome/fontawesome-svg-core": "^7.0.0",
         "@fortawesome/free-regular-svg-icons": "^7.0.0",
@@ -72,14 +73,14 @@
         "@mantine/spotlight": "^8.2.7",
         "@mantine/vanilla-extract": "^8.2.7",
         "@messageformat/date-skeleton": "^1.1.0",
-        "@sentry/react": "^10.7.0",
+        "@sentry/react": "^10.43.0",
         "@tabler/icons-react": "^3.17.0",
         "@tanstack/react-query": "^5.56.2",
-        "@uiw/codemirror-theme-vscode": "4.25.1",
+        "@uiw/codemirror-theme-vscode": "4.25.7",
         "@uiw/react-codemirror": "^4.25.7",
         "@uiw/react-split": "^5.9.3",
-        "@vanilla-extract/css": "^1.17.1",
-        "axios": "^1.8.4",
+        "@vanilla-extract/css": "^1.18.0",
+        "axios": "^1.13.6",
         "clsx": "^2.1.1",
         "codemirror": "6.0.2",
         "dayjs": "^1.11.13",
@@ -91,11 +92,11 @@
         "mantine-contextmenu": "^8.2.0",
         "mantine-datatable": "^8.2.0",
         "qrcode": "^1.5.4",
-        "react": "^19.1.2",
-        "react-dom": "^19.1.2",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
         "react-grid-layout": "1.4.4",
         "react-hook-form": "^7.62.0",
-        "react-is": "^19.1.2",
+        "react-is": "^19.2.4",
         "react-router-dom": "^6.26.2",
         "react-select": "^5.9.0",
         "react-simplemde-editor": "^5.2.0",
@@ -105,35 +106,37 @@
         "zustand": "^5.0.8"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.10",
-        "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.27.0",
-        "@babel/runtime": "^7.27.0",
-        "@codecov/vite-plugin": "^1.9.1",
+        "@babel/core": "^7.29.0",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@babel/runtime": "^7.28.6",
         "@lingui/babel-plugin-lingui-macro": "^5.9.2",
         "@lingui/cli": "^5.9.2",
         "@lingui/macro": "^5.9.2",
-        "@playwright/test": "1.56.0",
-        "@types/node": "^24.3.0",
+        "@playwright/test": "^1.58.2",
+        "@types/node": "^25.5.0",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "^19.1.10",
-        "@types/react-dom": "^19.1.7",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
         "@types/react-grid-layout": "^1.3.5",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-window": "^1.8.8",
-        "@vanilla-extract/vite-plugin": "^5.1.1",
-        "@vitejs/plugin-react": "^5.0.2",
+        "@vanilla-extract/vite-plugin": "^5.1.4",
+        "@vitejs/plugin-react": "^5.2.0",
         "babel-plugin-macros": "^3.1.0",
         "nyc": "^18.0.0",
         "otpauth": "^9.4.1",
         "path": "^0.12.7",
-        "rollup": "^4.0.0",
-        "rollup-plugin-license": "^3.5.3",
-        "typescript": "^5.8.2",
+        "rollup": "^4.59.0",
+        "rollup-plugin-license": "^3.7.0",
+        "typescript": "^5.9.3",
         "vite": "7.1.11",
         "vite-plugin-babel-macros": "^1.0.6",
-        "vite-plugin-dts": "^4.5.3",
+        "vite-plugin-dts": "^4.5.4",
         "vite-plugin-externals": "^0.6.2",
-        "vite-plugin-istanbul": "^7.2.1"
+        "vite-plugin-istanbul": "^8.0.0"
+    },
+    "resolutions": {
+        "undici": "^6.24.0"
     }
 }