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

package/src/public.ts

@@ -1,27 +1,27 @@
-export { type ExtensionData } from "./ComponentContext";
-export * from "./ConfigurableLink";
-export * from "./Extension";
-export * from "./ExtensionSlot";
-export * from "./UserHasAccess";
-export * from "./getLifecycle";
-export * from "./useAbortController";
-export * from "./useAssignedExtensions";
-export * from "./useAssignedExtensionIds";
-export * from "./useBodyScrollLock";
-export * from "./useConfig";
-export * from "./useConnectedExtensions";
-export * from "./useConnectivity";
-export * from "./useDebounce";
-export * from "./useExtensionSlotMeta";
-export * from "./useExtensionStore";
-export * from "./useFeatureFlag";
-export * from "./useLayoutType";
-export * from "./useLocations";
-export * from "./useOnClickOutside";
-export * from "./useOpenmrsSWR";
-export * from "./usePatient";
-export { useSession } from "./useSession";
-export * from "./useStore";
-export * from "./useVisit";
-export * from "./useVisitTypes";
-export * from "./usePagination";
+export { type ExtensionData } from './ComponentContext';
+export * from './ConfigurableLink';
+export * from './Extension';
+export * from './ExtensionSlot';
+export * from './UserHasAccess';
+export * from './getLifecycle';
+export * from './useAbortController';
+export * from './useAssignedExtensions';
+export * from './useAssignedExtensionIds';
+export * from './useBodyScrollLock';
+export * from './useConfig';
+export * from './useConnectedExtensions';
+export * from './useConnectivity';
+export * from './useDebounce';
+export * from './useExtensionSlotMeta';
+export * from './useExtensionStore';
+export * from './useFeatureFlag';
+export * from './useLayoutType';
+export * from './useLocations';
+export * from './useOnClickOutside';
+export * from './useOpenmrsSWR';
+export * from './usePatient';
+export { useSession } from './useSession';
+export * from './useStore';
+export * from './useVisit';
+export * from './useVisitTypes';
+export * from './usePagination';

package/src/setup-tests.js

@@ -1,5 +1,5 @@
-import "@testing-library/jest-dom/extend-expect";
+import '@testing-library/jest-dom/extend-expect';
 
-window.openmrsBase = "/openmrs";
-window.spaBase = "/spa";
-window.getOpenmrsSpaBase = () => "/openmrs/spa/";
+window.openmrsBase = '/openmrs';
+window.spaBase = '/spa';
+window.getOpenmrsSpaBase = () => '/openmrs/spa/';

package/src/useAbortController.test.tsx

@@ -1,16 +1,16 @@
-import { renderHook, cleanup } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import useAbortController from "./useAbortController";
+import { renderHook, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import useAbortController from './useAbortController';
 
-describe("useAbortController", () => {
+describe('useAbortController', () => {
   afterEach(cleanup);
 
-  it("returns an AbortController", () => {
+  it('returns an AbortController', () => {
     const { result } = renderHook(() => useAbortController());
     expect(result.current).not.toBeNull();
   });
 
-  it("returns a consistent AbortController across re-renders", () => {
+  it('returns a consistent AbortController across re-renders', () => {
     const { result, rerender } = renderHook(() => useAbortController());
     const firstAc = result.current;
 
@@ -19,7 +19,7 @@ describe("useAbortController", () => {
     expect(result.current).toBe(firstAc);
   });
 
-  it("returns a new AbortController after the previous controller has been aborted", () => {
+  it('returns a new AbortController after the previous controller has been aborted', () => {
     const { result, rerender } = renderHook(() => useAbortController());
     const firstAc = result.current;
 
@@ -30,7 +30,7 @@ describe("useAbortController", () => {
     expect(result.current).not.toBe(firstAc);
   });
 
-  it("aborts the AbortController when the component is unmounted", () => {
+  it('aborts the AbortController when the component is unmounted', () => {
     const { result, unmount } = renderHook(() => useAbortController());
 
     expect(result.current.signal.aborted).toBe(false);

package/src/useAbortController.ts

@@ -1,5 +1,5 @@
 /** @module @category Utility */
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 /**
  * @beta

package/src/useAssignedExtensionIds.ts

@@ -1,7 +1,7 @@
 /** @module @category Extension */
-import { useEffect, useState } from "react";
-import { getExtensionStore } from "@openmrs/esm-extensions";
-import isEqual from "lodash-es/isEqual";
+import { useEffect, useState } from 'react';
+import { getExtensionStore } from '@openmrs/esm-extensions';
+import isEqual from 'lodash-es/isEqual';
 
 /**
  * Gets the assigned extension ids for a given extension slot name.
@@ -15,8 +15,7 @@ export function useAssignedExtensionIds(slotName: string) {
 
   useEffect(() => {
     return getExtensionStore().subscribe((state) => {
-      const newIds =
-        state.slots[slotName]?.assignedExtensions.map((e) => e.id) ?? [];
+      const newIds = state.slots[slotName]?.assignedExtensions.map((e) => e.id) ?? [];
       if (!isEqual(newIds, ids)) {
         setIds(newIds);
       }

package/src/useAssignedExtensions.ts

@@ -1,11 +1,7 @@
 /** @module @category Extension */
-import { useEffect, useState } from "react";
-import {
-  AssignedExtension,
-  ExtensionStore,
-  getExtensionStore,
-} from "@openmrs/esm-extensions";
-import isEqual from "lodash-es/isEqual";
+import { useEffect, useState } from 'react';
+import { AssignedExtension, ExtensionStore, getExtensionStore } from '@openmrs/esm-extensions';
+import isEqual from 'lodash-es/isEqual';
 
 /**
  * Gets the assigned extensions for a given extension slot name.

package/src/useBodyScrollLock.ts

@@ -1,11 +1,11 @@
 /** @module @category UI */
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
 export function useBodyScrollLock(active: boolean) {
   useEffect(() => {
     if (active) {
       const original = window.getComputedStyle(document.body).overflow;
-      document.body.style.overflow = "hidden";
+      document.body.style.overflow = 'hidden';
       return () => {
         document.body.style.overflow = original;
       };

package/src/useConfig.test.tsx

@@ -1,18 +1,17 @@
-import React from "react";
-import { render, cleanup, screen, waitFor, act } from "@testing-library/react";
+import React from 'react';
+import { render, cleanup, screen, waitFor, act } from '@testing-library/react';
 import {
   defineConfigSchema,
   temporaryConfigStore,
   provide,
   configInternalStore,
   ConfigInternalStore,
-} from "@openmrs/esm-config";
-import { MockedStore } from "../__mocks__/openmrs-esm-state.mock";
-import { useConfig } from "./useConfig";
-import { ComponentContext } from "./ComponentContext";
+} from '@openmrs/esm-config';
+import { MockedStore } from '../__mocks__/openmrs-esm-state.mock';
+import { useConfig } from './useConfig';
+import { ComponentContext } from './ComponentContext';
 
-const mockConfigInternalStore =
-  configInternalStore as MockedStore<ConfigInternalStore>;
+const mockConfigInternalStore = configInternalStore as MockedStore<ConfigInternalStore>;
 
 function RenderConfig(props) {
   const config = useConfig();
@@ -34,87 +33,83 @@ describe(`useConfig in root context`, () => {
   afterEach(clearConfig);
 
   it(`can return config as a react hook`, async () => {
-    defineConfigSchema("foo-module", {
+    defineConfigSchema('foo-module', {
       thing: {
-        _default: "The first thing",
+        _default: 'The first thing',
       },
     });
 
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: "foo-module" }}>
+        <ComponentContext.Provider value={{ moduleName: 'foo-module' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() =>
-      expect(screen.findByText("The first thing")).toBeTruthy()
-    );
+    await waitFor(() => expect(screen.findByText('The first thing')).toBeTruthy());
   });
 
   it(`can handle multiple calls to useConfig from different modules`, async () => {
-    defineConfigSchema("foo-module", {
+    defineConfigSchema('foo-module', {
       thing: {
-        _default: "foo thing",
+        _default: 'foo thing',
       },
     });
 
-    defineConfigSchema("bar-module", {
+    defineConfigSchema('bar-module', {
       thing: {
-        _default: "bar thing",
+        _default: 'bar thing',
       },
     });
 
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: "foo-module" }}>
+        <ComponentContext.Provider value={{ moduleName: 'foo-module' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() => expect(screen.findByText("foo thing")).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('foo thing')).toBeTruthy());
 
     await cleanup();
 
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: "bar-module" }}>
+        <ComponentContext.Provider value={{ moduleName: 'bar-module' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() => expect(screen.findByText("bar thing")).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('bar thing')).toBeTruthy());
   });
 
-  it("updates with a new value when the temporary config is updated", async () => {
-    defineConfigSchema("foo-module", {
+  it('updates with a new value when the temporary config is updated', async () => {
+    defineConfigSchema('foo-module', {
       thing: {
-        _default: "The first thing",
+        _default: 'The first thing',
       },
     });
 
     render(
       <React.Suspense fallback={<div>Suspense!</div>}>
-        <ComponentContext.Provider value={{ moduleName: "foo-module" }}>
+        <ComponentContext.Provider value={{ moduleName: 'foo-module' }}>
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() =>
-      expect(screen.findByText("The first thing")).toBeTruthy()
-    );
+    await waitFor(() => expect(screen.findByText('The first thing')).toBeTruthy());
 
     act(() =>
       temporaryConfigStore.setState({
-        config: { "foo-module": { thing: "A new thing" } },
-      })
+        config: { 'foo-module': { thing: 'A new thing' } },
+      }),
     );
 
-    await waitFor(() => expect(screen.findByText("A new thing")).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('A new thing')).toBeTruthy());
   });
 });
 
@@ -123,9 +118,9 @@ describe(`useConfig in an extension`, () => {
   afterEach(cleanup);
 
   it(`can return extension config as a react hook`, async () => {
-    defineConfigSchema("ext-module", {
+    defineConfigSchema('ext-module', {
       thing: {
-        _default: "The basics",
+        _default: 'The basics',
       },
     });
 
@@ -133,32 +128,32 @@ describe(`useConfig in an extension`, () => {
       <React.Suspense fallback={<div>Suspense!</div>}>
         <ComponentContext.Provider
           value={{
-            moduleName: "ext-module",
+            moduleName: 'ext-module',
             extension: {
-              extensionSlotName: "fooSlot",
-              extensionSlotModuleName: "slot-mod",
-              extensionId: "barExt#id1",
+              extensionSlotName: 'fooSlot',
+              extensionSlotModuleName: 'slot-mod',
+              extensionId: 'barExt#id1',
             },
           }}
         >
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() => expect(screen.findByText("The basics")).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('The basics')).toBeTruthy());
   });
 
   it(`can handle multiple extensions`, async () => {
-    defineConfigSchema("first-module", {
+    defineConfigSchema('first-module', {
       thing: {
-        _default: "first thing",
+        _default: 'first thing',
       },
     });
 
-    defineConfigSchema("second-module", {
+    defineConfigSchema('second-module', {
       thing: {
-        _default: "second thing",
+        _default: 'second thing',
       },
     });
 
@@ -166,11 +161,11 @@ describe(`useConfig in an extension`, () => {
       <React.Suspense fallback={<div>Suspense!</div>}>
         <ComponentContext.Provider
           value={{
-            moduleName: "first-module",
+            moduleName: 'first-module',
             extension: {
-              extensionSlotName: "fooSlot",
-              extensionSlotModuleName: "slot-mod",
-              extensionId: "fooExt#id1",
+              extensionSlotName: 'fooSlot',
+              extensionSlotModuleName: 'slot-mod',
+              extensionId: 'fooExt#id1',
             },
           }}
         >
@@ -178,36 +173,36 @@ describe(`useConfig in an extension`, () => {
         </ComponentContext.Provider>
         <ComponentContext.Provider
           value={{
-            moduleName: "second-module",
+            moduleName: 'second-module',
             extension: {
-              extensionSlotName: "fooSlot",
-              extensionSlotModuleName: "slot-mod",
-              extensionId: "barExt",
+              extensionSlotName: 'fooSlot',
+              extensionSlotModuleName: 'slot-mod',
+              extensionId: 'barExt',
             },
           }}
         >
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() => expect(screen.findByText("first thing")).toBeTruthy());
-    await waitFor(() => expect(screen.findByText("second thing")).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('first thing')).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('second thing')).toBeTruthy());
   });
 
-  it("can handle multiple extension slots", async () => {
-    defineConfigSchema("extension-module", {
+  it('can handle multiple extension slots', async () => {
+    defineConfigSchema('extension-module', {
       thing: {
-        _default: "old extension thing",
+        _default: 'old extension thing',
       },
     });
 
     provide({
-      "slot-2-module": {
+      'slot-2-module': {
         extensions: {
           slot2: {
             configure: {
-              fooExt: { thing: "a different thing" },
+              fooExt: { thing: 'a different thing' },
             },
           },
         },
@@ -218,11 +213,11 @@ describe(`useConfig in an extension`, () => {
       <React.Suspense fallback={<div>Suspense!</div>}>
         <ComponentContext.Provider
           value={{
-            moduleName: "extension-module",
+            moduleName: 'extension-module',
             extension: {
-              extensionSlotName: "slot1",
-              extensionSlotModuleName: "slot-1-module",
-              extensionId: "fooExt",
+              extensionSlotName: 'slot1',
+              extensionSlotModuleName: 'slot-1-module',
+              extensionId: 'fooExt',
             },
           }}
         >
@@ -230,31 +225,27 @@ describe(`useConfig in an extension`, () => {
         </ComponentContext.Provider>
         <ComponentContext.Provider
           value={{
-            moduleName: "extension-module",
+            moduleName: 'extension-module',
             extension: {
-              extensionSlotName: "slot2",
-              extensionSlotModuleName: "slot-2-module",
-              extensionId: "fooExt",
+              extensionSlotName: 'slot2',
+              extensionSlotModuleName: 'slot-2-module',
+              extensionId: 'fooExt',
             },
           }}
         >
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() =>
-      expect(screen.findByText("old extension thing")).toBeTruthy()
-    );
-    await waitFor(() =>
-      expect(screen.findByText("a different thing")).toBeTruthy()
-    );
+    await waitFor(() => expect(screen.findByText('old extension thing')).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('a different thing')).toBeTruthy());
   });
 
-  it("updates with a new value when the temporary config is updated", async () => {
-    defineConfigSchema("ext-module", {
+  it('updates with a new value when the temporary config is updated', async () => {
+    defineConfigSchema('ext-module', {
       thing: {
-        _default: "The first thing",
+        _default: 'The first thing',
       },
     });
 
@@ -262,35 +253,33 @@ describe(`useConfig in an extension`, () => {
       <React.Suspense fallback={<div>Suspense!</div>}>
         <ComponentContext.Provider
           value={{
-            moduleName: "ext-module",
+            moduleName: 'ext-module',
             extension: {
-              extensionSlotName: "fooSlot",
-              extensionSlotModuleName: "slot-module",
-              extensionId: "barExt#id1",
+              extensionSlotName: 'fooSlot',
+              extensionSlotModuleName: 'slot-module',
+              extensionId: 'barExt#id1',
             },
           }}
         >
           <RenderConfig configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() =>
-      expect(screen.findByText("The first thing")).toBeTruthy()
-    );
+    await waitFor(() => expect(screen.findByText('The first thing')).toBeTruthy());
 
-    const newConfig = { "ext-module": { thing: "A new thing" } };
+    const newConfig = { 'ext-module': { thing: 'A new thing' } };
     act(() => temporaryConfigStore.setState({ config: newConfig }));
 
-    await waitFor(() => expect(screen.findByText("A new thing")).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('A new thing')).toBeTruthy());
 
     const newConfig2 = {
-      "slot-module": {
+      'slot-module': {
         extensions: {
           fooSlot: {
             configure: {
-              "barExt#id1": {
-                thing: "Yet another thing",
+              'barExt#id1': {
+                thing: 'Yet another thing',
               },
             },
           },
@@ -299,21 +288,19 @@ describe(`useConfig in an extension`, () => {
     };
     act(() => temporaryConfigStore.setState({ config: newConfig2 }));
 
-    await waitFor(() =>
-      expect(screen.findByText("Yet another thing")).toBeTruthy()
-    );
+    await waitFor(() => expect(screen.findByText('Yet another thing')).toBeTruthy());
   });
 
   it("can optionally load an external module's configuration", async () => {
-    defineConfigSchema("first-module", {
+    defineConfigSchema('first-module', {
       thing: {
-        _default: "first thing",
+        _default: 'first thing',
       },
     });
 
-    defineConfigSchema("second-module", {
+    defineConfigSchema('second-module', {
       thing: {
-        _default: "second thing",
+        _default: 'second thing',
       },
     });
 
@@ -321,22 +308,19 @@ describe(`useConfig in an extension`, () => {
       <React.Suspense fallback={<div>Suspense!</div>}>
         <ComponentContext.Provider
           value={{
-            moduleName: "first-module",
+            moduleName: 'first-module',
             extension: {
-              extensionSlotName: "fooSlot",
-              extensionSlotModuleName: "slot-mod",
-              extensionId: "fooExt#id1",
+              extensionSlotName: 'fooSlot',
+              extensionSlotModuleName: 'slot-mod',
+              extensionId: 'fooExt#id1',
             },
           }}
         >
-          <RenderExternalConfig
-            externalModuleName="second-module"
-            configKey="thing"
-          />
+          <RenderExternalConfig externalModuleName="second-module" configKey="thing" />
         </ComponentContext.Provider>
-      </React.Suspense>
+      </React.Suspense>,
     );
 
-    await waitFor(() => expect(screen.findByText("second thing")).toBeTruthy());
+    await waitFor(() => expect(screen.findByText('second thing')).toBeTruthy());
   });
 });