(fix) minor fixup to have useRenderableExtensions not be a default ex… (

#986)
openmrs · Apr 29, 2024 · 8e616e5 · 8e616e5
1 parent 2a3027a
commit 8e616e5
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -108,6 +108,7 @@
 - [useConnectedExtensions](API.md#useconnectedextensions)
 - [useExtensionSlotMeta](API.md#useextensionslotmeta)
 - [useExtensionStore](API.md#useextensionstore)
+- [useRenderableExtensions](API.md#userenderableextensions)
 
 ### Feature Flags Functions
 
@@ -3120,6 +3121,49 @@ ___
 
 ___
 
+### useRenderableExtensions
+
+▸ **useRenderableExtensions**(`name`): `React.FC`<`Pick`<[`ExtensionProps`](API.md#extensionprops), ``"state"``\>\>[]
+
+This is an advanced hook for use-cases where its useful to use the extension system,
+but not the `ExtensionSlot` component's rendering of extensions. Use of this hook
+should be avoided if possible.
+
+Functionally, this hook is very similar to the `ExtensionSlot` component, but whereas
+an `ExtensionSlot` renders a DOM tree of extensions bound to the slot, this hook simply
+returns the extensions as an array of React components that can be wired into a component
+however makes sense.
+
+**`example`**
+```ts
+const extensions = useRenderableExtensions('my-extension-slot');
+return (
+ <>
+   {extensions.map((Ext, index) => (
+     <React.Fragment key={index}>
+       <Ext state={{key: 'value'}} />
+     </React.Fragment>
+   ))}
+ </>
+)
+```
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `name` | `string` | The name of the extension slot |
+
+#### Returns
+
+`React.FC`<`Pick`<[`ExtensionProps`](API.md#extensionprops), ``"state"``\>\>[]
+
+#### Defined in
+
+[packages/framework/esm-react-utils/src/useRenderableExtensions.tsx:31](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx#L31)
+
+___
+
 ## Feature Flags Functions
 
 ### getFeatureFlag

diff --git a/packages/framework/esm-react-utils/src/extensions.test.tsx b/packages/framework/esm-react-utils/src/extensions.test.tsx
@@ -15,10 +15,10 @@ import {
   openmrsComponentDecorator,
   useExtensionSlotMeta,
   type ExtensionData,
+  useRenderableExtensions,
 } from '.';
 import userEvent from '@testing-library/user-event';
 import { registerFeatureFlag, setFeatureFlag } from '@openmrs/esm-feature-flags';
-import useRenderableExtensions from './useRenderableExtensions';
 
 // For some reason in the test context `isEqual` always returns true
 // when using the import substitution in jest.config.js. Here's a custom

diff --git a/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx b/packages/framework/esm-react-utils/src/useRenderableExtensions.tsx
@@ -28,7 +28,7 @@ import { ComponentContext, Extension, type ExtensionProps, useExtensionSlot } fr
  * )
  * ```
  */
-export default function useRenderableExtensions(name: string): Array<React.FC<Pick<ExtensionProps, 'state'>>> {
+export function useRenderableExtensions(name: string): Array<React.FC<Pick<ExtensionProps, 'state'>>> {
   const { extensions, extensionSlotModuleName } = useExtensionSlot(name);
 
   return name