@openmrs/esm-react-utils 5.3.3-pre.1345 → 5.3.3-pre.1352

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "5.3.3-pre.1345",
+  "version": "5.3.3-pre.1352",
   "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.1345",
-    "@openmrs/esm-config": "5.3.3-pre.1345",
-    "@openmrs/esm-error-handling": "5.3.3-pre.1345",
-    "@openmrs/esm-extensions": "5.3.3-pre.1345",
-    "@openmrs/esm-feature-flags": "5.3.3-pre.1345",
-    "@openmrs/esm-globals": "5.3.3-pre.1345",
+    "@openmrs/esm-api": "5.3.3-pre.1352",
+    "@openmrs/esm-config": "5.3.3-pre.1352",
+    "@openmrs/esm-error-handling": "5.3.3-pre.1352",
+    "@openmrs/esm-extensions": "5.3.3-pre.1352",
+    "@openmrs/esm-feature-flags": "5.3.3-pre.1352",
+    "@openmrs/esm-globals": "5.3.3-pre.1352",
     "dayjs": "^1.10.8",
     "i18next": "^21.10.0",
     "react": "^18.1.0",

package/src/ConfigurableLink.test.tsx

@@ -18,14 +18,14 @@ describe(`ConfigurableLink`, () => {
   const path = '${openmrsSpaBase}/home';
   beforeEach(() => {
     mockNavigate.mockClear();
+  });
+
+  it(`interpolates the link`, async () => {
     render(
       <ConfigurableLink to={path} className="fancy-link">
         SPA Home
       </ConfigurableLink>,
     );
-  });
-
-  it(`interpolates the link`, async () => {
     const link = screen.getByRole('link', { name: /spa home/i });
     expect(link).toBeTruthy();
     expect(link.closest('a')).toHaveClass('fancy-link');
@@ -33,6 +33,11 @@ describe(`ConfigurableLink`, () => {
   });
 
   it(`calls navigate on normal click but not special clicks`, async () => {
+    render(
+      <ConfigurableLink to={path} className="fancy-link">
+        SPA Home
+      </ConfigurableLink>,
+    );
     const user = userEvent.setup();
 
     const link = screen.getByRole('link', { name: /spa home/i });
@@ -43,6 +48,11 @@ describe(`ConfigurableLink`, () => {
   });
 
   it(`calls navigate on enter`, async () => {
+    render(
+      <ConfigurableLink to={path} className="fancy-link">
+        SPA Home
+      </ConfigurableLink>,
+    );
     const user = userEvent.setup();
 
     expect(navigate).not.toHaveBeenCalled();
@@ -50,4 +60,19 @@ describe(`ConfigurableLink`, () => {
     await user.type(link, '{enter}');
     expect(navigate).toHaveBeenCalledWith({ to: path });
   });
+
+  it('executes onBeforeNavigate callback if provided', async () => {
+    const onBeforeNavigate = jest.fn();
+    render(
+      <ConfigurableLink to={path} onBeforeNavigate={onBeforeNavigate}>
+        SPA Home
+      </ConfigurableLink>,
+    );
+
+    const user = userEvent.setup();
+    const link = screen.getByRole('link', { name: /spa home/i });
+    await user.click(link);
+    expect(onBeforeNavigate).toHaveBeenCalled();
+    expect(navigate).toHaveBeenCalledWith({ to: path });
+  });
 });

package/src/ConfigurableLink.tsx

@@ -3,9 +3,10 @@ import React, { type MouseEvent, type AnchorHTMLAttributes, type PropsWithChildr
 import type { TemplateParams } from '@openmrs/esm-config';
 import { navigate, interpolateUrl } from '@openmrs/esm-config';
 
-function handleClick(event: MouseEvent, to: string, templateParams?: TemplateParams) {
+function handleClick(event: MouseEvent, to: string, templateParams?: TemplateParams, onBeforeNavigate?: () => void) {
   if (!event.metaKey && !event.ctrlKey && !event.shiftKey && event.button == 0) {
     event.preventDefault();
+    onBeforeNavigate?.();
     navigate({ to, templateParams });
   }
 }
@@ -16,25 +17,28 @@ function handleClick(event: MouseEvent, to: string, templateParams?: TemplatePar
 export interface ConfigurableLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string;
   templateParams?: TemplateParams;
+  onBeforeNavigate?: () => void;
 }
 
 /**
  * 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 templateParams: A dictionary of values to interpolate into the URL, in addition to the default keys `openmrsBase` and `openmrsSpaBase`.
+ * @param onBeforeNavigate A callback to be called just before navigation occurs
  * @param children Inline elements within the link
  * @param otherProps Any other valid props for an <a> tag except `href` and `onClick`
  */
 export function ConfigurableLink({
   to,
   templateParams,
+  onBeforeNavigate,
   children,
   ...otherProps
 }: PropsWithChildren<ConfigurableLinkProps>) {
   return (
     <a
-      onClick={(event) => handleClick(event, to, templateParams)}
+      onClick={(event) => handleClick(event, to, templateParams, onBeforeNavigate)}
       href={interpolateUrl(to, templateParams)}
       {...otherProps}
     >