@openmrs/esm-react-utils 5.3.3-pre.1237 → 5.3.3-pre.1247

package/src/useConfig.ts

@@ -1,5 +1,5 @@
 /** @module @category Config */
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from 'react';
 import {
   getConfigStore,
   getExtensionsConfigStore,
@@ -7,10 +7,10 @@ import {
   ConfigObject,
   ExtensionsConfigStore,
   getExtensionConfigFromStore,
-} from "@openmrs/esm-config";
-import type { StoreApi } from "zustand";
-import isEqual from "lodash-es/isEqual";
-import { ComponentContext, ExtensionData } from "./ComponentContext";
+} from '@openmrs/esm-config';
+import type { StoreApi } from 'zustand';
+import isEqual from 'lodash-es/isEqual';
+import { ComponentContext, ExtensionData } from './ComponentContext';
 
 const promises: Record<string, Promise<ConfigObject>> = {};
 const errorMessage = `No ComponentContext has been provided. This should come from "openmrsComponentDecorator".
@@ -28,18 +28,11 @@ function readInitialConfig(store: StoreApi<ConfigStore>) {
   };
 }
 
-function readInitialExtensionConfig(
-  store: StoreApi<ExtensionsConfigStore>,
-  extension: ExtensionData | undefined
-) {
+function readInitialExtensionConfig(store: StoreApi<ExtensionsConfigStore>, extension: ExtensionData | undefined) {
   if (extension) {
     return () => {
       const state = store.getState();
-      const extConfig = getExtensionConfigFromStore(
-        state,
-        extension.extensionSlotName,
-        extension.extensionId
-      );
+      const extConfig = getExtensionConfigFromStore(state, extension.extensionSlotName, extension.extensionId);
       if (extConfig.loaded && extConfig.config) {
         return extConfig.config;
       }
@@ -59,17 +52,10 @@ function createConfigPromise(store: StoreApi<ConfigStore>) {
   });
 }
 
-function createExtensionConfigPromise(
-  store: StoreApi<ExtensionsConfigStore>,
-  extension: ExtensionData
-) {
+function createExtensionConfigPromise(store: StoreApi<ExtensionsConfigStore>, extension: ExtensionData) {
   return new Promise<ConfigObject>((resolve) => {
     const unsubscribe = store.subscribe((state) => {
-      const extConfig = getExtensionConfigFromStore(
-        state,
-        extension.extensionSlotName,
-        extension.extensionId
-      );
+      const extConfig = getExtensionConfigFromStore(state, extension.extensionSlotName, extension.extensionId);
       if (extConfig.loaded && extConfig.config) {
         resolve(extConfig.config);
         unsubscribe();
@@ -92,27 +78,14 @@ function useConfigStore(store: StoreApi<ConfigStore>) {
   return state;
 }
 
-function useExtensionConfigStore(
-  store: StoreApi<ExtensionsConfigStore>,
-  extension: ExtensionData | undefined
-) {
-  const [config, setConfig] = useState<ConfigObject | null>(
-    readInitialExtensionConfig(store, extension)
-  );
+function useExtensionConfigStore(store: StoreApi<ExtensionsConfigStore>, extension: ExtensionData | undefined) {
+  const [config, setConfig] = useState<ConfigObject | null>(readInitialExtensionConfig(store, extension));
 
   useEffect(() => {
     if (extension) {
       return store.subscribe((state) => {
-        const extConfig = getExtensionConfigFromStore(
-          state,
-          extension.extensionSlotName,
-          extension.extensionId
-        );
-        if (
-          extConfig.loaded &&
-          extConfig.config &&
-          !isEqual(extConfig.config, config)
-        ) {
+        const extConfig = getExtensionConfigFromStore(state, extension.extensionSlotName, extension.extensionId);
+        if (extConfig.loaded && extConfig.config && !isEqual(extConfig.config, config)) {
           setConfig(extConfig.config);
         }
       });
@@ -172,8 +145,7 @@ export function useConfig<T = Record<string, any>>(options?: UseConfigOptions) {
   // This hook uses the config of the MF defining the component.
   // If the component is used in an extension slot then the slot
   // may override (part of) its configuration.
-  const { moduleName: contextModuleName, extension } =
-    useContext(ComponentContext);
+  const { moduleName: contextModuleName, extension } = useContext(ComponentContext);
   const moduleName = options?.externalModuleName ?? contextModuleName;
 
   if (!moduleName && !extension) {
@@ -187,7 +159,7 @@ export function useConfig<T = Record<string, any>>(options?: UseConfigOptions) {
       options?.externalModuleName && moduleName === options.externalModuleName
         ? { ...normalConfig }
         : { ...normalConfig, ...extensionConfig },
-    [moduleName, options?.externalModuleName, normalConfig, extensionConfig]
+    [moduleName, options?.externalModuleName, normalConfig, extensionConfig],
   );
 
   return config as T;

package/src/useConnectedExtensions.ts

@@ -1,22 +1,17 @@
 /** @module @category Extension */
-import { useMemo } from "react";
-import {
-  ConnectedExtension,
-  getConnectedExtensions,
-} from "@openmrs/esm-extensions";
-import { useConnectivity } from "./useConnectivity";
-import { useAssignedExtensions } from "./useAssignedExtensions";
-import { useStore } from "./useStore";
-import { featureFlagsStore } from "@openmrs/esm-feature-flags";
+import { useMemo } from 'react';
+import { ConnectedExtension, getConnectedExtensions } from '@openmrs/esm-extensions';
+import { useConnectivity } from './useConnectivity';
+import { useAssignedExtensions } from './useAssignedExtensions';
+import { useStore } from './useStore';
+import { featureFlagsStore } from '@openmrs/esm-feature-flags';
 
 /**
  * Gets the assigned extension for a given extension slot name.
  * Considers if offline or online, and what feature flags are enabled.
  * @param slotName The name of the slot to get the assigned extensions for.
  */
-export function useConnectedExtensions(
-  slotName: string
-): Array<ConnectedExtension> {
+export function useConnectedExtensions(slotName: string): Array<ConnectedExtension> {
   const online = useConnectivity();
   const assignedExtensions = useAssignedExtensions(slotName);
   const featureFlagStore = useStore(featureFlagsStore);
@@ -28,11 +23,7 @@ export function useConnectedExtensions(
   }, [featureFlagStore.flags]);
 
   const connectedExtensions = useMemo(() => {
-    return getConnectedExtensions(
-      assignedExtensions,
-      online,
-      enabledFeatureFlags
-    );
+    return getConnectedExtensions(assignedExtensions, online, enabledFeatureFlags);
   }, [assignedExtensions, online, enabledFeatureFlags]);
 
   return connectedExtensions;

package/src/useConnectivity.ts

@@ -1,14 +1,11 @@
 /** @module @category Offline */
-import { subscribeConnectivityChanged } from "@openmrs/esm-globals";
-import { useEffect, useState } from "react";
+import { subscribeConnectivityChanged } from '@openmrs/esm-globals';
+import { useEffect, useState } from 'react';
 
 export function useConnectivity() {
   let [isOnline, setIsOnline] = useState(window.navigator.onLine);
 
-  useEffect(
-    () => subscribeConnectivityChanged(({ online }) => setIsOnline(online)),
-    []
-  );
+  useEffect(() => subscribeConnectivityChanged(({ online }) => setIsOnline(online)), []);
 
   return isOnline;
 }

package/src/useDebounce.ts

@@ -1,5 +1,5 @@
 /** @module @category Utility */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
 /**
  * This hook debounces a state variable. That state variable can then be used as the

package/src/useExtensionInternalStore.ts

@@ -1,12 +1,7 @@
-import {
-  ExtensionInternalStore,
-  getExtensionInternalStore,
-} from "@openmrs/esm-extensions";
-import { createUseStore } from "./useStore";
+import { ExtensionInternalStore, getExtensionInternalStore } from '@openmrs/esm-extensions';
+import { createUseStore } from './useStore';
 
 /** @internal
  * @deprecated Use `useStore(getExtensionInternalStore())`
  */
-export const useExtensionInternalStore = createUseStore<ExtensionInternalStore>(
-  getExtensionInternalStore()
-);
+export const useExtensionInternalStore = createUseStore<ExtensionInternalStore>(getExtensionInternalStore());

package/src/useExtensionSlot.ts

@@ -1,16 +1,14 @@
-import { useContext, useEffect } from "react";
-import { registerExtensionSlot } from "@openmrs/esm-extensions";
-import { ComponentContext } from "./ComponentContext";
-import { useConnectedExtensions } from "./useConnectedExtensions";
+import { useContext, useEffect } from 'react';
+import { registerExtensionSlot } from '@openmrs/esm-extensions';
+import { ComponentContext } from './ComponentContext';
+import { useConnectedExtensions } from './useConnectedExtensions';
 
 /** @internal */
 export function useExtensionSlot(slotName: string) {
   const { moduleName } = useContext(ComponentContext);
 
   if (!moduleName) {
-    throw Error(
-      "ComponentContext has not been provided. This should come from @openmrs/esm-react-utils."
-    );
+    throw Error('ComponentContext has not been provided. This should come from @openmrs/esm-react-utils.');
   }
 
   useEffect(() => {

package/src/useExtensionSlotMeta.ts

@@ -1,20 +1,14 @@
 /** @module @category Extension */
-import { ExtensionMeta } from "@openmrs/esm-extensions";
-import { useMemo } from "react";
-import { useConnectedExtensions } from "./useConnectedExtensions";
+import { ExtensionMeta } from '@openmrs/esm-extensions';
+import { useMemo } from 'react';
+import { useConnectedExtensions } from './useConnectedExtensions';
 
 /**
  * Extract meta data from all extension for a given extension slot.
  * @param extensionSlotName
  */
-export function useExtensionSlotMeta<T = ExtensionMeta>(
-  extensionSlotName: string
-) {
+export function useExtensionSlotMeta<T = ExtensionMeta>(extensionSlotName: string) {
   const extensions = useConnectedExtensions(extensionSlotName);
 
-  return useMemo(
-    () =>
-      Object.fromEntries(extensions.map((ext) => [ext.name, ext.meta as T])),
-    [extensions]
-  );
+  return useMemo(() => Object.fromEntries(extensions.map((ext) => [ext.name, ext.meta as T])), [extensions]);
 }

package/src/useExtensionStore.ts

@@ -1,7 +1,5 @@
 /** @module @category Extension */
-import { ExtensionStore, getExtensionStore } from "@openmrs/esm-extensions";
-import { createUseStore } from "./useStore";
+import { ExtensionStore, getExtensionStore } from '@openmrs/esm-extensions';
+import { createUseStore } from './useStore';
 
-export const useExtensionStore = createUseStore<ExtensionStore>(
-  getExtensionStore()
-);
+export const useExtensionStore = createUseStore<ExtensionStore>(getExtensionStore());

package/src/useFeatureFlag.ts

@@ -1,7 +1,7 @@
 /** @module @category Feature Flags */
-import { useEffect } from "react";
-import { useStore } from "./useStore";
-import { featureFlagsStore } from "@openmrs/esm-feature-flags";
+import { useEffect } from 'react';
+import { useStore } from './useStore';
+import { featureFlagsStore } from '@openmrs/esm-feature-flags';
 
 /** Use this function to tell whether a feature flag is toggled on or off.
  *
@@ -22,7 +22,7 @@ export function useFeatureFlag(flagName: string) {
   useEffect(() => {
     if (!flags[flagName]) {
       console.error(
-        `useFeatureFlag: Attempted to get value of non-existent flag "${flagName}". Did you forget to call registerFeatureFlag?`
+        `useFeatureFlag: Attempted to get value of non-existent flag "${flagName}". Did you forget to call registerFeatureFlag?`,
       );
     }
   }, [flags[flagName]]);

package/src/useForceUpdate.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback } from 'react';
 
 export function useForceUpdate() {
   const [, setTick] = useState(0);

package/src/useLayoutType.ts

@@ -1,21 +1,21 @@
 /** @module @category UI */
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
-export type LayoutType = "phone" | "tablet" | "small-desktop" | "large-desktop";
+export type LayoutType = 'phone' | 'tablet' | 'small-desktop' | 'large-desktop';
 
 function getLayout() {
-  let layout: LayoutType = "tablet";
+  let layout: LayoutType = 'tablet';
 
   document.body.classList.forEach((cls) => {
     switch (cls) {
-      case "omrs-breakpoint-lt-tablet":
-        layout = "phone";
+      case 'omrs-breakpoint-lt-tablet':
+        layout = 'phone';
         break;
-      case "omrs-breakpoint-gt-small-desktop":
-        layout = "large-desktop";
+      case 'omrs-breakpoint-gt-small-desktop':
+        layout = 'large-desktop';
         break;
-      case "omrs-breakpoint-gt-tablet":
-        layout = "small-desktop";
+      case 'omrs-breakpoint-gt-tablet':
+        layout = 'small-desktop';
         break;
     }
   });
@@ -30,12 +30,11 @@ export function useLayoutType() {
     const handler = () => {
       setType(getLayout());
     };
-    window.addEventListener("resize", handler);
-    return () => window.removeEventListener("resize", handler);
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
   }, []);
 
   return type;
 }
 
-export const isDesktop = (layout: LayoutType) =>
-  layout === "small-desktop" || layout === "large-desktop";
+export const isDesktop = (layout: LayoutType) => layout === 'small-desktop' || layout === 'large-desktop';

package/src/useLocations.tsx

@@ -1,6 +1,6 @@
 /** @module @category API */
-import { getLocations, Location } from "@openmrs/esm-api";
-import { useState, useEffect } from "react";
+import { getLocations, Location } from '@openmrs/esm-api';
+import { useState, useEffect } from 'react';
 
 export function useLocations() {
   const [locations, setLocations] = useState<Array<Location>>([]);
@@ -12,7 +12,7 @@ export function useLocations() {
       },
       (error) => {
         console.error(error);
-      }
+      },
     );
     return () => locationSub.unsubscribe();
   }, []);

package/src/useOnClickOutside.test.tsx

@@ -1,12 +1,12 @@
-import React, { PropsWithChildren } from "react";
-import { render, fireEvent } from "@testing-library/react";
-import { useOnClickOutside } from "./useOnClickOutside";
+import React, { PropsWithChildren } from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useOnClickOutside } from './useOnClickOutside';
 
-describe("useOnClickOutside", () => {
+describe('useOnClickOutside', () => {
   const handler: (e: Event) => void = jest.fn();
   afterEach(() => (handler as jest.Mock).mockClear());
 
-  it("should call the handler when clicking outside", () => {
+  it('should call the handler when clicking outside', () => {
     // setup
     const Component: React.FC<PropsWithChildren> = ({ children }) => {
       const ref = useOnClickOutside<HTMLDivElement>(handler);
@@ -21,7 +21,7 @@ describe("useOnClickOutside", () => {
     expect(handler).toHaveBeenCalledTimes(1);
   });
 
-  it("should not call the handler when clicking on the element", () => {
+  it('should not call the handler when clicking on the element', () => {
     // setup
     const Component: React.FC<PropsWithChildren> = ({ children }) => {
       const ref = useOnClickOutside<HTMLDivElement>(handler);
@@ -31,7 +31,7 @@ describe("useOnClickOutside", () => {
     render(
       <Component>
         <div ref={mutableRef}></div>
-      </Component>
+      </Component>,
     );
 
     // act
@@ -43,19 +43,19 @@ describe("useOnClickOutside", () => {
     expect(handler).not.toHaveBeenCalled();
   });
 
-  it("should unregister the event listener when unmounted", () => {
+  it('should unregister the event listener when unmounted', () => {
     // setup
     const Component: React.FC<PropsWithChildren> = ({ children }) => {
       const ref = useOnClickOutside<HTMLDivElement>(handler);
       return <div ref={ref}>{children}</div>;
     };
     const ref = render(<Component />);
-    const spy = jest.spyOn(window, "removeEventListener");
+    const spy = jest.spyOn(window, 'removeEventListener');
 
     // act
     ref.unmount();
 
     // verify
-    expect(spy).toHaveBeenCalledWith("click", expect.any(Function));
+    expect(spy).toHaveBeenCalledWith('click', expect.any(Function));
   });
 });

package/src/useOnClickOutside.ts

@@ -1,10 +1,7 @@
 /** @module @category UI */
-import { useRef, useEffect } from "react";
+import { useRef, useEffect } from 'react';
 
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  handler: (event: Event) => void,
-  active = true
-) {
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(handler: (event: Event) => void, active = true) {
   const ref = useRef<T>(null);
 
   useEffect(() => {

package/src/useOpenmrsSWR.ts

@@ -1,8 +1,8 @@
 /** @module @category Utility */
-import { useCallback, useMemo } from "react";
-import useSWR, { SWRConfiguration } from "swr";
-import { type FetchConfig, openmrsFetch } from "@openmrs/esm-api";
-import useAbortController from "./useAbortController";
+import { useCallback, useMemo } from 'react';
+import useSWR, { SWRConfiguration } from 'swr';
+import { type FetchConfig, openmrsFetch } from '@openmrs/esm-api';
+import useAbortController from './useAbortController';
 
 export type ArgumentsTuple = [any, ...unknown[]];
 export type Key = string | ArgumentsTuple | undefined | null;
@@ -15,15 +15,15 @@ export type UseOpenmrsSWROptions = {
 
 function getUrl(key: Key, url?: string | ((key: Key) => string)): string {
   if (url) {
-    return typeof url === "function" ? url(key) : url;
+    return typeof url === 'function' ? url(key) : url;
   }
 
-  if (typeof key === "string") {
+  if (typeof key === 'string') {
     return key;
   }
 
   throw new Error(
-    `When using useOpenmrsSWR with a key that is not a string, you must provide a url() function that converts the key to a valid url. The key for this hook is ${key}.`
+    `When using useOpenmrsSWR with a key that is not a string, you must provide a url() function that converts the key to a valid url. The key for this hook is ${key}.`,
   );
 }
 
@@ -71,7 +71,7 @@ export function useOpenmrsSWR(key: Key, options: UseOpenmrsSWROptions = {}) {
   const ac = useAbortController();
   const abortSignal = useMemo<AbortSignal>(
     () => fetchInit?.signal ?? abortController?.signal ?? ac.signal,
-    [abortController?.signal, fetchInit?.signal, ac.signal]
+    [abortController?.signal, fetchInit?.signal, ac.signal],
   );
 
   const fetcher = useCallback(
@@ -79,7 +79,7 @@ export function useOpenmrsSWR(key: Key, options: UseOpenmrsSWROptions = {}) {
       const url_ = getUrl(key, url);
       return openmrsFetch(url_, { ...fetchInit, signal: abortSignal });
     },
-    [abortSignal, fetchInit, url]
+    [abortSignal, fetchInit, url],
   );
 
   return useSWR(key, fetcher, swrConfig);

package/src/usePagination.ts

@@ -1,19 +1,16 @@
 /** @module @category UI */
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from 'react';
 
 const defaultResultsPerPage = 10;
 
-export function usePagination<T>(
-  data: Array<T> = [],
-  resultsPerPage = defaultResultsPerPage
-) {
+export function usePagination<T>(data: Array<T> = [], resultsPerPage = defaultResultsPerPage) {
   const [page, setPage] = useState(1);
   const totalPages = useMemo(
     () =>
-      typeof resultsPerPage === "number" && resultsPerPage > 0
+      typeof resultsPerPage === 'number' && resultsPerPage > 0
         ? Math.max(1, Math.ceil(data.length / resultsPerPage))
         : 1,
-    [data.length, resultsPerPage]
+    [data.length, resultsPerPage],
   );
 
   const results = useMemo(() => {
@@ -26,7 +23,7 @@ export function usePagination<T>(
     (page: number) => {
       setPage(Math.max(1, Math.min(totalPages, page)));
     },
-    [setPage, totalPages]
+    [setPage, totalPages],
   );
   const goToNext = useCallback(() => {
     if (page < totalPages) {
@@ -52,16 +49,7 @@ export function usePagination<T>(
       goToNext,
       goToPrevious,
     }),
-    [
-      results,
-      totalPages,
-      data.length,
-      resultsPerPage,
-      page,
-      goTo,
-      goToNext,
-      goToPrevious,
-    ]
+    [results, totalPages, data.length, resultsPerPage, page, goTo, goToNext, goToPrevious],
   );
 
   return memoisedPaginatedData;

package/src/usePatient.ts

@@ -1,6 +1,6 @@
 /** @module @category API */
-import { useEffect, useReducer } from "react";
-import { fetchCurrentPatient, PatientUuid } from "@openmrs/esm-api";
+import { useEffect, useReducer } from 'react';
+import { fetchCurrentPatient, PatientUuid } from '@openmrs/esm-api';
 
 export type NullablePatient = fhir.Patient | null;
 
@@ -30,9 +30,9 @@ interface PatientLoadError {
 type Action = LoadPatient | NewPatient | PatientLoadError;
 
 enum ActionTypes {
-  loadPatient = "loadPatient",
-  newPatient = "newPatient",
-  loadError = "patientLoadError",
+  loadPatient = 'loadPatient',
+  newPatient = 'newPatient',
+  loadError = 'patientLoadError',
 }
 
 const initialState: CurrentPatientState = {
@@ -48,10 +48,7 @@ function getPatientUuidFromUrl(): PatientUuid {
   return match && match[1];
 }
 
-function reducer(
-  state: CurrentPatientState,
-  action: Action
-): CurrentPatientState {
+function reducer(state: CurrentPatientState, action: Action): CurrentPatientState {
   switch (action.type) {
     case ActionTypes.loadPatient:
       return {
@@ -124,7 +121,7 @@ export function usePatient(patientUuid?: string) {
           dispatch({
             err,
             type: ActionTypes.loadError,
-          })
+          }),
       );
     }
     return () => {
@@ -142,9 +139,8 @@ export function usePatient(patientUuid?: string) {
         });
       }
     };
-    window.addEventListener("single-spa:routing-event", handleRouteUpdate);
-    return () =>
-      window.removeEventListener("single-spa:routing-event", handleRouteUpdate);
+    window.addEventListener('single-spa:routing-event', handleRouteUpdate);
+    return () => window.removeEventListener('single-spa:routing-event', handleRouteUpdate);
   }, [state.patientUuid]);
 
   return {