@openmrs/esm-react-utils 5.8.2-pre.2389 → 5.8.2-pre.2393

package/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
   },
   setupFilesAfterEnv: ['<rootDir>/src/setup-tests.js'],
   moduleNameMapper: {
+    '^lodash-es$': 'lodash',
     '^lodash-es/(.*)$': 'lodash/$1',
     '@openmrs/esm-error-handling': '<rootDir>/__mocks__/openmrs-esm-error-handling.mock.ts',
     '@openmrs/esm-state': '@openmrs/esm-state/mock',

package/package.json

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

package/src/Extension.tsx

@@ -1,17 +1,12 @@
 /** @module @category Extension */
 import { renderExtension } from '@openmrs/esm-extensions';
-import React, { useCallback, useContext, useEffect, useRef, useState, type ReactElement } from 'react';
-import type { Parcel } from 'single-spa';
+import React, { useCallback, useContext, useEffect, useRef, useState } 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);
-  };
+export type ExtensionProps = React.HTMLAttributes<HTMLDivElement> & {
+  state?: Record<string, unknown>;
+};
 
 /**
  * Represents the position in the DOM where each extension within
@@ -22,24 +17,13 @@ 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, ...divProps }) => {
   const [domElement, setDomElement] = useState<HTMLDivElement>();
   const { extension } = useContext(ComponentContext);
   const parcel = useRef<Parcel | null>(null);
   const updatePromise = useRef<Promise<void>>(Promise.resolve());
   const rendering = useRef<boolean>(false);
 
-  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
-  }, []);
-
   const ref = useCallback(
     (node: HTMLDivElement) => {
       setDomElement(node);
@@ -123,13 +107,9 @@ export const Extension: React.FC<ExtensionProps> = ({ state, children, wrap, ...
   // The extension is rendered into the `<div>`. The `<div>` has relative
   // 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} />
-  );
-
-  if (typeof children === 'function' && !React.isValidElement(children)) {
-    return <>{children(slot, extension)}</>;
-  }
-
-  return extension && wrap ? wrap(slot, extension) : slot;
+  return extension ? (
+    <div ref={ref} data-extension-id={extension?.extensionId} style={{ position: 'relative' }} {...divProps}>
+      {children}
+    </div>
+  ) : null;
 };

package/src/ExtensionSlot.tsx

@@ -1,6 +1,6 @@
 /** @module @category Extension */
 import React, { useRef, useMemo } from 'react';
-import type { ConnectedExtension } from '@openmrs/esm-extensions';
+import { type AssignedExtension } from '@openmrs/esm-extensions';
 import { ComponentContext } from './ComponentContext';
 import { Extension } from './Extension';
 import { useExtensionSlot } from './useExtensionSlot';
@@ -9,24 +9,24 @@ export interface ExtensionSlotBaseProps {
   name: string;
   /** @deprecated Use `name` */
   extensionSlotName?: string;
-  select?: (extensions: Array<ConnectedExtension>) => Array<ConnectedExtension>;
-  state?: Record<string, any>;
+  select?: (extensions: Array<AssignedExtension>) => Array<AssignedExtension>;
+  state?: Record<string, unknown>;
 }
 
 export interface OldExtensionSlotBaseProps {
   name?: string;
   /** @deprecated Use `name` */
   extensionSlotName: string;
-  select?: (extensions: Array<ConnectedExtension>) => Array<ConnectedExtension>;
-  state?: Record<string, any>;
+  select?: (extensions: Array<AssignedExtension>) => Array<AssignedExtension>;
+  state?: Record<string, unknown>;
 }
 
 export type ExtensionSlotProps = (OldExtensionSlotBaseProps | ExtensionSlotBaseProps) &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
-    children?: React.ReactNode | ((extension: ConnectedExtension) => React.ReactNode);
+    children?: React.ReactNode | ((extension: AssignedExtension, state?: Record<string, unknown>) => React.ReactNode);
   };
 
-function defaultSelect(extensions: Array<ConnectedExtension>) {
+function defaultSelect(extensions: Array<AssignedExtension>) {
   return extensions;
 }
 
@@ -101,7 +101,7 @@ export function ExtensionSlot({
 
   const extensionsFromChildrenFunction = useMemo(() => {
     if (typeof children == 'function' && !React.isValidElement(children)) {
-      return extensionsToRender.map((extension) => children(extension));
+      return extensionsToRender.map((extension) => children(extension, state));
     }
   }, [children, extensionsToRender]);
 
@@ -114,7 +114,7 @@ export function ExtensionSlot({
       {...divProps}
     >
       {name &&
-        extensionsToRender.map((extension, i) => (
+        extensionsToRender?.map((extension, i) => (
           <ComponentContext.Provider
             key={extension.id}
             value={{
@@ -127,7 +127,7 @@ export function ExtensionSlot({
               },
             }}
           >
-            {extensionsFromChildrenFunction?.[i] ?? (typeof children != 'function' ? children : null) ?? (
+            {extensionsFromChildrenFunction?.[i] ?? (typeof children !== 'function' ? children : null) ?? (
               <Extension state={state} />
             )}
           </ComponentContext.Provider>

package/src/extensions.test.tsx

@@ -122,21 +122,15 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
       disableTranslations: true,
     })(() => {
       const metas = useExtensionSlotMeta('Box');
-      const wrapItem = useCallback(
-        (slot: React.ReactNode, extension?: ExtensionData) => {
-          return (
-            <div>
-              <h1>{metas[getExtensionNameFromId(extension?.extensionId ?? '')].code}</h1>
-              {slot}
-            </div>
-          );
-        },
-        [metas],
-      );
       return (
         <div>
           <ExtensionSlot name="Box">
-            <Extension>{wrapItem}</Extension>
+            {(extension) => (
+              <div>
+                <h1>{metas[getExtensionNameFromId(extension?.id ?? '')].code}</h1>
+                <Extension />
+              </div>
+            )}
           </ExtensionSlot>
         </div>
       );
@@ -163,21 +157,15 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
     })(() => {
       const [suffix, toggleSuffix] = useReducer((suffix) => (suffix == '!' ? '?' : '!'), '!');
       const metas = useExtensionSlotMeta('Box');
-      const wrapItem = useCallback(
-        (slot: React.ReactNode, extension?: ExtensionData) => {
-          return (
-            <div>
-              <h1>{metas[getExtensionNameFromId(extension?.extensionId ?? '')].code}</h1>
-              {slot}
-            </div>
-          );
-        },
-        [metas],
-      );
       return (
         <div>
           <ExtensionSlot name="Box">
-            <Extension state={{ suffix }}>{wrapItem}</Extension>
+            {(extension) => (
+              <div>
+                <h1>{metas[getExtensionNameFromId(extension?.id ?? '')].code}</h1>
+                <Extension state={{ suffix }} />
+              </div>
+            )}
           </ExtensionSlot>
           <button onClick={toggleSuffix}>Toggle suffix</button>
         </div>
@@ -209,7 +197,7 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
       return (
         <div>
           <ExtensionSlot name="Box">
-            {(extension: ConnectedExtension) => (
+            {(extension) => (
               <div data-testid={extension.name}>
                 <h2>{extension.meta.code}</h2>
                 <Extension />
@@ -226,33 +214,6 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
     expect(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');
-  });
-
   test('Extensions behind feature flags only render when their feature flag is enabled', async () => {
     registerSimpleExtension('Arabic', 'esm-languages-app');
     registerSimpleExtension('Turkish', 'esm-languages-app', undefined, undefined, 'turkic');

package/src/index.ts

@@ -20,6 +20,7 @@ export * from './useDefineAppContext';
 export * from './useExtensionInternalStore';
 export * from './useExtensionSlot';
 export * from './useExtensionSlotMeta';
+export * from './useExtensionSlotStore';
 export * from './useExtensionStore';
 export * from './useFeatureFlag';
 export * from './useForceUpdate';

package/src/public.ts

@@ -18,6 +18,7 @@ export * from './useDebounce';
 export * from './useDefineAppContext';
 export * from './useExtensionSlotMeta';
 export * from './useExtensionStore';
+export * from './useExtensionSlotStore';
 export * from './useFeatureFlag';
 export * from './useLayoutType';
 export * from './useLocations';

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 { isEqual } from 'lodash-es';
 
 /**
  * Gets the assigned extension ids for a given extension slot name.

package/src/useAssignedExtensions.ts

@@ -1,18 +1,11 @@
 /** @module @category Extension */
-import { useMemo } from 'react';
-import { useExtensionStore } from './useExtensionStore';
+import { useExtensionSlotStore } from './useExtensionSlotStore';
 
 /**
  * Gets the assigned extensions for a given extension slot name.
- * Does not consider if offline or online.
  * @param slotName The name of the slot to get the assigned extensions for.
  */
 export function useAssignedExtensions(slotName: string) {
-  const { slots } = useExtensionStore();
-
-  const extensions = useMemo(() => {
-    return slots[slotName]?.assignedExtensions ?? [];
-  }, [slots, slotName]);
-
-  return extensions;
+  const slotStore = useExtensionSlotStore(slotName);
+  return slotStore?.assignedExtensions;
 }

package/src/useConnectedExtensions.ts

@@ -1,31 +1,10 @@
 /** @module @category Extension */
-import { useMemo } from 'react';
-import type { ConnectedExtension } from '@openmrs/esm-extensions';
-import { getConnectedExtensions } from '@openmrs/esm-extensions';
-import { useConnectivity } from './useConnectivity';
+import { type ConnectedExtension } from '@openmrs/esm-extensions';
 import { useAssignedExtensions } from './useAssignedExtensions';
-import { useStore } from './useStore';
-import { featureFlagsStore } from '@openmrs/esm-feature-flags';
 
 /**
  * Gets the assigned extension for a given extension slot name.
- * Considers if offline or online, and what feature flags are enabled.
  * @param slotName The name of the slot to get the assigned extensions for.
+ * @deprecated Use useAssignedExtensions instead
  */
-export function useConnectedExtensions(slotName: string): Array<ConnectedExtension> {
-  const online = useConnectivity();
-  const assignedExtensions = useAssignedExtensions(slotName);
-  const featureFlagStore = useStore(featureFlagsStore);
-
-  const enabledFeatureFlags = useMemo(() => {
-    return Object.entries(featureFlagStore.flags)
-      .filter(([, { enabled }]) => enabled)
-      .map(([name]) => name);
-  }, [featureFlagStore.flags]);
-
-  const connectedExtensions = useMemo(() => {
-    return getConnectedExtensions(assignedExtensions, online, enabledFeatureFlags);
-  }, [assignedExtensions, online, enabledFeatureFlags]);
-
-  return connectedExtensions;
-}
+export const useConnectedExtensions = useAssignedExtensions as (slotName: string) => Array<ConnectedExtension>;

package/src/useExtensionSlot.ts

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { registerExtensionSlot } from '@openmrs/esm-extensions';
 import { ComponentContext } from './ComponentContext';
-import { useConnectedExtensions } from './useConnectedExtensions';
+import { useAssignedExtensions } from './useAssignedExtensions';
 
 /** @internal */
 export function useExtensionSlot(slotName: string) {
@@ -15,7 +15,7 @@ export function useExtensionSlot(slotName: string) {
     registerExtensionSlot(moduleName, slotName);
   }, []);
 
-  const extensions = useConnectedExtensions(slotName);
+  const extensions = useAssignedExtensions(slotName);
 
   return {
     extensions,

package/src/useExtensionSlotMeta.ts

@@ -1,14 +1,14 @@
 /** @module @category Extension */
 import type { ExtensionMeta } from '@openmrs/esm-extensions';
 import { useMemo } from 'react';
-import { useConnectedExtensions } from './useConnectedExtensions';
+import { useAssignedExtensions } from './useAssignedExtensions';
 
 /**
  * Extract meta data from all extension for a given extension slot.
  * @param extensionSlotName
  */
 export function useExtensionSlotMeta<T = ExtensionMeta>(extensionSlotName: string) {
-  const extensions = useConnectedExtensions(extensionSlotName);
+  const extensions = useAssignedExtensions(extensionSlotName);
 
   return useMemo(() => Object.fromEntries(extensions.map((ext) => [ext.name, ext.meta as T])), [extensions]);
 }

package/src/useExtensionSlotStore.ts

@@ -0,0 +1,6 @@
+/** @module @category Extension */
+import { type ExtensionSlotState, type ExtensionStore, getExtensionStore } from '@openmrs/esm-extensions';
+import { useStore } from './useStore';
+
+export const useExtensionSlotStore = (slot: string) =>
+  useStore<ExtensionStore, ExtensionSlotState>(getExtensionStore(), (state) => state.slots?.[slot]);

package/src/useExtensionStore.ts

@@ -1,6 +1,5 @@
 /** @module @category Extension */
-import type { ExtensionStore } from '@openmrs/esm-extensions';
-import { getExtensionStore } from '@openmrs/esm-extensions';
+import { type ExtensionStore, getExtensionStore } from '@openmrs/esm-extensions';
 import { createUseStore } from './useStore';
 
 export const useExtensionStore = createUseStore<ExtensionStore>(getExtensionStore());

package/src/useStore.ts

@@ -17,7 +17,7 @@ function bindActions<T>(store: StoreApi<T>, actions: Actions<T>): BoundActions {
   const bound = {};
 
   for (let i in actions) {
-    bound[i] = function (...args) {
+    bound[i] = function (...args: Array<unknown>) {
       store.setState((state) => {
         let _args = [state, ...args];
         return actions[i](..._args);
@@ -28,13 +28,16 @@ function bindActions<T>(store: StoreApi<T>, actions: Actions<T>): BoundActions {
   return bound;
 }
 
-const defaultSelectFunction = (x) => x;
+const defaultSelectFunction =
+  <T, U>() =>
+  (x: T) =>
+    x as unknown as U;
 
 function useStore<T, U>(store: StoreApi<T>): T;
 function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U): U;
 function useStore<T, U>(store: StoreApi<T>, select: undefined, actions: Actions<T>): T & BoundActions;
 function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U, actions: Actions<T>): U & BoundActions;
-function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U = defaultSelectFunction, actions?: Actions<T>) {
+function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U = defaultSelectFunction(), actions?: Actions<T>) {
   const [state, setState] = useState<U>(() => select(store.getState()));
   useEffect(() => subscribeTo(store, select, setState), [store, select]);
 
@@ -50,7 +53,7 @@ function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U = defaultSel
  * @returns
  */
 function useStoreWithActions<T>(store: StoreApi<T>, actions: Actions<T>): T & BoundActions {
-  return useStore(store, defaultSelectFunction, actions);
+  return useStore(store, defaultSelectFunction<T, T>(), actions);
 }
 
 /**