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

package/jest.config.js

@@ -1,19 +1,17 @@
 module.exports = {
   transform: {
-    "^.+\\.(j|t)sx?$": ["@swc/jest"],
+    '^.+\\.(j|t)sx?$': ['@swc/jest'],
   },
-  setupFilesAfterEnv: ["<rootDir>/src/setup-tests.js"],
+  setupFilesAfterEnv: ['<rootDir>/src/setup-tests.js'],
   moduleNameMapper: {
-    "^lodash-es/(.*)$": "lodash/$1",
-    "@openmrs/esm-error-handling":
-      "<rootDir>/__mocks__/openmrs-esm-error-handling.mock.ts",
-    "@openmrs/esm-state": "<rootDir>/__mocks__/openmrs-esm-state.mock.ts",
-    "@openmrs/esm-styleguide":
-      "<rootDir>/__mocks__/openmrs-esm-styleguide.mock.tsx",
-    dexie: require.resolve("dexie"),
+    '^lodash-es/(.*)$': 'lodash/$1',
+    '@openmrs/esm-error-handling': '<rootDir>/__mocks__/openmrs-esm-error-handling.mock.ts',
+    '@openmrs/esm-state': '<rootDir>/__mocks__/openmrs-esm-state.mock.ts',
+    '@openmrs/esm-styleguide': '<rootDir>/__mocks__/openmrs-esm-styleguide.mock.tsx',
+    dexie: require.resolve('dexie'),
   },
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
   testEnvironmentOptions: {
-    url: "http://localhost/",
+    url: 'http://localhost/',
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "5.3.3-pre.1237",
+  "version": "5.3.3-pre.1247",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -57,12 +57,12 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "5.3.3-pre.1237",
-    "@openmrs/esm-config": "5.3.3-pre.1237",
-    "@openmrs/esm-error-handling": "5.3.3-pre.1237",
-    "@openmrs/esm-extensions": "5.3.3-pre.1237",
-    "@openmrs/esm-feature-flags": "5.3.3-pre.1237",
-    "@openmrs/esm-globals": "5.3.3-pre.1237",
+    "@openmrs/esm-api": "5.3.3-pre.1247",
+    "@openmrs/esm-config": "5.3.3-pre.1247",
+    "@openmrs/esm-error-handling": "5.3.3-pre.1247",
+    "@openmrs/esm-extensions": "5.3.3-pre.1247",
+    "@openmrs/esm-feature-flags": "5.3.3-pre.1247",
+    "@openmrs/esm-globals": "5.3.3-pre.1247",
     "dayjs": "^1.10.8",
     "i18next": "^21.10.0",
     "react": "^18.1.0",

package/src/ComponentContext.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export interface ExtensionData {
   extensionSlotName: string;
@@ -15,5 +15,5 @@ export interface ComponentConfig {
  * Available to all components. Provided by `openmrsComponentDecorator`.
  */
 export const ComponentContext = React.createContext<ComponentConfig>({
-  moduleName: "",
+  moduleName: '',
 });

package/src/ConfigurableLink.test.tsx

@@ -1,46 +1,42 @@
-import React from "react";
-import "@testing-library/jest-dom/extend-expect";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { navigate, interpolateUrl } from "@openmrs/esm-config";
-import { ConfigurableLink } from "./ConfigurableLink";
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { navigate, interpolateUrl } from '@openmrs/esm-config';
+import { ConfigurableLink } from './ConfigurableLink';
 
-jest.mock("single-spa");
+jest.mock('single-spa');
 
-jest.mock("@openmrs/esm-config");
+jest.mock('@openmrs/esm-config');
 const mockNavigate = navigate as jest.Mock;
 
-const realInterpolate = jest.requireActual(
-  "@openmrs/esm-config"
-).interpolateUrl;
+const realInterpolate = jest.requireActual('@openmrs/esm-config').interpolateUrl;
 
-(interpolateUrl as jest.Mock).mockImplementation((...args) =>
-  realInterpolate(...args)
-);
+(interpolateUrl as jest.Mock).mockImplementation((...args) => realInterpolate(...args));
 
 describe(`ConfigurableLink`, () => {
-  const path = "${openmrsSpaBase}/home";
+  const path = '${openmrsSpaBase}/home';
   beforeEach(() => {
     mockNavigate.mockClear();
     render(
       <ConfigurableLink to={path} className="fancy-link">
         SPA Home
-      </ConfigurableLink>
+      </ConfigurableLink>,
     );
   });
 
   it(`interpolates the link`, async () => {
-    const link = screen.getByRole("link", { name: /spa home/i });
+    const link = screen.getByRole('link', { name: /spa home/i });
     expect(link).toBeTruthy();
-    expect(link.closest("a")).toHaveClass("fancy-link");
-    expect(link.closest("a")).toHaveAttribute("href", "/openmrs/spa/home");
+    expect(link.closest('a')).toHaveClass('fancy-link');
+    expect(link.closest('a')).toHaveAttribute('href', '/openmrs/spa/home');
   });
 
   it(`calls navigate on normal click but not special clicks`, async () => {
     const user = userEvent.setup();
 
-    const link = screen.getByRole("link", { name: /spa home/i });
-    await user.pointer({ target: link, keys: "[MouseRight]" });
+    const link = screen.getByRole('link', { name: /spa home/i });
+    await user.pointer({ target: link, keys: '[MouseRight]' });
     expect(navigate).not.toHaveBeenCalled();
     await user.click(link);
     expect(navigate).toHaveBeenCalledWith({ to: path });
@@ -50,8 +46,8 @@ describe(`ConfigurableLink`, () => {
     const user = userEvent.setup();
 
     expect(navigate).not.toHaveBeenCalled();
-    const link = screen.getByRole("link", { name: /spa home/i });
-    await user.type(link, "{enter}");
+    const link = screen.getByRole('link', { name: /spa home/i });
+    await user.type(link, '{enter}');
     expect(navigate).toHaveBeenCalledWith({ to: path });
   });
 });

package/src/ConfigurableLink.tsx

@@ -1,22 +1,9 @@
 /** @module @category Navigation */
-import React, {
-  type MouseEvent,
-  type AnchorHTMLAttributes,
-  type PropsWithChildren,
-} from "react";
-import { navigate, interpolateUrl, TemplateParams } from "@openmrs/esm-config";
+import React, { type MouseEvent, type AnchorHTMLAttributes, type PropsWithChildren } from 'react';
+import { navigate, interpolateUrl, TemplateParams } from '@openmrs/esm-config';
 
-function handleClick(
-  event: MouseEvent,
-  to: string,
-  templateParams?: TemplateParams
-) {
-  if (
-    !event.metaKey &&
-    !event.ctrlKey &&
-    !event.shiftKey &&
-    event.button == 0
-  ) {
+function handleClick(event: MouseEvent, to: string, templateParams?: TemplateParams) {
+  if (!event.metaKey && !event.ctrlKey && !event.shiftKey && event.button == 0) {
     event.preventDefault();
     navigate({ to, templateParams });
   }
@@ -25,8 +12,7 @@ function handleClick(
 /**
  * @noInheritDoc
  */
-export interface ConfigurableLinkProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface ConfigurableLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string;
   templateParams?: TemplateParams;
 }

package/src/Extension.tsx

@@ -1,27 +1,15 @@
-import { renderExtension } from "@openmrs/esm-extensions";
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  type ReactElement,
-} from "react";
-import type { Parcel } from "single-spa";
-import { ComponentContext } from ".";
-import type { ExtensionData } from "./ComponentContext";
+import { renderExtension } from '@openmrs/esm-extensions';
+import React, { useCallback, useContext, useEffect, useRef, useState, type ReactElement } from 'react';
+import type { Parcel } from 'single-spa';
+import { ComponentContext } from '.';
+import type { ExtensionData } from './ComponentContext';
 
 export type ExtensionProps = {
   state?: Record<string, any>;
   /** @deprecated Pass a function as the child of `ExtensionSlot` instead. */
-  wrap?(
-    slot: React.ReactNode,
-    extension: ExtensionData
-  ): ReactElement<any, any> | null;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    children?:
-      | React.ReactNode
-      | ((slot: React.ReactNode, extension?: ExtensionData) => React.ReactNode);
+  wrap?(slot: React.ReactNode, extension: ExtensionData): ReactElement<any, any> | null;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children?: React.ReactNode | ((slot: React.ReactNode, extension?: ExtensionData) => React.ReactNode);
   };
 
 /**
@@ -33,12 +21,7 @@ export type ExtensionProps = {
  * Usage of this component *must* have an ancestor `<ExtensionSlot>`,
  * and *must* only be used once within that `<ExtensionSlot>`.
  */
-export const Extension: React.FC<ExtensionProps> = ({
-  state,
-  children,
-  wrap,
-  ...divProps
-}) => {
+export const Extension: React.FC<ExtensionProps> = ({ state, children, wrap, ...divProps }) => {
   const [domElement, setDomElement] = useState<HTMLDivElement>();
   const { extension } = useContext(ComponentContext);
   const parcel = useRef<Parcel | null>(null);
@@ -49,10 +32,8 @@ export const Extension: React.FC<ExtensionProps> = ({
     if (wrap) {
       console.warn(
         `'wrap' prop of Extension is being used ${
-          extension?.extensionId
-            ? `by ${extension.extensionId} in ${extension.extensionSlotName}`
-            : ""
-        }. This will be removed in a future release.`
+          extension?.extensionId ? `by ${extension.extensionId} in ${extension.extensionSlotName}` : ''
+        }. This will be removed in a future release.`,
       );
     }
     // we only warn when component mounts
@@ -63,7 +44,7 @@ export const Extension: React.FC<ExtensionProps> = ({
     (node: HTMLDivElement) => {
       setDomElement(node);
     },
-    [setDomElement]
+    [setDomElement],
   );
 
   useEffect(() => {
@@ -82,7 +63,7 @@ export const Extension: React.FC<ExtensionProps> = ({
         extension.extensionSlotModuleName,
         extension.extensionId,
         undefined,
-        state
+        state,
       ).then((newParcel) => {
         parcel.current = newParcel;
         rendering.current = false;
@@ -92,20 +73,20 @@ export const Extension: React.FC<ExtensionProps> = ({
         if (parcel && parcel.current) {
           const status = parcel.current.getStatus();
           switch (status) {
-            case "MOUNTING":
+            case 'MOUNTING':
               parcel.current.mountPromise.then(() => {
-                if (parcel.current?.getStatus() === "MOUNTED") {
+                if (parcel.current?.getStatus() === 'MOUNTED') {
                   parcel.current.unmount();
                 }
               });
               break;
-            case "MOUNTED":
+            case 'MOUNTED':
               parcel.current.unmount();
               break;
-            case "UPDATING":
+            case 'UPDATING':
               if (updatePromise.current) {
                 updatePromise.current.then(() => {
-                  if (parcel.current?.getStatus() === "MOUNTED") {
+                  if (parcel.current?.getStatus() === 'MOUNTED') {
                     parcel.current.unmount();
                   }
                 });
@@ -118,41 +99,25 @@ export const Extension: React.FC<ExtensionProps> = ({
     // we intentionally do not re-run this hook if state gets updated
     // state updates are handled in the next useEffect hook
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    extension?.extensionSlotName,
-    extension?.extensionId,
-    extension?.extensionSlotModuleName,
-    domElement,
-  ]);
+  }, [extension?.extensionSlotName, extension?.extensionId, extension?.extensionSlotModuleName, domElement]);
 
   useEffect(() => {
-    if (
-      parcel.current &&
-      parcel.current.update &&
-      parcel.current.getStatus() !== "UNMOUNTING"
-    ) {
-      Promise.all([parcel.current.mountPromise, updatePromise.current]).then(
-        () => {
-          if (
-            parcel?.current?.getStatus() === "MOUNTED" &&
-            parcel.current.update
-          ) {
-            updatePromise.current = parcel.current
-              .update({ ...state })
-              .catch((err) => {
-                // if we were trying to update but the component was unmounted
-                // while this was happening, ignore the error
-                if (
-                  !(err instanceof Error) ||
-                  !err.message.includes("minified message #32") ||
-                  parcel.current?.getStatus() === "MOUNTED"
-                ) {
-                  throw err;
-                }
-              });
-          }
+    if (parcel.current && parcel.current.update && parcel.current.getStatus() !== 'UNMOUNTING') {
+      Promise.all([parcel.current.mountPromise, updatePromise.current]).then(() => {
+        if (parcel?.current?.getStatus() === 'MOUNTED' && parcel.current.update) {
+          updatePromise.current = parcel.current.update({ ...state }).catch((err) => {
+            // if we were trying to update but the component was unmounted
+            // while this was happening, ignore the error
+            if (
+              !(err instanceof Error) ||
+              !err.message.includes('minified message #32') ||
+              parcel.current?.getStatus() === 'MOUNTED'
+            ) {
+              throw err;
+            }
+          });
         }
-      );
+      });
     }
   }, [state]);
 
@@ -160,15 +125,10 @@ export const Extension: React.FC<ExtensionProps> = ({
   // positioning in order to allow the UI Editor to absolutely position
   // elements within it.
   const slot = (
-    <div
-      ref={ref}
-      data-extension-id={extension?.extensionId}
-      style={{ position: "relative" }}
-      {...divProps}
-    />
+    <div ref={ref} data-extension-id={extension?.extensionId} style={{ position: 'relative' }} {...divProps} />
   );
 
-  if (typeof children === "function" && !React.isValidElement(children)) {
+  if (typeof children === 'function' && !React.isValidElement(children)) {
     return <>{children(slot, extension)}</>;
   }
 

package/src/ExtensionSlot.tsx

@@ -1,8 +1,8 @@
-import React, { useRef, useMemo } from "react";
-import type { ConnectedExtension } from "@openmrs/esm-extensions";
-import { ComponentContext } from "./ComponentContext";
-import { Extension } from "./Extension";
-import { useExtensionSlot } from "./useExtensionSlot";
+import React, { useRef, useMemo } from 'react';
+import type { ConnectedExtension } from '@openmrs/esm-extensions';
+import { ComponentContext } from './ComponentContext';
+import { Extension } from './Extension';
+import { useExtensionSlot } from './useExtensionSlot';
 
 export interface ExtensionSlotBaseProps {
   name: string;
@@ -20,14 +20,9 @@ export interface OldExtensionSlotBaseProps {
   state?: Record<string, any>;
 }
 
-export type ExtensionSlotProps = (
-  | OldExtensionSlotBaseProps
-  | ExtensionSlotBaseProps
-) &
-  Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    children?:
-      | React.ReactNode
-      | ((extension: ConnectedExtension) => React.ReactNode);
+export type ExtensionSlotProps = (OldExtensionSlotBaseProps | ExtensionSlotBaseProps) &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children?: React.ReactNode | ((extension: ConnectedExtension) => React.ReactNode);
   };
 
 function defaultSelect(extensions: Array<ConnectedExtension>) {
@@ -93,7 +88,7 @@ export function ExtensionSlot({
 }: ExtensionSlotProps) {
   if (children && state) {
     throw new Error(
-      "Both children and state have been provided. If children are provided, the state must be passed as a prop to the `Extension` component."
+      'Both children and state have been provided. If children are provided, the state must be passed as a prop to the `Extension` component.',
     );
   }
 
@@ -101,13 +96,10 @@ export function ExtensionSlot({
   const slotRef = useRef(null);
   const { extensions, extensionSlotModuleName } = useExtensionSlot(name);
 
-  const extensionsToRender = useMemo(
-    () => select(extensions),
-    [select, extensions]
-  );
+  const extensionsToRender = useMemo(() => select(extensions), [select, extensions]);
 
   const extensionsFromChildrenFunction = useMemo(() => {
-    if (typeof children == "function" && !React.isValidElement(children)) {
+    if (typeof children == 'function' && !React.isValidElement(children)) {
       return extensionsToRender.map((extension) => children(extension));
     }
   }, [children, extensionsToRender]);
@@ -117,7 +109,7 @@ export function ExtensionSlot({
       ref={slotRef}
       data-extension-slot-name={name}
       data-extension-slot-module-name={extensionSlotModuleName}
-      style={{ ...style, position: "relative" }}
+      style={{ ...style, position: 'relative' }}
       {...divProps}
     >
       {name &&
@@ -133,10 +125,9 @@ export function ExtensionSlot({
               },
             }}
           >
-            {extensionsFromChildrenFunction?.[i] ??
-              (typeof children != "function" ? children : null) ?? (
-                <Extension state={state} />
-              )}
+            {extensionsFromChildrenFunction?.[i] ?? (typeof children != 'function' ? children : null) ?? (
+              <Extension state={state} />
+            )}
           </ComponentContext.Provider>
         ))}
     </div>

package/src/UserHasAccess.tsx

@@ -1,6 +1,6 @@
 /** @module @category API */
-import { getCurrentUser, LoggedInUser, userHasAccess } from "@openmrs/esm-api";
-import React, { useEffect, useState } from "react";
+import { getCurrentUser, LoggedInUser, userHasAccess } from '@openmrs/esm-api';
+import React, { useEffect, useState } from 'react';
 
 export interface UserHasAccessProps {
   privilege: string | string[];
@@ -8,11 +8,7 @@ export interface UserHasAccessProps {
   children?: React.ReactNode;
 }
 
-export const UserHasAccess: React.FC<UserHasAccessProps> = ({
-  privilege,
-  fallback,
-  children,
-}) => {
+export const UserHasAccess: React.FC<UserHasAccessProps> = ({ privilege, fallback, children }) => {
   const [user, setUser] = useState<LoggedInUser | null>(null);
 
   useEffect(() => {