@openmrs/esm-react-utils 3.4.1-pre.96 → 4.0.0-pre.1

package/jest.config.js

@@ -11,4 +11,8 @@ module.exports = {
     "@openmrs/esm-styleguide":
       "<rootDir>/__mocks__/openmrs-esm-styleguide.mock.tsx",
   },
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "http://localhost/",
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "3.4.1-pre.96",
+  "version": "4.0.0-pre.1",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -39,34 +39,34 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "single-spa-react": "^4.1.1",
+    "single-spa-react": "^4.6.1",
     "swr": "^1.2.2"
   },
   "peerDependencies": {
-    "@openmrs/esm-api": "3.x",
-    "@openmrs/esm-config": "3.x",
-    "@openmrs/esm-error-handling": "3.x",
-    "@openmrs/esm-extensions": "3.x",
-    "@openmrs/esm-globals": "3.x",
+    "@openmrs/esm-api": "4.x",
+    "@openmrs/esm-config": "4.x",
+    "@openmrs/esm-error-handling": "4.x",
+    "@openmrs/esm-extensions": "4.x",
+    "@openmrs/esm-globals": "4.x",
     "dayjs": "1.x",
     "i18next": "19.x",
-    "react": "16.x",
-    "react-dom": "16.x",
+    "react": "18.x",
+    "react-dom": "18.x",
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^3.4.1-pre.96",
-    "@openmrs/esm-config": "^3.4.1-pre.96",
-    "@openmrs/esm-error-handling": "^3.4.1-pre.96",
-    "@openmrs/esm-extensions": "^3.4.1-pre.96",
-    "@openmrs/esm-globals": "^3.4.1-pre.96",
+    "@openmrs/esm-api": "^4.0.0-pre.1",
+    "@openmrs/esm-config": "^4.0.0-pre.1",
+    "@openmrs/esm-error-handling": "^4.0.0-pre.1",
+    "@openmrs/esm-extensions": "^4.0.0-pre.1",
+    "@openmrs/esm-globals": "^4.0.0-pre.1",
     "dayjs": "^1.10.8",
     "i18next": "^19.6.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-i18next": "^11.7.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-i18next": "^11.16.9",
     "rxjs": "^6.5.3",
     "unistore": "^3.5.2"
   },
-  "gitHead": "593214cd88408e07e9c18eab4c204be4a3722c73"
+  "gitHead": "9f58b801f07526083a9edc1cc5a1e58660d71eb0"
 }

package/src/ConfigurableLink.test.tsx

@@ -5,6 +5,8 @@ import { navigate, interpolateUrl } from "@openmrs/esm-config";
 import userEvent from "@testing-library/user-event";
 import { ConfigurableLink } from "./ConfigurableLink";
 
+jest.mock("single-spa");
+
 jest.mock("@openmrs/esm-config");
 const mockNavigate = navigate as jest.Mock;
 
@@ -34,18 +36,18 @@ describe(`ConfigurableLink`, () => {
     expect(link.closest("a")).toHaveAttribute("href", "/openmrs/spa/home");
   });
 
-  it(`calls navigate on normal click but not right click`, async () => {
+  it(`calls navigate on normal click but not special clicks`, async () => {
     const link = screen.getByRole("link", { name: /spa home/i });
-    userEvent.click(link, { button: 2 }); // right-click
+    await userEvent.pointer({ target: link, keys: "[MouseRight]" });
     expect(navigate).not.toHaveBeenCalled();
-    userEvent.click(link);
+    await userEvent.click(link);
     expect(navigate).toHaveBeenCalledWith({ to: path });
   });
 
   it(`calls navigate on enter`, async () => {
     expect(navigate).not.toHaveBeenCalled();
     const link = screen.getByRole("link", { name: /spa home/i });
-    userEvent.type(link, "{enter}");
+    await userEvent.type(link, "{enter}");
     expect(navigate).toHaveBeenCalledWith({ to: path });
   });
 });

package/src/ConfigurableLink.tsx

@@ -1,8 +1,12 @@
 /** @module @category Navigation */
 import React, { MouseEvent, AnchorHTMLAttributes } from "react";
-import { navigate, interpolateUrl } from "@openmrs/esm-config";
+import { navigate, interpolateUrl, TemplateParams } from "@openmrs/esm-config";
 
-function handleClick(event: MouseEvent, to: string) {
+function handleClick(
+  event: MouseEvent,
+  to: string,
+  templateParams?: TemplateParams
+) {
   if (
     !event.metaKey &&
     !event.ctrlKey &&
@@ -10,7 +14,7 @@ function handleClick(event: MouseEvent, to: string) {
     event.button == 0
   ) {
     event.preventDefault();
-    navigate({ to });
+    navigate({ to, templateParams });
   }
 }
 
@@ -20,25 +24,30 @@ function handleClick(event: MouseEvent, to: string) {
 export interface ConfigurableLinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string;
+  templateParams?: TemplateParams;
 }
 
 /**
  * A React link component which calls [[navigate]] when clicked
  *
  * @param to The target path or URL. Supports interpolation. See [[navigate]]
+ * @param urlParams: A dictionary of values to interpolate into the URL, in addition to the default keys `openmrsBase` and `openmrsSpaBase`.
  * @param children Inline elements within the link
  * @param otherProps Any other valid props for an <a> tag except `href` and `onClick`
  */
-export const ConfigurableLink: React.FC<ConfigurableLinkProps> = ({
+export function ConfigurableLink({
   to,
+  templateParams,
   children,
   ...otherProps
-}) => (
-  <a
-    onClick={(event) => handleClick(event, to)}
-    href={interpolateUrl(to)}
-    {...otherProps}
-  >
-    {children}
-  </a>
-);
+}: ConfigurableLinkProps) {
+  return (
+    <a
+      onClick={(event) => handleClick(event, to, templateParams)}
+      href={interpolateUrl(to, templateParams)}
+      {...otherProps}
+    >
+      {children}
+    </a>
+  );
+}

package/src/UserHasAccess.tsx

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

package/src/openmrsComponentDecorator.tsx

@@ -18,6 +18,7 @@ const defaultOpts = {
 interface I18nextLoadNamespaceProps {
   forceUpdate(): void;
   ns: string;
+  children?: React.ReactNode;
 }
 
 const I18nextLoadNamespace: React.FC<I18nextLoadNamespaceProps> = (props) => {
@@ -80,7 +81,7 @@ export function openmrsComponentDecorator(userOpts: ComponentDecoratorOptions) {
   const opts = Object.assign({}, defaultOpts, userOpts);
 
   return function decorateComponent(
-    Comp: React.ComponentType
+    Comp: React.ComponentType<any>
   ): React.ComponentType<any> {
     return class OpenmrsReactComponent extends React.Component<
       OpenmrsReactComponentProps,

package/src/useLayoutType.ts

@@ -1,7 +1,7 @@
 /** @module @category UI */
 import { useEffect, useState } from "react";
 
-export type LayoutType = "tablet" | "phone" | "desktop";
+export type LayoutType = "phone" | "tablet" | "small-desktop" | "large-desktop";
 
 function getLayout() {
   let layout: LayoutType = "tablet";
@@ -11,8 +11,11 @@ function getLayout() {
       case "omrs-breakpoint-lt-tablet":
         layout = "phone";
         break;
+      case "omrs-breakpoint-gt-small-desktop":
+        layout = "large-desktop";
+        break;
       case "omrs-breakpoint-gt-tablet":
-        layout = "desktop";
+        layout = "small-desktop";
         break;
     }
   });
@@ -33,3 +36,6 @@ export function useLayoutType() {
 
   return type;
 }
+
+export const isDesktop = (layout: LayoutType) =>
+  layout === "small-desktop" || layout === "large-desktop";