@openmrs/esm-react-utils 10.0.1-pre.5263 → 10.0.1-pre.5299

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 53 files with swc (130.4ms)
+[0] Successfully compiled: 55 files with swc (217.11ms)
 [0] swc --strip-leading-paths src -d dist exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/Extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Extension.d.ts","sourceRoot":"","sources":["../src/Extension.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAI1E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+E9C,CAAC"}
+{"version":3,"file":"Extension.d.ts","sourceRoot":"","sources":["../src/Extension.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAI1E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuI9C,CAAC"}

package/dist/Extension.js

@@ -13,58 +13,100 @@ import { ComponentContext } from "./index.js";
     const { extension } = useContext(ComponentContext);
     const parcel = useRef(null);
     const updatePromise = useRef(Promise.resolve());
+    const isUnmounted = useRef(false);
+    const isRendering = useRef(false);
+    const latestState = useRef(state);
+    // Takes the parcel to tear down rather than reading `parcel.current`, which can be reassigned
+    // between scheduling this and running it.
+    const unmountParcel = useCallback((target)=>{
+        if (!target) {
+            return;
+        }
+        const unmountWhenMounted = ()=>{
+            if (target.getStatus() === 'MOUNTED') {
+                target.unmount();
+            }
+        };
+        switch(target.getStatus()){
+            case 'MOUNTED':
+                target.unmount();
+                break;
+            case 'UPDATING':
+                // The rejection is reported by whoever owns `updatePromise`; here it only matters that a
+                // failed update still runs the teardown, or the parcel is left broken and mounted.
+                updatePromise.current?.then(unmountWhenMounted, unmountWhenMounted);
+                break;
+            default:
+                // Any other status: the parcel either hasn't finished coming up or is already gone.
+                // `mountPromise` has settled or will, and `unmountWhenMounted` re-checks the status.
+                target.mountPromise.then(unmountWhenMounted, ()=>{});
+        }
+    }, []);
+    const applyUpdate = useCallback((target, nextState)=>{
+        if (!target.update || target.getStatus() === 'UNMOUNTING') {
+            return;
+        }
+        // Every later update chains onto this promise, so it has to settle even when an update fails.
+        updatePromise.current = Promise.all([
+            target.mountPromise,
+            updatePromise.current
+        ]).then(()=>{
+            if (parcel.current?.getStatus() === 'MOUNTED' && parcel.current.update) {
+                return parcel.current.update({
+                    ...nextState
+                });
+            }
+        }).catch((err)=>{
+            // A parcel torn down while its update was in flight rejects, and that race is expected.
+            // We use the status to distinguish reject reasons as the message isn't reliable
+            const status = parcel.current?.getStatus();
+            if (status !== 'UNMOUNTING' && status !== 'NOT_MOUNTED' && status !== 'UNLOADING') {
+                console.error(`The extension '${extension?.extensionId}' failed to update`, err);
+            }
+        });
+    }, []);
     const ref = useCallback((node)=>{
-        if (extension?.extensionSlotName && extension.extensionSlotModuleName && extension.extensionSlotModuleName && !parcel.current) {
-            renderExtension(node, extension.extensionSlotName, extension.extensionSlotModuleName, extension.extensionId, undefined, state).then((newParcel)=>{
-                parcel.current = newParcel;
-            });
+        // React detaches a ref by calling it with null. If we render something in response to this,
+        // React ignores it and we're left tracking a parcel with no visible DOM, so skip conditions
+        // we can't handle.
+        if (!node || parcel.current || isRendering.current || !extension?.extensionSlotName || !extension.extensionSlotModuleName) {
+            return;
         }
+        isRendering.current = true;
+        renderExtension(node, extension.extensionSlotName, extension.extensionSlotModuleName, extension.extensionId, undefined, state).then((newParcel)=>{
+            isRendering.current = false;
+            parcel.current = newParcel;
+            // Loading an extension's bundle can outlast the component that asked for it: the cleanup
+            // effect has already run and saw no parcel, so teardown has to happen here instead, or the
+            // parcel mounts into a detached node and its rendering record outlives the page.
+            if (isUnmounted.current) {
+                unmountParcel(newParcel);
+                return;
+            }
+            // Ensure we update the state of the parcel to the latest version we've received
+            if (newParcel && latestState.current !== state) {
+                applyUpdate(newParcel, latestState.current);
+            }
+        }, // Cleared so a later reattach can try again; `renderExtension` reports its own failures.
+        ()=>{
+            isRendering.current = false;
+        });
     }, []);
     useEffect(()=>{
+        // Reset on every run, not just the first: StrictMode mounts, tears down and mounts again, so
+        // a flag only ever set by the cleanup would still read "unmounted" for the live component.
+        isUnmounted.current = false;
         return ()=>{
-            if (parcel && parcel.current) {
-                const status = parcel.current.getStatus();
-                switch(status){
-                    case 'MOUNTING':
-                        parcel.current.mountPromise.then(()=>{
-                            if (parcel.current?.getStatus() === 'MOUNTED') {
-                                parcel.current.unmount();
-                            }
-                        });
-                        break;
-                    case 'MOUNTED':
-                        parcel.current.unmount();
-                        break;
-                    case 'UPDATING':
-                        if (updatePromise.current) {
-                            updatePromise.current.then(()=>{
-                                if (parcel.current?.getStatus() === 'MOUNTED') {
-                                    parcel.current.unmount();
-                                }
-                            });
-                        }
-                }
-            }
+            isUnmounted.current = true;
+            unmountParcel(parcel.current);
         };
     }, []);
     useEffect(()=>{
-        if (parcel.current && parcel.current.update && parcel.current.getStatus() !== 'UNMOUNTING') {
-            Promise.all([
-                parcel.current.mountPromise,
-                updatePromise.current
-            ]).then(()=>{
-                if (parcel?.current?.getStatus() === 'MOUNTED' && parcel.current.update) {
-                    updatePromise.current = parcel.current.update({
-                        ...state
-                    }).catch((err)=>{
-                        // if we were trying to update but the component was unmounted
-                        // while this was happening, ignore the error
-                        if (!(err instanceof Error) || !err.message.includes('minified message #32') || parcel.current?.getStatus() === 'MOUNTED') {
-                            throw err;
-                        }
-                    });
-                }
-            });
+        // Recorded before the parcel is checked, so that a state that arrives before there is a parcel
+        // to receive it is still the one applied once there is.
+        latestState.current = state;
+        if (parcel.current) {
+            applyUpdate(parcel.current, state);
         }
     }, [
         state

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export * from './useAbortController';
 export * from './useAppContext';
 export * from './useAssignedExtensionIds';
 export * from './useAssignedExtensions';
+export * from './useCandidateExtensions';
+export * from './useShallowStableValue';
 export * from './useAttachments';
 export * from './useBodyScrollLock';
 export * from './useConfig';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,KAAK,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAC/F,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,KAAK,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAC/F,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -10,6 +10,8 @@ export * from "./useAbortController.js";
 export * from "./useAppContext.js";
 export * from "./useAssignedExtensionIds.js";
 export * from "./useAssignedExtensions.js";
+export * from "./useCandidateExtensions.js";
+export * from "./useShallowStableValue.js";
 export * from "./useAttachments.js";
 export * from "./useBodyScrollLock.js";
 export * from "./useConfig.js";

package/dist/useAssignedExtensionIds.d.ts

@@ -1,6 +1,6 @@
 /**
  * Gets the assigned extension ids for a given extension slot name.
- * Does not consider if offline or online.
+ *
  * @param slotName The name of the slot to get the assigned IDs for.
  *
  * @deprecated Use `useAssignedExtensions`

package/dist/useAssignedExtensionIds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAssignedExtensionIds.d.ts","sourceRoot":"","sources":["../src/useAssignedExtensionIds.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,YAavD"}
+{"version":3,"file":"useAssignedExtensionIds.d.ts","sourceRoot":"","sources":["../src/useAssignedExtensionIds.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,YAIvD"}

package/dist/useAssignedExtensionIds.js

@@ -1,21 +1,14 @@
-/** @module @category Extension */ import { useEffect, useState } from "react";
-import { getExtensionStore } from "@openmrs/esm-extensions";
-import { isEqual } from "lodash-es";
+/** @module @category Extension */ import { useMemo } from "react";
+import { useAssignedExtensions } from "./useAssignedExtensions.js";
 /**
  * Gets the assigned extension ids for a given extension slot name.
- * Does not consider if offline or online.
+ *
  * @param slotName The name of the slot to get the assigned IDs for.
  *
  * @deprecated Use `useAssignedExtensions`
  */ export function useAssignedExtensionIds(slotName) {
-    const [ids, setIds] = useState([]);
-    useEffect(()=>{
-        return getExtensionStore().subscribe((state)=>{
-            const newIds = state.slots[slotName]?.assignedExtensions.map((e)=>e.id) ?? [];
-            if (!isEqual(newIds, ids)) {
-                setIds(newIds);
-            }
-        });
-    }, []);
-    return ids;
+    const assignedExtensions = useAssignedExtensions(slotName);
+    return useMemo(()=>assignedExtensions.map((extension)=>extension.id), [
+        assignedExtensions
+    ]);
 }

package/dist/useAssignedExtensions.d.ts

@@ -1,6 +1,18 @@
+import { type ExtensionSlotCustomState } from '@openmrs/esm-extensions';
 /**
  * Gets the assigned extensions for a given extension slot name.
+ *
+ * The reactive form of `getAssignedExtensions`, and it answers the same thing: display conditions
+ * are always applied, so the result is what should actually be displayed. Pass `state` whenever you
+ * know it: the same slot can be rendered in several places at once with different state, so
+ * conditions are resolved against the state of this rendering. Omitting it resolves them against
+ * the session alone, hiding any extension whose condition depends on state.
+ *
+ * The returned array is a copy, so sorting or filtering it in place can't corrupt the extension
+ * store. Its reference is stable for as long as the slot's extensions, the state and the session are.
+ *
  * @param slotName The name of the slot to get the assigned extensions for.
+ * @param state The state of this rendering of the slot.
  */
-export declare function useAssignedExtensions(slotName: string): import("@openmrs/esm-extensions").AssignedExtension[];
+export declare function useAssignedExtensions(slotName: string, state?: ExtensionSlotCustomState): import("@openmrs/esm-extensions").AssignedExtension[];
 //# sourceMappingURL=useAssignedExtensions.d.ts.map

package/dist/useAssignedExtensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAssignedExtensions.d.ts","sourceRoot":"","sources":["../src/useAssignedExtensions.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,yDAGrD"}
+{"version":3,"file":"useAssignedExtensions.d.ts","sourceRoot":"","sources":["../src/useAssignedExtensions.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,wBAAwB,EAAyB,MAAM,yBAAyB,CAAC;AAO/F;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,wBAAwB,yDAYvF"}

package/dist/useAssignedExtensions.js

@@ -1,8 +1,35 @@
-/** @module @category Extension */ import { useExtensionSlotStore } from "./useExtensionSlotStore.js";
+/** @module @category Extension */ import { useMemo } from "react";
+import { sessionStore } from "@openmrs/esm-api";
+import { getAssignedExtensions } from "@openmrs/esm-extensions";
+import { useShallowStableValue } from "./useShallowStableValue.js";
+import { useExtensionSlotStore } from "./useExtensionSlotStore.js";
+import { useStore } from "./useStore.js";
+const selectSession = (state)=>state.session;
 /**
  * Gets the assigned extensions for a given extension slot name.
+ *
+ * The reactive form of `getAssignedExtensions`, and it answers the same thing: display conditions
+ * are always applied, so the result is what should actually be displayed. Pass `state` whenever you
+ * know it: the same slot can be rendered in several places at once with different state, so
+ * conditions are resolved against the state of this rendering. Omitting it resolves them against
+ * the session alone, hiding any extension whose condition depends on state.
+ *
+ * The returned array is a copy, so sorting or filtering it in place can't corrupt the extension
+ * store. Its reference is stable for as long as the slot's extensions, the state and the session are.
+ *
  * @param slotName The name of the slot to get the assigned extensions for.
- */ export function useAssignedExtensions(slotName) {
-    const slotStore = useExtensionSlotStore(slotName);
-    return slotStore?.assignedExtensions ?? [];
+ * @param state The state of this rendering of the slot.
+ */ export function useAssignedExtensions(slotName, state) {
+    // Subscribes so that this re-runs when the slot's extensions change; `getAssignedExtensions` reads
+    // the same store, so the value below is what it is about to return.
+    const { candidateExtensions } = useExtensionSlotStore(slotName);
+    // Display conditions may refer to `session`, so they have to be re-evaluated when it changes.
+    const session = useStore(sessionStore, selectSession);
+    const stableState = useShallowStableValue(state);
+    return useMemo(()=>getAssignedExtensions(slotName, stableState), [
+        slotName,
+        stableState,
+        session,
+        candidateExtensions
+    ]);
 }

package/dist/useCandidateExtensions.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The reactive form of `getCandidateExtensions`: everything assigned to a slot, with no display
+ * condition evaluated. Intended for tools that present a slot's configuration rather than render it.
+ *
+ * Use {@link useAssignedExtensions} to decide what to display.
+ *
+ * @param slotName The name of the slot to get the candidate extensions for.
+ * @internal
+ */
+export declare function useCandidateExtensions(slotName: string): import("@openmrs/esm-extensions").AssignedExtension[];
+//# sourceMappingURL=useCandidateExtensions.d.ts.map

package/dist/useCandidateExtensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCandidateExtensions.d.ts","sourceRoot":"","sources":["../src/useCandidateExtensions.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,yDAEtD"}

package/dist/useCandidateExtensions.js

@@ -0,0 +1,12 @@
+/** @module @category Extension */ import { useExtensionSlotStore } from "./useExtensionSlotStore.js";
+/**
+ * The reactive form of `getCandidateExtensions`: everything assigned to a slot, with no display
+ * condition evaluated. Intended for tools that present a slot's configuration rather than render it.
+ *
+ * Use {@link useAssignedExtensions} to decide what to display.
+ *
+ * @param slotName The name of the slot to get the candidate extensions for.
+ * @internal
+ */ export function useCandidateExtensions(slotName) {
+    return useExtensionSlotStore(slotName).candidateExtensions;
+}

package/dist/useExtensionSlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExtensionSlot.d.ts","sourceRoot":"","sources":["../src/useExtensionSlot.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,wBAAwB,EAG9B,MAAM,yBAAyB,CAAC;AAIjC,gBAAgB;AAChB,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,wBAAwB;;;;EA0BlF"}
+{"version":3,"file":"useExtensionSlot.d.ts","sourceRoot":"","sources":["../src/useExtensionSlot.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAyB,MAAM,yBAAyB,CAAC;AAI/F,gBAAgB;AAChB,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,wBAAwB;;;;EAoBlF"}

package/dist/useExtensionSlot.js

@@ -1,26 +1,21 @@
-import { useContext, useEffect, useRef } from "react";
-import { registerExtensionSlot, updateExtensionSlotState } from "@openmrs/esm-extensions";
+import { useContext, useEffect } from "react";
+import { registerExtensionSlot } from "@openmrs/esm-extensions";
 import { ComponentContext } from "./ComponentContext.js";
 import { useAssignedExtensions } from "./useAssignedExtensions.js";
 /** @internal */ export function useExtensionSlot(slotName, state) {
     const { moduleName } = useContext(ComponentContext);
-    const isInitialRender = useRef(true);
     if (!moduleName) {
         throw Error('ComponentContext has not been provided. This should come from @openmrs/esm-react-utils.');
     }
     useEffect(()=>{
-        registerExtensionSlot(moduleName, slotName, state);
-        isInitialRender.current = false;
-    }, []);
-    useEffect(()=>{
-        if (!isInitialRender.current) {
-            updateExtensionSlotState(slotName, state);
-        }
+        registerExtensionSlot(moduleName, slotName);
     }, [
-        slotName,
-        state
+        moduleName,
+        slotName
     ]);
-    const extensions = useAssignedExtensions(slotName);
+    // `state` must be local to the rendering rather than written to the store as state is
+    // render-specific
+    const extensions = useAssignedExtensions(slotName, state);
     return {
         extensions,
         extensionSlotName: slotName,

package/dist/useExtensionSlotStore.d.ts

@@ -1,4 +1,3 @@
-/** @module @category Extension */
 import { type ExtensionSlotState } from '@openmrs/esm-extensions';
 export declare const useExtensionSlotStore: (slot: string) => ExtensionSlotState;
 //# sourceMappingURL=useExtensionSlotStore.d.ts.map

package/dist/useExtensionSlotStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExtensionSlotStore.d.ts","sourceRoot":"","sources":["../src/useExtensionSlotStore.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,KAAK,kBAAkB,EAA0C,MAAM,yBAAyB,CAAC;AAG1G,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,uBACiD,CAAC"}
+{"version":3,"file":"useExtensionSlotStore.d.ts","sourceRoot":"","sources":["../src/useExtensionSlotStore.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,kBAAkB,EAGxB,MAAM,yBAAyB,CAAC;AAcjC,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,uBAIjD,CAAC"}

package/dist/useExtensionSlotStore.js

@@ -1,3 +1,20 @@
-/** @module @category Extension */ import { getExtensionStore } from "@openmrs/esm-extensions";
+/** @module @category Extension */ import { useCallback } from "react";
+import { getExtensionStore } from "@openmrs/esm-extensions";
 import { useStore } from "./useStore.js";
-export const useExtensionSlotStore = (slot)=>useStore(getExtensionStore(), (state)=>state.slots?.[slot]);
+/**
+ * Stands in for a slot that has not been registered or attached to. Shared rather than built per
+ * call, so the snapshot stays reference-stable across renders — and frozen because that sharing
+ * means an in-place sort or push would otherwise corrupt every unregistered slot in the page.
+ */ const emptyCandidates = [];
+Object.freeze(emptyCandidates);
+const emptySlotState = {
+    candidateExtensions: emptyCandidates
+};
+Object.freeze(emptySlotState);
+export const useExtensionSlotStore = (slot)=>{
+    // Memoized so that `useStore`'s snapshot function is stable across renders.
+    const select = useCallback((state)=>state.slots?.[slot] ?? emptySlotState, [
+        slot
+    ]);
+    return useStore(getExtensionStore(), select);
+};

package/dist/useFhirPagination.d.ts

@@ -28,7 +28,7 @@ export declare function useFhirPagination<T extends fhir.ResourceBase>(url: stri
     totalPages: number;
     totalCount: number;
     currentPage: number;
-    currentPageSize: import("react").MutableRefObject<number>;
+    currentPageSize: number;
     paginated: boolean;
     showNextButton: boolean;
     showPreviousButton: boolean;

package/dist/useOpenmrsPagination.d.ts

@@ -61,7 +61,7 @@ export declare function useOpenmrsPagination<T>(url: string | URL, pageSize: num
     totalPages: number;
     totalCount: number;
     currentPage: number;
-    currentPageSize: import("react").MutableRefObject<number>;
+    currentPageSize: number;
     paginated: boolean;
     showNextButton: boolean;
     showPreviousButton: boolean;
@@ -87,7 +87,7 @@ export declare function useServerPagination<T, R>(url: string | URL, pageSize: n
     totalPages: number;
     totalCount: number;
     currentPage: number;
-    currentPageSize: import("react").MutableRefObject<number>;
+    currentPageSize: number;
     paginated: boolean;
     showNextButton: boolean;
     showPreviousButton: boolean;

package/dist/useOpenmrsPagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOpenmrsPagination.d.ts","sourceRoot":"","sources":["../src/useOpenmrsPagination.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,KAAK,aAAa,EAAyB,MAAM,kBAAkB,CAAC;AAE7E,OAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAGpD,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,GAAG,EAAE,MAAM,GAAG,GAAG,EACjB,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,0BAA0B,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAM;;;;;;;;;;;;;iBAgF5D,MAAM;;;EA7EhB;AAED,KAAK,+BAA+B,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC;AACnG,eAAO,MAAM,+BAA+B,EAAE,+BAA+B,CAAC,GAAG,CA6BhF,CAAC;AAEF,MAAM,WAAW,wBAAwB,CAAC,CAAC,EAAE,CAAC;IAC5C,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACzF,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IACnD,kBAAkB,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IACxD,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;CAC5D;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,CAAC,EACtC,GAAG,EAAE,MAAM,GAAG,GAAG,EACjB,QAAQ,EAAE,MAAM,EAChB,wBAAwB,EAAE,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,EACxD,OAAO,GAAE,0BAA0B,CAAC,CAAC,CAAM;;;;;;;;;;;;;iBA+BlC,MAAM;;;EA+BhB"}
+{"version":3,"file":"useOpenmrsPagination.d.ts","sourceRoot":"","sources":["../src/useOpenmrsPagination.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,KAAK,aAAa,EAAyB,MAAM,kBAAkB,CAAC;AAE7E,OAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAGpD,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,GAAG,EAAE,MAAM,GAAG,GAAG,EACjB,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,0BAA0B,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAM;;;;;;;;;;;;;iBAyG5D,MAAM;;;EAtGhB;AAED,KAAK,+BAA+B,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC;AACnG,eAAO,MAAM,+BAA+B,EAAE,+BAA+B,CAAC,GAAG,CA6BhF,CAAC;AAEF,MAAM,WAAW,wBAAwB,CAAC,CAAC,EAAE,CAAC;IAC5C,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACzF,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IACnD,kBAAkB,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IACxD,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;CAC5D;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,CAAC,EACtC,GAAG,EAAE,MAAM,GAAG,GAAG,EACjB,QAAQ,EAAE,MAAM,EAChB,wBAAwB,EAAE,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,EACxD,OAAO,GAAE,0BAA0B,CAAC,CAAC,CAAM;;;;;;;;;;;;;iBAwDlC,MAAM;;;EAoEhB"}

package/dist/useOpenmrsPagination.js

@@ -1,5 +1,5 @@
 /** @module @category UI */ import { makeUrl, openmrsFetch } from "@openmrs/esm-api";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import useSWRImmutable from "swr/immutable";
 /**
@@ -65,12 +65,31 @@ export function useServerPagination(url, pageSize, serverPaginationHandlers, opt
     const { getPaginatedUrl, getTotalCount, getCurrentPageSize, getData } = serverPaginationHandlers;
     const { immutable, swrConfig } = options;
     const fetcher = options.fetcher ?? openmrsFetch;
-    const [currentPage, setCurrentPage] = useState(1); // 1-indexing instead of 0-indexing, to keep consistency with `usePagination`
+    // 1-indexing instead of 0-indexing, to keep consistency with `usePagination`
+    const [currentPage, setCurrentPage] = useState(1);
     // Cache the totalCount and currentPageSize so we don't lose them
     // as we wait for next page's result to load while navigating to a different page.
     // This can be used to prevent jarring UI changes while loading
     const totalCount = useRef(Number.NaN);
-    const currentPageSize = useRef(Number.NaN); // this value is usually same as pageSize, except when currentPage is last page.
+    // this value is usually same as pageSize, except when currentPage is last page.
+    const currentPageSize = useRef(Number.NaN);
+    // tracked as a ref so we don't need to make the current page a dependency of `goTo()`, etc.
+    const currentPageRef = useRef(currentPage);
+    // use to differentiate "endpoint doesn't return a total" from "we haven't run a request yet"
+    const hasResponded = useRef(false);
+    const warnedMissingTotal = useRef(false);
+    // if the URL we're querying changes, reset to page 1
+    const urlKey = url?.toString() ?? '';
+    const [lastUrlKey, setLastUrlKey] = useState(urlKey);
+    if (urlKey !== lastUrlKey) {
+        setLastUrlKey(urlKey);
+        setCurrentPage(1);
+        currentPageRef.current = 1;
+        totalCount.current = Number.NaN;
+        currentPageSize.current = Number.NaN;
+        hasResponded.current = false;
+        warnedMissingTotal.current = false;
+    }
     const limit = pageSize;
     const startIndex = (currentPage - 1) * pageSize;
     const urlUrl = useMemo(()=>{
@@ -85,39 +104,71 @@ export function useServerPagination(url, pageSize, serverPaginationHandlers, opt
     if (data?.data) {
         totalCount.current = getTotalCount(data?.data);
         currentPageSize.current = getCurrentPageSize(data?.data);
+        hasResponded.current = true;
     }
     const totalPages = Math.ceil(totalCount.current / pageSize);
+    // The bound is read from `totalCount` at call time rather than captured from the creating render,
+    // which is what keeps this callback referentially stable, apart from a change in `pageSize`.
     const goTo = useCallback((page)=>{
-        if (0 < page && page <= totalPages) {
+        if (!Number.isInteger(page) || page < 1) {
+            console.warn(`useServerPagination: ignoring goTo(${page}); page must be a positive integer.`);
+            return;
+        }
+        // page count is not known prior to running any query when `bound` will be `NaN`, so in this
+        // case we assume the requested page is fine; after results return, things will settle properly
+        // clamped
+        const bound = Math.ceil(totalCount.current / pageSize);
+        if (!hasResponded.current || Number.isNaN(bound) || page <= bound) {
+            currentPageRef.current = page;
             setCurrentPage(page);
         } else {
             console.warn('Invalid attempt to go to out of bounds page: ' + page);
         }
     }, [
-        url,
+        pageSize
+    ]);
+    // A page accepted before the total was known may turn out not to exist, so put the user on the last
+    // real page once the response settles it. Costs an extra request, but only for a page that was out of
+    // range to begin with; without it the hook sits on an empty page with no way back.
+    useEffect(()=>{
+        if (!hasResponded.current) {
+            return;
+        }
+        if (Number.isNaN(totalCount.current)) {
+            if (!warnedMissingTotal.current) {
+                warnedMissingTotal.current = true;
+                console.warn(`useServerPagination: ${urlKey} returned no total count, so out-of-range pages cannot be detected.`);
+            }
+            return;
+        }
+        const lastPage = Math.max(1, Math.ceil(totalCount.current / pageSize));
+        if (currentPage > lastPage) {
+            console.warn(`Invalid attempt to go to out of bounds page: ${currentPage}; returning to page ${lastPage}.`);
+            currentPageRef.current = lastPage;
+            setCurrentPage(lastPage);
+        }
+    }, [
         currentPage,
-        totalPages
+        pageSize,
+        urlKey,
+        data
     ]);
     const goToNext = useCallback(()=>{
-        goTo(currentPage + 1);
+        goTo(currentPageRef.current + 1);
     }, [
-        url,
-        currentPage,
-        totalPages
+        goTo
     ]);
     const goToPrevious = useCallback(()=>{
-        goTo(currentPage - 1);
+        goTo(currentPageRef.current - 1);
     }, [
-        url,
-        currentPage,
-        totalPages
+        goTo
     ]);
     return {
         data: getData(data?.data),
         totalPages,
         totalCount: totalCount.current,
         currentPage,
-        currentPageSize,
+        currentPageSize: currentPageSize.current,
         paginated: totalPages > 1,
         showNextButton: currentPage < totalPages,
         showPreviousButton: currentPage > 1,

package/dist/usePagination.d.ts

@@ -1,6 +1,11 @@
 /**
  * Use this hook to paginate data that already exists on the client side.
  * Note that if the data is obtained from server-side, the caller must handle server-side pagination manually.
+ *
+ * `goTo`, `goToNext` and `goToPrevious` keep the same identity for the life of the component, so they are
+ * safe to list in a dependency array. `currentPage` is bounded by the data, so it can change on its own
+ * when the data shrinks; a component reacting to `currentPage` should expect that.
+ *
  * @see `useServerPagination` for hook that automatically manages server-side pagination.
  * @see `useServerInfinite` for hook to get all data loaded onto the client-side
  * @param data

package/dist/usePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../src/usePagination.ts"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,GAAE,KAAK,CAAC,CAAC,CAAM,EAAE,cAAc,SAAwB;;;;;;;iBAiBjF,MAAM;;;EAiChB"}
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../src/usePagination.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,GAAE,KAAK,CAAC,CAAC,CAAM,EAAE,cAAc,SAAwB;;;;;;;iBAwB1D,MAAM;;;EAiCvC"}