@openmrs/esm-react-utils 4.0.1-pre.214 → 4.0.1-pre.219

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "4.0.1-pre.214",
+  "version": "4.0.1-pre.219",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -55,11 +55,11 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^4.0.1-pre.214",
-    "@openmrs/esm-config": "^4.0.1-pre.214",
-    "@openmrs/esm-error-handling": "^4.0.1-pre.214",
-    "@openmrs/esm-extensions": "^4.0.1-pre.214",
-    "@openmrs/esm-globals": "^4.0.1-pre.214",
+    "@openmrs/esm-api": "^4.0.1-pre.219",
+    "@openmrs/esm-config": "^4.0.1-pre.219",
+    "@openmrs/esm-error-handling": "^4.0.1-pre.219",
+    "@openmrs/esm-extensions": "^4.0.1-pre.219",
+    "@openmrs/esm-globals": "^4.0.1-pre.219",
     "dayjs": "^1.10.8",
     "i18next": "^19.6.0",
     "react": "^18.1.0",
@@ -68,5 +68,5 @@
     "rxjs": "^6.5.3",
     "unistore": "^3.5.2"
   },
-  "gitHead": "0096329ba29b288471a77451224337bb052d050e"
+  "gitHead": "e4225fe2ac3947ab26751d4b618bf3aafe9059e2"
 }

package/src/ConfigurableLink.tsx

@@ -1,5 +1,9 @@
 /** @module @category Navigation */
-import React, { MouseEvent, AnchorHTMLAttributes } from "react";
+import React, {
+  MouseEvent,
+  AnchorHTMLAttributes,
+  PropsWithChildren,
+} from "react";
 import { navigate, interpolateUrl, TemplateParams } from "@openmrs/esm-config";
 
 function handleClick(
@@ -40,7 +44,7 @@ export function ConfigurableLink({
   templateParams,
   children,
   ...otherProps
-}: ConfigurableLinkProps) {
+}: PropsWithChildren<ConfigurableLinkProps>) {
   return (
     <a
       onClick={(event) => handleClick(event, to, templateParams)}

package/src/Extension.tsx

@@ -1,5 +1,6 @@
 import { renderExtension } from "@openmrs/esm-extensions";
 import React, {
+  PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
@@ -10,14 +11,18 @@ import { Parcel } from "single-spa";
 import { ComponentContext } from ".";
 import { ExtensionData } from "./ComponentContext";
 
-export interface ExtensionProps {
+export type ExtensionProps = {
   state?: Record<string, any>;
   /** @deprecated Pass a function as the child of `ExtensionSlot` instead. */
   wrap?(
     slot: React.ReactNode,
     extension: ExtensionData
   ): React.ReactElement<any, any> | null;
-}
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children?:
+      | React.ReactNode
+      | ((extension: React.ReactNode) => React.ReactNode);
+  };
 
 /**
  * Represents the position in the DOM where each extension within
@@ -28,21 +33,37 @@ export interface 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, wrap }) => {
+export const Extension: React.FC<ExtensionProps> = ({
+  state,
+  children,
+  wrap,
+  ...divProps
+}) => {
   const [domElement, setDomElement] = useState<HTMLDivElement>();
   const { extension } = useContext(ComponentContext);
   const parcel = useRef<Parcel | null>();
 
-  if (wrap) {
-    console.warn(
-      "`wrap` prop of Extension is being used. This will be removed in a future release."
-    );
-  }
-
-  const ref = useCallback((node) => {
-    setDomElement(node);
+  useEffect(() => {
+    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.`
+      );
+    }
+    // we only warn when component mounts
+    // eslint-disable-next-line eslintreact-hooks/exhaustive-deps
   }, []);
 
+  const ref = useCallback(
+    (node) => {
+      setDomElement(node);
+    },
+    [setDomElement]
+  );
+
   useEffect(() => {
     if (domElement != null && extension && !parcel.current) {
       parcel.current = renderExtension(
@@ -79,8 +100,13 @@ export const Extension: React.FC<ExtensionProps> = ({ state, wrap }) => {
       ref={ref}
       data-extension-id={extension?.extensionId}
       style={{ position: "relative" }}
+      {...divProps}
     />
   );
 
+  if (typeof children == "function" && !React.isValidElement(children)) {
+    return <>{children(slot)}</>;
+  }
+
   return extension && wrap ? wrap(slot, extension) : slot;
 };

package/src/extensions.test.tsx

@@ -254,6 +254,42 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
       within(screen.getByTestId("Hindi")).getByRole("heading")
     ).toHaveTextContent("hi");
   });
+
+  test("Extension renders with child function", async () => {
+    registerSimpleExtension("Hindi", "esm-languages-app", undefined, {
+      code: "hi",
+    });
+    attach("Box", "Hindi");
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-languages-app",
+      featureName: "Languages",
+      disableTranslations: true,
+    })(() => {
+      return (
+        <div>
+          <ExtensionSlot name="Box">
+            {() => (
+              <Extension>
+                {(slot) => <div data-testid="custom-wrapper">{slot}</div>}
+              </Extension>
+            )}
+          </ExtensionSlot>
+        </div>
+      );
+    });
+
+    render(<App />);
+
+    await waitFor(() =>
+      expect(screen.getByTestId("custom-wrapper")).toBeInTheDocument()
+    );
+
+    // essentially: is the first child of custom-wrapper the extension?
+    expect(screen.getByTestId("custom-wrapper").children[0]).toHaveAttribute(
+      "data-extension-id",
+      "Hindi"
+    );
+  });
 });
 
 function registerSimpleExtension(