@gen-epix/ui 1.14.4 → 1.15.0

package/src/hooks/useDeleteMutation/useDeleteMutation.ts

@@ -0,0 +1,92 @@
+import { useMutation } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+
+import { NotificationManager } from '../../classes/managers/NotificationManager';
+import { QueryClientManager } from '../../classes/managers/QueryClientManager';
+import type { GenericData } from '../../models/data';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { NotificationUtil } from '../../utils/NotificationUtil';
+
+
+export type MutationContextDelete<TData> = { previousData?: TData[]; notificationKey?: string };
+
+export type UseDeleteMutationProps<TData> = {
+  readonly resourceQueryKey?: string[];
+  readonly associationQueryKeys?: string[][];
+  readonly queryFn?: (data: TData) => Promise<unknown>;
+  readonly getProgressNotificationMessage: (data: TData) => string | ReactElement;
+  readonly getErrorNotificationMessage?: (data: TData, error: unknown) => string | ReactElement;
+  readonly getSuccessNotificationMessage?: (data: TData, context: MutationContextDelete<TData>) => string | ReactElement;
+  readonly onSuccess?: (item: TData, context: MutationContextDelete<TData>) => Promise<void>;
+  readonly onError?: (error: unknown, item: TData, context: MutationContextDelete<TData>) => Promise<void>;
+};
+
+export const useDeleteMutation = <TData extends GenericData | GenericData[]>({
+  resourceQueryKey,
+  associationQueryKeys,
+  queryFn,
+  onSuccess,
+  onError,
+  getErrorNotificationMessage,
+  getSuccessNotificationMessage,
+  getProgressNotificationMessage,
+}: UseDeleteMutationProps<TData>) => {
+  const queryClient = QueryClientManager.instance.queryClient;
+
+  const deleteMutation = useMutation<unknown, Error, TData, MutationContextDelete<TData>>({
+    mutationFn: async (item) => {
+      return queryFn(item);
+    },
+    onMutate: async (item) => {
+      const notificationKey = NotificationManager.instance.showNotification({
+        message: getProgressNotificationMessage(item),
+        severity: 'info',
+        isLoading: true,
+      });
+      if (resourceQueryKey) {
+        await queryClient.cancelQueries({ queryKey: resourceQueryKey });
+        const previousData = queryClient.getQueryData<TData[]>(resourceQueryKey);
+
+        if (Array.isArray(previousData) && !Array.isArray(item)) {
+          queryClient.setQueryData<GenericData[]>(resourceQueryKey, (oldItems) => {
+            return oldItems.filter(i => i.id !== item.id);
+          });
+          return { previousData, notificationKey };
+        }
+      }
+      return { notificationKey };
+    },
+    onError: async (error, item, context) => {
+      if (resourceQueryKey) {
+        queryClient.setQueryData(resourceQueryKey, (oldItems: TData[]) => {
+          if (!Array.isArray(oldItems)) {
+            return oldItems;
+          }
+          return [...oldItems, item];
+        });
+      }
+      if (associationQueryKeys) {
+        await QueryUtil.invalidateQueryKeys(associationQueryKeys);
+      }
+      if (onError) {
+        await onError(error, item, context);
+      }
+      NotificationManager.instance.fulfillNotification(context.notificationKey, NotificationUtil.wrapErrorNotificationMessage(getErrorNotificationMessage(item, error), error), 'error');
+    },
+    onSuccess: async (_data, item, context) => {
+      if (associationQueryKeys) {
+        await QueryUtil.invalidateQueryKeys(associationQueryKeys);
+      }
+      if (onSuccess) {
+        await onSuccess(item, context);
+      }
+      NotificationManager.instance.fulfillNotification(context.notificationKey, getSuccessNotificationMessage(item, context), 'success');
+    },
+  });
+
+  // Note: must be done in useMemo to avoid render loops (useMutation returns a new object every time)
+  const mutate = useMemo(() => deleteMutation.mutate, [deleteMutation.mutate]);
+  const isMutating = useMemo(() => deleteMutation.isPending, [deleteMutation.isPending]);
+  return useMemo(() => ({ mutate, isMutating }), [isMutating, mutate]);
+};

package/src/hooks/useDimensions/index.ts

@@ -0,0 +1 @@
+export * from './useDimensions';

package/src/hooks/useDimensions/useDimensions.ts

@@ -0,0 +1,82 @@
+import type { RefObject } from 'react';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+
+import { WindowManager } from '../../classes/managers/WindowManager';
+
+
+type Result = {
+  dimensions: Dimensions;
+  isResizing: boolean;
+};
+
+type Dimensions = { width: number; height: number };
+
+export const useDimensions = (ref: RefObject<HTMLElement>, onResizeCallback?: () => void) => {
+  const timeoutHandle = useRef<number>(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const dimensionsRef = useRef<Dimensions>(null);
+
+  const subscribe = useCallback((callback: () => void) => {
+    const current = ref?.current;
+
+    if (!current) {
+      return;
+    }
+
+    const observer = new ResizeObserver((mutations) => {
+      const dimensions: Dimensions = {
+        width: mutations?.[0].contentRect.width,
+        height: mutations?.[0].contentRect.height,
+      };
+
+      if (dimensionsRef.current?.width === dimensions.width && dimensionsRef.current?.height === dimensions.height) {
+        return;
+      }
+
+      dimensionsRef.current = dimensions;
+
+      if (!isResizing) {
+        setIsResizing(true);
+      }
+      if (timeoutHandle.current) {
+        clearTimeout(timeoutHandle.current);
+      }
+      timeoutHandle.current = WindowManager.instance.window.setTimeout(() => {
+        setIsResizing(false);
+        if (onResizeCallback) {
+          onResizeCallback();
+        }
+        callback();
+      }, 0);
+    });
+
+    observer.observe(current, {
+      box: 'content-box',
+    });
+    observer.observe(document.body);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [isResizing, onResizeCallback, ref]);
+
+  const resultString = useSyncExternalStore(
+    subscribe,
+    () => {
+      return JSON.stringify({
+        dimensions: {
+          width: dimensionsRef?.current?.width ?? 0,
+          height: dimensionsRef?.current?.height ?? 0,
+        },
+        isResizing,
+      });
+    },
+  );
+  return useMemo<Result>(() => JSON.parse(resultString) as Result, [resultString]);
+};

package/src/hooks/useEditMutation/index.ts

@@ -0,0 +1 @@
+export * from './useEditMutation';

package/src/hooks/useEditMutation/useEditMutation.ts

@@ -0,0 +1,112 @@
+import { useMutation } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { NotificationManager } from '../../classes/managers/NotificationManager';
+import { QueryClientManager } from '../../classes/managers/QueryClientManager';
+import type { GenericData } from '../../models/data';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { NotificationUtil } from '../../utils/NotificationUtil';
+
+export type MutationContextEdit<TData> = { previousData?: TData[]; notificationKey?: string; item?: TData };
+
+export type UseEditMutationProps<TData, TVariables = TData> = {
+  readonly queryFn?: (variables: TVariables, previousData: TData) => Promise<TData>;
+  readonly resourceQueryKey?: string[];
+  readonly associationQueryKeys?: string[][];
+  readonly getProgressNotificationMessage: (data: TData, variables: TVariables) => string | ReactElement;
+  readonly getErrorNotificationMessage: (data: TData, variables: TVariables, error: unknown) => string | ReactElement;
+  readonly getSuccessNotificationMessage: (data: TData, context: MutationContextEdit<TData>) => string | ReactElement;
+  readonly onSuccess?: (item: TData, variables: TVariables, context: MutationContextEdit<TData>) => Promise<void>;
+  readonly onError?: (error: unknown, variables: TVariables, context: MutationContextEdit<TData>) => Promise<void>;
+  // Optional function to get an intermediate item to be set in the query cache before the mutation is completed.
+  // This is useful for optimistic updates where you want to show a temporary state before the mutation is confirmed.
+  // The function receives the variables and the previous item, and should return the intermediate item.
+  // Only needed if the variables are different from the previous item.
+  readonly getIntermediateItem?: (variables: TVariables, previousItem: TData) => TData;
+};
+
+export const useEditMutation = <TData extends GenericData | GenericData[], TVariables = TData>({
+  queryFn,
+  resourceQueryKey,
+  associationQueryKeys,
+  getErrorNotificationMessage,
+  getSuccessNotificationMessage,
+  getProgressNotificationMessage,
+  onSuccess,
+  onError,
+  getIntermediateItem,
+}: UseEditMutationProps<TData, TVariables>) => {
+  const queryClient = QueryClientManager.instance.queryClient;
+  const previousItem = useRef<TData>(undefined);
+
+  const setPreviousItem = useCallback((item: TData) => {
+    previousItem.current = item;
+  }, []);
+
+  const mutationFn = useCallback(async (variables: TVariables) => {
+    return queryFn(variables, previousItem.current);
+  }, [previousItem, queryFn]);
+
+  const editMutation = useMutation<TData, Error, TVariables, MutationContextEdit<TData>>({
+    mutationFn,
+    onMutate: async (variables) => {
+      const notificationKey = NotificationManager.instance.showNotification({
+        message: getProgressNotificationMessage(previousItem.current, variables),
+        severity: 'info',
+        isLoading: true,
+      });
+      if (resourceQueryKey) {
+        if (!previousItem.current) {
+          throw new Error('previousItem is not set');
+        }
+        await queryClient.cancelQueries({ queryKey: resourceQueryKey });
+        const previousData = queryClient.getQueryData<TData[]>(resourceQueryKey);
+        if (Array.isArray(previousData) && !Array.isArray(variables)) {
+          const intermediateItem = getIntermediateItem ? getIntermediateItem(variables, previousItem.current) : {
+            ...variables,
+            id: (previousItem.current as GenericData).id,
+          } as GenericData;
+          queryClient.setQueryData<GenericData[]>(resourceQueryKey, (oldItems) => {
+            return [...oldItems.filter(x => x.id !== (previousItem.current as GenericData).id), intermediateItem] as GenericData[];
+          });
+          return { previousData, notificationKey, item: previousItem.current };
+        }
+      }
+      return { notificationKey };
+    },
+    onError: async (error, variables, context) => {
+      previousItem.current = undefined;
+      if (resourceQueryKey && Array.isArray(context.previousData)) {
+        queryClient.setQueryData(resourceQueryKey, (oldItems: TData[]) => {
+          if (!Array.isArray(oldItems)) {
+            return oldItems;
+          }
+          return [...oldItems.filter(x => (x as GenericData).id !== (context.item as GenericData).id), context.item];
+        });
+      }
+      await QueryUtil.invalidateQueryKeys(associationQueryKeys);
+      if (onError) {
+        await onError(error, variables, context);
+      }
+      NotificationManager.instance.fulfillNotification(context.notificationKey, NotificationUtil.wrapErrorNotificationMessage(getErrorNotificationMessage(context.item, variables, error), error), 'error');
+    },
+    onSuccess: async (item, variables, context) => {
+      previousItem.current = undefined;
+      await QueryUtil.invalidateQueryKeys(associationQueryKeys);
+      if (onSuccess) {
+        await onSuccess(item, variables, context);
+      }
+      NotificationManager.instance.fulfillNotification(context.notificationKey, getSuccessNotificationMessage(item, context), 'success');
+    },
+  });
+
+  // Note: must be done in useMemo to avoid render loops (useMutation returns a new object every time)
+  const mutate = useMemo(() => editMutation.mutate, [editMutation.mutate]);
+  const isMutating = useMemo(() => editMutation.isPending, [editMutation.isPending]);
+  return useMemo(() => ({ mutate, isMutating, setPreviousItem }), [isMutating, mutate, setPreviousItem]);
+};

package/src/hooks/useInitializeTableStore/index.ts

@@ -0,0 +1 @@
+export * from './useInitializeTableStore';

package/src/hooks/useInitializeTableStore/useInitializeTableStore.ts

@@ -0,0 +1,41 @@
+import {
+  useStore,
+  type StoreApi,
+} from 'zustand';
+import { useEffect } from 'react';
+
+import { DEFAULT_FILTER_GROUP } from '../../classes/abstracts/FilterAbstract';
+import type { TableColumn } from '../../models/table';
+import type { TableStore } from '../../stores/tableStore';
+import { TableUtil } from '../../utils/TableUtil';
+
+export type UseInitializeTableStoreKWArgs<TData> = {
+  readonly store: StoreApi<TableStore<TData>>;
+  readonly columns: TableColumn<TData>[];
+  readonly rows: TData[];
+  readonly createFiltersFromColumns?: boolean;
+};
+
+export const useInitializeTableStore = <TData>({ store, columns, rows, createFiltersFromColumns }: UseInitializeTableStoreKWArgs<TData>) => {
+  const setColumns = useStore(store, (state) => state.setColumns);
+  const setBaseData = useStore(store, (state) => state.setBaseData);
+  const setFilters = useStore(store, (state) => state.setFilters);
+  const initialize = useStore(store, (state) => state.initialize);
+
+  useEffect(() => {
+    if (!columns || !rows) {
+      return;
+    }
+    const abortController = new AbortController();
+    setColumns(columns);
+    setBaseData(rows);
+    if (createFiltersFromColumns) {
+      setFilters(TableUtil.createFiltersFromColumns(columns, rows), [], [DEFAULT_FILTER_GROUP]);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    initialize(abortController.signal);
+    return () => {
+      abortController.abort();
+    };
+  }, [columns, initialize, setColumns, setFilters, setBaseData, createFiltersFromColumns, rows]);
+};

package/src/hooks/useIsFormFieldRequiredFromSchema/index.ts

@@ -0,0 +1 @@
+export * from './useIsFormFieldRequiredFromSchema';

package/src/hooks/useIsFormFieldRequiredFromSchema/useIsFormFieldRequiredFromSchema.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import {
+  set,
+  type FieldValues,
+  type Path,
+  type UseFormGetValues,
+} from 'react-hook-form';
+import type {
+  ObjectSchema,
+  ValidationError,
+} from 'yup';
+
+const useIsFormFieldRequiredFromSchema = <TFormFields extends FieldValues, TName extends Path<TFormFields>>(schema: ObjectSchema<TFormFields, TFormFields>, getFormValues: UseFormGetValues<TFormFields>): (fieldName: TName) => boolean => {
+  return useCallback((fieldName: TName) => {
+    try {
+      const values = structuredClone(getFormValues());
+      set(values, fieldName, undefined);
+
+      schema.validateSyncAt(fieldName as string, values, {
+        abortEarly: true,
+        strict: false,
+      });
+      return false;
+    } catch (error) {
+      return (error as ValidationError)?.type === 'required' || (error as ValidationError)?.type === 'optionality';
+    }
+  }, [getFormValues, schema]);
+};
+
+export {
+  useIsFormFieldRequiredFromSchema,
+};

package/src/hooks/useItemQuery/index.ts

@@ -0,0 +1 @@
+export * from './useItemQuery';

package/src/hooks/useItemQuery/useItemQuery.ts

@@ -0,0 +1,82 @@
+import {
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import type {
+  UseQueryOptions,
+  QueryCacheNotifyEvent,
+} from '@tanstack/react-query';
+
+import { QueryClientManager } from '../../classes/managers/QueryClientManager';
+import type { GenericData } from '../../models/data';
+import type { QUERY_KEY } from '../../models/query';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { useQueryMemo } from '../useQueryMemo';
+
+export type UseItemQueryProps<T extends GenericData> = {
+  readonly baseQueryKey: QUERY_KEY;
+  readonly itemId: string;
+  readonly useQueryOptions: Omit<UseQueryOptions<T>, 'queryKey'>;
+};
+
+const eventTypes: QueryCacheNotifyEvent['type'][] = ['added', 'removed', 'updated'];
+
+export const useItemQuery = <T extends GenericData>({
+  baseQueryKey,
+  itemId,
+  useQueryOptions,
+}: UseItemQueryProps<T>) => {
+  const { queryCache } = QueryClientManager.instance;
+  const [itemFromCache, setItemFromCache] = useState<T>(QueryUtil.getItemFromCache<T>(baseQueryKey, itemId));
+
+  const useQueryResult = useQueryMemo({
+    ...useQueryOptions,
+    queryKey: QueryUtil.getGenericKey(baseQueryKey, itemId),
+    enabled: !itemFromCache && useQueryOptions.enabled,
+  });
+
+  useEffect(() => {
+    const handleQueryCacheEvent = (event: QueryCacheNotifyEvent) => {
+      if (Array.isArray(event.query.queryKey) && event.query.queryKey[0] === baseQueryKey && eventTypes.includes(event.type)) {
+        if (event.query.queryKey.length === 1) {
+          const list = (event.query.state.data as T[]);
+          if (event.type === 'removed') {
+            setItemFromCache(undefined);
+            return;
+          }
+          if (!list) {
+            return;
+          }
+          const newValue = list?.find(item => item.id === itemId);
+          if (JSON.stringify(itemFromCache) !== JSON.stringify(newValue)) {
+            setItemFromCache(newValue);
+          }
+        } else if (event.query.queryKey.length === 2 && (event.query.state.data as T)?.id === itemId) {
+          const newValue = event.query.state.data as T;
+          if (JSON.stringify(itemFromCache) !== JSON.stringify(newValue)) {
+            setItemFromCache(newValue);
+          }
+        }
+      }
+    };
+
+    const removeListener = queryCache.subscribe(handleQueryCacheEvent);
+    return () => {
+      removeListener();
+    };
+  }, [baseQueryKey, itemId, queryCache, itemFromCache]);
+
+
+  const result = useMemo(() => {
+    return {
+      data: itemFromCache || useQueryResult.data,
+      isLoading: itemFromCache ? false : useQueryResult.isLoading,
+      isPending: itemFromCache ? false : useQueryResult.isPending,
+      isFetching: itemFromCache ? false : useQueryResult.isFetching,
+      error: itemFromCache ? false : useQueryResult.error,
+    };
+  }, [itemFromCache, useQueryResult.data, useQueryResult.isLoading, useQueryResult.isPending, useQueryResult.isFetching, useQueryResult.error]);
+
+  return result;
+};

package/src/hooks/useOrganizationCasePolicyNameFactory/index.ts

@@ -0,0 +1 @@
+export * from './useOrganizationCasePolicyNameFactory';

package/src/hooks/useOrganizationCasePolicyNameFactory/useOrganizationCasePolicyNameFactory.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+
+import type {
+  OrganizationAccessCasePolicy,
+  OrganizationShareCasePolicy,
+} from '../../api';
+import { useCaseTypeSetsMapQuery } from '../../dataHooks/useCaseTypeSetsQuery';
+import { useDataCollectionsMapQuery } from '../../dataHooks/useDataCollectionsQuery';
+import { useOrganizationMapQuery } from '../../dataHooks/useOrganizationsQuery';
+import type { UseNameFactory } from '../../models/dataHooks';
+import { DataHookUtil } from '../../utils/DataHookUtil';
+
+export const useOrganizationCasePolicyNameFactory = (): UseNameFactory<OrganizationAccessCasePolicy | OrganizationShareCasePolicy> => {
+  const organizationMapQuery = useOrganizationMapQuery();
+  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
+  const caseTypeSetsMapQuery = useCaseTypeSetsMapQuery();
+
+  return useMemo(() => {
+    const getName = (item: OrganizationAccessCasePolicy | OrganizationShareCasePolicy) => {
+
+      const organization = organizationMapQuery.map.get(item.organization_id);
+      const dataCollection = dataCollectionsMapQuery.map.get(item.data_collection_id)?.name ?? item.data_collection_id;
+      const caseTypeSet = caseTypeSetsMapQuery.map.get(item.case_type_set_id)?.name ?? item.case_type_set_id;
+
+      return `${organization.name} → ${dataCollection} → ${caseTypeSet}`;
+    };
+
+    return DataHookUtil.createUseNameFactoryHook(getName, [caseTypeSetsMapQuery, organizationMapQuery, dataCollectionsMapQuery]);
+
+  }, [caseTypeSetsMapQuery, organizationMapQuery, dataCollectionsMapQuery]);
+};

package/src/hooks/useQueryMemo/index.ts

@@ -0,0 +1 @@
+export * from './useQueryMemo';

package/src/hooks/useQueryMemo/useQueryMemo.ts

@@ -0,0 +1,24 @@
+import type {
+  DefaultError,
+  QueryClient,
+  QueryKey,
+  UseQueryOptions,
+  UseQueryResult,
+} from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+
+export const useQueryMemo = <TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<NoInfer<TData>, TError> => {
+  const query = useQuery(options, queryClient);
+
+  return useMemo(() => {
+    return query;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify({
+    data: query.data,
+    error: query.error,
+    isLoading: query.isLoading,
+    isPending: query.isPending,
+  })]);
+};

package/src/hooks/useScrollbarSize/index.ts

@@ -0,0 +1 @@
+export * from './useScrollbarSize';

package/src/hooks/useScrollbarSize/useScrollbarSize.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { WindowManager } from '../../classes/managers/WindowManager';
+
+
+export const useScrollbarSize = () => {
+  const scrollbarSize = useMemo(() => {
+    const win = WindowManager.instance.window;
+    const div1 = win.document.createElement('div');
+    const div2 = win.document.createElement('div');
+    div1.style.width = '100px';
+    div1.style.overflowX = 'scroll';
+    div2.style.width = '100px';
+    win.document.body.appendChild(div1);
+    win.document.body.appendChild(div2);
+    const size = div1.offsetHeight - div2.offsetHeight;
+    win.document.body.removeChild(div1);
+    win.document.body.removeChild(div2);
+    return size;
+  }, []);
+
+  return scrollbarSize;
+};

package/src/hooks/useSubscribable/index.ts

@@ -0,0 +1 @@
+export * from './useSubscribable';

package/src/hooks/useSubscribable/useSubscribable.ts

@@ -0,0 +1,30 @@
+import {
+  useEffect,
+  useState,
+} from 'react';
+
+import type { SubscribableAbstract } from '../../classes/abstracts/SubscribableAbstract';
+
+type UseSubscribableKwArgs<TSubjectData> = {
+  readonly select?: (data: TSubjectData) => TSubjectData;
+  readonly callback?: (data: TSubjectData, prevData: TSubjectData) => void;
+};
+
+export const useSubscribable = <TSubjectData>(subscribable: SubscribableAbstract<TSubjectData>, kwArgs: UseSubscribableKwArgs<TSubjectData> = {}) => {
+  const { select, callback } = kwArgs;
+
+  const [data, setData] = useState<TSubjectData>(subscribable.data);
+  useEffect(() => {
+    const unsubscribe = subscribable.subscribe((x, prevX) => {
+      const newData = select ? select(x) : x;
+      setData(newData);
+      if (callback) {
+        callback(newData, prevX);
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [subscribable, select, callback]);
+  return data;
+};

package/src/hooks/useUpdateBreadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './useUpdateBreadcrumb';

package/src/hooks/useUpdateBreadcrumb/useUpdateBreadcrumb.ts

@@ -0,0 +1,21 @@
+import {
+  useCallback,
+  useEffect,
+} from 'react';
+
+import { BreadcrumbManager } from '../../classes/managers/BreadcrumbManager';
+
+
+export const useUpdateBreadcrumb = (position: string) => {
+  const update = useCallback((title: string) => {
+    BreadcrumbManager.instance.update(position, title);
+  }, [position]);
+
+  useEffect(() => {
+    return () => {
+      BreadcrumbManager.instance.remove(position);
+    };
+  }, [position]);
+
+  return update;
+};

package/src/hooks/useUpdateDocumentTitle/index.ts

@@ -0,0 +1 @@
+export * from './useUpdateDocumentTitle';

package/src/hooks/useUpdateDocumentTitle/useUpdateDocumentTitle.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+import { ConfigManager } from '../../classes/managers/ConfigManager';
+
+
+export const useUpdateDocumentTitle = (title: string) => {
+  useEffect(() => {
+    document.title = `${ConfigManager.instance.config.applicationName} - ${title}`;
+  }, [title]);
+};

package/src/hooks/useUserCasePolicyNameFactory/index.ts

@@ -0,0 +1 @@
+export * from './useUserCasePolicyNameFactory';

package/src/hooks/useUserCasePolicyNameFactory/useUserCasePolicyNameFactory.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type {
+  UserAccessCasePolicy,
+  UserShareCasePolicy,
+} from '../../api';
+import { useCaseTypeSetsMapQuery } from '../../dataHooks/useCaseTypeSetsQuery';
+import { useDataCollectionsMapQuery } from '../../dataHooks/useDataCollectionsQuery';
+import { useUsersMapQuery } from '../../dataHooks/useUsersQuery';
+import type { UseNameFactory } from '../../models/dataHooks';
+import { DataHookUtil } from '../../utils/DataHookUtil';
+import { DataUtil } from '../../utils/DataUtil';
+
+export const useUserCasePolicyNameFactory = (): UseNameFactory<UserAccessCasePolicy | UserShareCasePolicy> => {
+  const { t } = useTranslation();
+
+  const usersMapQuery = useUsersMapQuery();
+  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
+  const caseTypeSetsMapQuery = useCaseTypeSetsMapQuery();
+
+  return useMemo(() => {
+    const getName = (item: UserAccessCasePolicy | UserShareCasePolicy) => {
+
+      const user = usersMapQuery.map.get(item.user_id);
+      const dataCollection = dataCollectionsMapQuery.map.get(item.data_collection_id)?.name ?? item.data_collection_id;
+      const caseTypeSet = caseTypeSetsMapQuery.map.get(item.case_type_set_id)?.name ?? item.case_type_set_id;
+
+      const userName = DataUtil.getUserDisplayValue(user, t);
+
+      return `${userName} → ${dataCollection} → ${caseTypeSet}`;
+    };
+
+    return DataHookUtil.createUseNameFactoryHook(getName, [caseTypeSetsMapQuery, usersMapQuery, dataCollectionsMapQuery]);
+
+  }, [caseTypeSetsMapQuery, usersMapQuery, dataCollectionsMapQuery, t]);
+};