@equinor/fusion-framework-react 8.0.0-next.0 → 8.0.1

package/dist/types/signalr/useSignalR.d.ts

@@ -0,0 +1,24 @@
+import { useProviderTopic } from '@equinor/fusion-framework-react-module-signalr';
+/**
+ * hook for subscribing to a topic of a SignalR hub
+ *
+ * @example
+ ```ts
+// config.ts
+import {enableSignalR} from '@equinor/fusion-framework-react-module-signalr';
+(configurator) => enableSignalR(configurator, 'notifications');
+
+// myHook.ts
+const myHook = () => {
+    const topic = useSignalR('notifications', 'foo');
+    return useObservableState(topic).next;
+}
+ ```
+ *
+ * @see {@link [module signalr](https://equinor.github.io/fusion-framework/modules/signalr)}
+ *
+ * @param hubId identifier of connection hub (must be configured)
+ * @param topicId identifier of topic to connect to
+ * @returns Topic
+ */
+export declare const useSignalR: <T>(hubId: string, topicId: string) => ReturnType<typeof useProviderTopic<T>>;

package/dist/types/useFramework.d.ts

@@ -1,12 +1,24 @@
 import type { Fusion } from '@equinor/fusion-framework';
 import type { AnyModule } from '@equinor/fusion-framework-module';
 /**
+ * React hook that returns the current Fusion Framework instance from context.
+ *
+ * @remarks
+ * The hook first looks for a framework instance provided via
+ * {@link FrameworkProvider}. If none is found it falls back to the global
+ * `window.Fusion` object. A console warning / error is emitted when the
+ * framework cannot be resolved.
+ *
+ * @template TModules - Tuple of additional module types expected on the
+ *   framework instance (used for type-narrowing only).
+ * @returns The active {@link Fusion} instance.
+ *
  * @example
  * ```ts
- * const useSometing = () => {
- *  const fusion = useFramework();
- *  return fusion.something;
- * }
+ * const useMyService = () => {
+ *   const fusion = useFramework();
+ *   return fusion.modules.http.createClient('my-service');
+ * };
  * ```
  */
 export declare const useFramework: <TModules extends Array<AnyModule> = []>() => Fusion<TModules>;

package/dist/types/useFrameworkModule.d.ts

@@ -1,12 +1,19 @@
 import type { FusionModules, FusionModulesInstance } from '@equinor/fusion-framework';
 import type { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
 /**
- * Retrieves a module from the framework instance based on its name.
+ * React hook that retrieves a module from the Fusion Framework by name.
  *
- * @template TType - The type of the module to retrieve.
- * @template TKey - The type of the module name.
- * @param name - The name of the module to retrieve.
- * @returns The requested module from the framework instance.
- * @throws Error if the requested module is not included in the framework instance.
+ * @template TType - The expected module type (used for type-narrowing).
+ * @template TKey - The module key string.
+ * @param name - The registered name of the module to retrieve.
+ * @returns The resolved module instance, or `undefined` if the module is
+ *   not registered.
+ *
+ * @example
+ * ```ts
+ * import type { HttpModule } from '@equinor/fusion-framework-module-http';
+ *
+ * const http = useFrameworkModule<HttpModule>('http');
+ * ```
  */
 export declare const useFrameworkModule: <TType extends AnyModule | unknown = unknown, TKey extends string = ModuleKey<ModuleTypes<FusionModules<[TType]>>>>(name: TKey) => TType extends AnyModule ? ModuleType<TType> | undefined : FusionModulesInstance[Extract<keyof FusionModulesInstance, TKey>] | undefined;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.0.0-next.0";
+export declare const version = "8.0.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react",
-  "version": "8.0.0-next.0",
+  "version": "8.0.1",
   "description": "",
   "main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -72,30 +72,31 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@equinor/fusion-framework": "^7.4.3-next.0",
-    "@equinor/fusion-framework-react-module": "^4.0.0-next.0",
-    "@equinor/fusion-framework-module": "^5.0.6-next.0",
-    "@equinor/fusion-observable": "^9.0.0-next.0",
-    "@equinor/fusion-framework-react-module-http": "^11.0.0-next.0"
+    "@equinor/fusion-framework": "^8.0.11",
+    "@equinor/fusion-framework-react-module": "^4.0.2",
+    "@equinor/fusion-framework-react-module-http": "^11.0.1",
+    "@equinor/fusion-observable": "^9.1.1",
+    "@equinor/fusion-framework-module": "^6.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
-    "typescript": "^5.8.2",
-    "@equinor/fusion-framework-module-feature-flag": "^2.0.0-next.0",
-    "@equinor/fusion-framework-module-app": "^7.2.0-next.0",
-    "@equinor/fusion-framework-module-msal": "^7.0.0-next.0",
-    "@equinor/fusion-framework-react-module-context": "^7.0.0-next.0",
-    "@equinor/fusion-framework-module-event": "^4.4.1-next.0"
+    "typescript": "^7.0.2",
+    "@equinor/fusion-framework-module-app": "^8.0.3",
+    "@equinor/fusion-framework-module-event": "^6.0.1",
+    "@equinor/fusion-framework-module-msal": "^10.0.2",
+    "@equinor/fusion-framework-react-module-context": "^7.0.2",
+    "@equinor/fusion-framework-module-feature-flag": "^2.0.2",
+    "@equinor/fusion-framework-react-module-signalr": "^4.0.3"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@equinor/fusion-framework-module-feature-flag": "^2.0.0-next.0",
-    "@equinor/fusion-framework-react-module-signalr": "^4.0.0-next.0"
+    "@equinor/fusion-framework-module-feature-flag": "^2.0.2",
+    "@equinor/fusion-framework-react-module-signalr": "^4.0.3"
   },
   "peerDependenciesMeta": {
     "@equinor/fusion-framework-module-event": {

package/src/Framework.tsx

@@ -4,8 +4,45 @@ import { type PropsWithChildren, type ReactNode, Suspense, useMemo } from 'react
 import { useModules } from '@equinor/fusion-framework-react-module';
 import type { ModulesInstance } from '@equinor/fusion-framework-module';
 
+/**
+ * Callback invoked during framework initialisation to configure modules.
+ *
+ * @param configurator - The framework configurator instance to apply settings to.
+ */
 type ConfigureCallback = (configurator: FrameworkConfigurator) => void;
 
+/**
+ * Declarative React component that initialises a Fusion Framework instance
+ * and provides it to descendant components via context.
+ *
+ * @remarks
+ * Internally calls {@link createFrameworkProvider} and wraps the lazy-loaded
+ * provider in a `<Suspense>` boundary. This is the recommended high-level
+ * component for portal / host applications that need to bootstrap the
+ * framework inside a React tree.
+ *
+ * @param props.configure - Callback that receives a {@link FrameworkConfigurator}
+ *   for registering modules and configuration.
+ * @param props.fallback - React node shown while the framework is initialising.
+ * @param props.parent - Optional parent module instance to inherit configuration from.
+ * @param props.children - Application content rendered after initialisation.
+ *
+ * @example
+ * ```tsx
+ * import { Framework } from '@equinor/fusion-framework-react';
+ *
+ * const App = () => (
+ *   <Framework
+ *     configure={(configurator) => {
+ *       configurator.http.configureClient('my-api', { baseUri: 'https://api.example.com' });
+ *     }}
+ *     fallback={<span>Loading…</span>}
+ *   >
+ *     <MyApp />
+ *   </Framework>
+ * );
+ * ```
+ */
 export const Framework = (
   props: PropsWithChildren<{
     readonly configure: ConfigureCallback;

package/src/app/index.ts

@@ -1,3 +1,13 @@
+/**
+ * Application React hooks.
+ *
+ * @remarks
+ * Available via the `@equinor/fusion-framework-react/app` sub-entry-point.
+ * Provides hooks and types for querying application manifests, observing
+ * the currently active app, and accessing app-level modules.
+ *
+ * @module
+ */
 export type { AppConfig, AppManifest, AppType, IApp } from '@equinor/fusion-framework-module-app';
 
 export { useCurrentApp } from './useCurrentApp';

package/src/app/useAppProvider.ts

@@ -4,11 +4,21 @@ import type { AppModule } from '@equinor/fusion-framework-module-app';
 import { useFramework } from '../useFramework';
 
 /**
- * React Hook - get appProvider interface
- * @returns framework AppModule
+ * React hook that returns the App module provider from the framework.
+ *
+ * @returns The app module instance (`AppModule`) for querying and managing
+ *   application manifests and the currently active app.
+ * @throws {Error} If the `AppModule` is not configured in the framework.
+ *
+ * @example
+ * ```ts
+ * const provider = useAppProvider();
+ * provider.getAppManifests().subscribe(console.log);
+ * ```
  */
 export const useAppProvider = (): FusionModulesInstance<[AppModule]>['app'] => {
   const provider = useFramework<[AppModule]>().modules.app;
+  // Fail fast when the AppModule has not been configured on the framework
   if (!provider) {
     throw Error('Current framework does not have AppModule configured');
   }

package/src/app/useApps.ts

@@ -12,9 +12,23 @@ type UseAppsArgs = {
 };
 
 /**
- * React Hook - Get apps from framework
- * @param args Object with filterByCurrentUser: boolean
- * @returns Object {apps, isLoading, error} where apps is Array of ApplicationManifest, isLoading is a boolean on observable complete
+ * React hook that retrieves available application manifests from the framework.
+ *
+ * @param args - Optional filtering options.
+ * @param args.filterByCurrentUser - When `true`, only apps accessible to the
+ *   current user are returned.
+ * @returns An object containing:
+ *   - `apps` — Array of {@link AppManifest} objects, or `undefined` while loading.
+ *   - `isLoading` — `true` until the observable completes.
+ *   - `error` — Any error emitted by the underlying observable.
+ *
+ * @example
+ * ```tsx
+ * const { apps, isLoading, error } = useApps({ filterByCurrentUser: true });
+ * if (isLoading) return <Spinner />;
+ * return <AppList apps={apps} />;
+ * ```
+ *
  * @since 7.1.1
  */
 export const useApps = (

package/src/app/useCurrentApp.ts

@@ -12,12 +12,33 @@ import type {
 import { useFramework } from '../useFramework';
 
 /**
- * Observers the stream of current app and return the latest application
+ * React hook that observes and returns the currently active application.
  *
- * __Warning:__ type hint templates are only hints, this does not check if the modules are actually enabled!
+ * @remarks
+ * Subscribes to the `current$` stream on the App module and returns the
+ * latest value together with helpers to change or clear the active app.
  *
- * @template TModule type hint modules which the application has configured
- * @template TEnv type hint what kind of environment config the application has
+ * **Warning:** The template parameters are compile-time hints only — the
+ * hook does not validate that the specified modules are actually enabled.
+ *
+ * @template TModules - Tuple of module types the current app is expected to
+ *   have configured (type-hint only).
+ * @template TEnv - Expected environment configuration shape (type-hint only).
+ *
+ * @returns An object containing:
+ *   - `currentApp` — The current {@link CurrentApp} instance, `null` when
+ *     explicitly cleared, or `undefined` while loading.
+ *   - `setCurrentApp(appKey)` — Sets the active app by its key.
+ *   - `clearCurrentApp()` — Clears the currently active app.
+ *   - `error` — Any error emitted by the observable.
+ *
+ * @throws {Error} If the `AppModule` is not configured in the framework.
+ *
+ * @example
+ * ```tsx
+ * const { currentApp, setCurrentApp } = useCurrentApp();
+ * return <button onClick={() => setCurrentApp('my-app')}>{currentApp?.manifest?.name}</button>;
+ * ```
  */
 export const useCurrentApp = <
   TModules extends Array<AnyModule> = [],
@@ -29,6 +50,7 @@ export const useCurrentApp = <
   error?: unknown;
 } => {
   const provider = useFramework<[AppModule]>().modules.app;
+  // Fail fast when the AppModule has not been configured on the framework
   if (!provider) {
     throw Error('Current framework does not have AppModule configured');
   }

package/src/app/useCurrentAppModule.ts

@@ -8,14 +8,20 @@ import type {
 import useCurrentAppModules from './useCurrentAppModules';
 
 /**
- * Retrieves the current app module based on the provided module key.
- * @template TType - The type of the module.
- * @template TKey - The type of the module key.
- * @param {TKey} moduleKey - The key of the module to retrieve.
- * @returns {AnyModule | null | undefined} - The current app module or null if not found.
+ * React hook that retrieves a specific module from the current application.
+ *
+ * @template TType - The expected module type.
+ * @template TKey - The module key used for look-up.
+ * @param moduleKey - The key of the module to retrieve.
+ * @returns An object containing:
+ *   - `module` — The resolved module instance, `null` when no app is
+ *     selected, or `undefined` if the app does not enable the requested module.
+ *   - `error` — Any error emitted during initialisation.
+ *   - `complete` — `true` when the observable has completed.
+ *
  * @remarks
- *  - when module is null, there are no current selected application
- *  - when undefined is, the application has not enabled the requested module
+ * - A `null` value means no application is currently selected.
+ * - An `undefined` value means the application has not enabled the requested module.
  */
 export const useCurrentAppModule = <
   TType extends AnyModule | unknown = unknown,
@@ -32,13 +38,19 @@ export const useCurrentAppModule = <
   complete: boolean;
 } => {
   const { modules, error, complete } = useCurrentAppModules();
-  const module =
-    modules === null
-      ? null
-      : modules === undefined
-        ? undefined
-        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (modules[moduleKey as keyof typeof modules] as any);
+  const module = (() => {
+    // Preserve an explicit null (modules not applicable) distinct from undefined (not yet loaded)
+    if (modules === null) {
+      return null;
+    }
+    // Modules are still loading; propagate undefined rather than throwing
+    if (modules === undefined) {
+      return undefined;
+    }
+    // Module lookup by dynamic key can't be statically narrowed to the exact module type; cast to any.
+    // biome-ignore lint/suspicious/noExplicitAny: dynamic key lookup can't be statically narrowed to the exact module type
+    return modules[moduleKey as keyof typeof modules] as any;
+  })();
   return { module, error, complete };
 };
 

package/src/app/useCurrentAppModules.ts

@@ -7,12 +7,22 @@ import type { AnyModule } from '@equinor/fusion-framework-module';
 import { useObservableState } from '@equinor/fusion-observable/react';
 
 /**
- * Observers the stream of current app initialized modules
+ * React hook that observes the initialised modules of the current application.
  *
- * __Warning:__ type hint templates are only hints, this does not check if the modules are actually enabled!
+ * @remarks
+ * Subscribes to the `instance$` stream of the current app and returns the
+ * resolved module instances.
  *
- * @template TModule type hint modules which the application has configured
- * @returns the observable instance of initialized modules of the application
+ * **Warning:** The template parameter is a compile-time hint only — the
+ * hook does not validate that the specified modules are actually enabled.
+ *
+ * @template TModules - Tuple of module types expected on the current app
+ *   (type-hint only).
+ * @returns An object containing:
+ *   - `modules` — The initialised {@link AppModulesInstance}, `null` when no
+ *     app is selected, or `undefined` while loading.
+ *   - `error` — Any error emitted during initialisation.
+ *   - `complete` — `true` when the observable has completed.
  */
 export const useCurrentAppModules = <TModules extends Array<AnyModule> = []>(): {
   modules?: AppModulesInstance<TModules> | null;

package/src/context/index.ts

@@ -1,3 +1,13 @@
+/**
+ * Context React hooks.
+ *
+ * @remarks
+ * Available via the `@equinor/fusion-framework-react/context` sub-entry-point.
+ * Re-exports the context module’s React API and adds a convenience
+ * `useCurrentContext` hook that resolves the module from the framework.
+ *
+ * @module
+ */
 export * from '@equinor/fusion-framework-react-module-context';
 
 export { useCurrentContext } from './useCurrentContext';

package/src/context/useCurrentContext.ts

@@ -1,6 +1,22 @@
 import { useCurrentContext as _useCurrentContext } from '@equinor/fusion-framework-react-module-context';
 import { useFramework } from '../useFramework';
 
+/**
+ * React hook that returns the currently selected Fusion context.
+ *
+ * @remarks
+ * This is a convenience wrapper that resolves the context module from the
+ * framework instance and delegates to the underlying
+ * `useCurrentContext` hook from `@equinor/fusion-framework-react-module-context`.
+ *
+ * @returns The current context state as defined by the context module.
+ *
+ * @example
+ * ```ts
+ * const { currentContext } = useCurrentContext();
+ * console.log(currentContext?.id);
+ * ```
+ */
 export const useCurrentContext = () => _useCurrentContext(useFramework().modules.context);
 
 export default useCurrentContext;

package/src/context.ts

@@ -1,25 +1,14 @@
 import { createContext } from 'react';
 import type { Fusion } from '@equinor/fusion-framework';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const context = createContext<Fusion<any> | null>(null);
-
 /**
- * Component for providing framework.
+ * Internal React context that holds the current {@link Fusion} instance.
  *
  * @remarks
- * Should be created by {@link createFrameworkProvider}
+ * Consumers should not use this directly — prefer the {@link useFramework}
+ * hook or the {@link FrameworkProvider} component.
  *
- * @example
- * ```tsx
- * import {FrameworkProvider} from '@equinor/fusion-framework-react';
- * export const Component = (args: React.PropsWithChildren<{framework: Fusion}>) => {
- *   return (
- *      <FrameworkProvider value={args.framework}>
- *        {args.children}
- *      </FrameworkProvider>
- *   );
- * }
- * ```
+ * @internal
  */
-export const FrameworkProvider = context.Provider;
+// biome-ignore lint/suspicious/noExplicitAny: `Fusion<any>` widens the context to accept a Fusion instance with any concrete module set
+export const context = createContext<Fusion<any> | null>(null);

package/src/create-framework-provider.tsx

@@ -3,32 +3,53 @@ import { lazy } from 'react';
 import initFusion from '@equinor/fusion-framework';
 import { FrameworkConfigurator } from '@equinor/fusion-framework';
 
-import { FrameworkProvider } from './context';
+import { FrameworkProvider } from './framework-provider';
 import type { AnyModule, ModulesInstanceType } from '@equinor/fusion-framework-module';
 import { ModuleProvider } from '@equinor/fusion-framework-react-module';
 
 /**
- * Create a framework provider for react.
+ * Creates a lazy-loaded React component that initialises a Fusion Framework
+ * instance and exposes it via context providers.
  *
- * This function is for providers of framework, like a portal.
+ * @remarks
+ * This is the low-level factory used by the {@link Framework} component.
+ * Call it when you need fine-grained control over memoisation or when you
+ * want to embed the provider in a custom `<Suspense>` boundary.
+ *
+ * The returned component is created with `React.lazy`, so it **must** be
+ * rendered inside a `<Suspense>` boundary.
+ *
+ * @template TModules - Tuple of additional module types to register.
+ * @template TRef - Type of the optional parent module-instance reference.
+ *
+ * @param cb - Callback that receives a {@link FrameworkConfigurator} (and an
+ *   optional parent ref) for registering modules and configuration.
+ * @param ref - Optional parent module instance to inherit configuration from.
+ * @returns A `React.lazy` component that provides the initialised framework
+ *   to its children.
  *
- * @param configurator - callback for configuring modules
  * @example
  * ```tsx
- * const config: FrameworkConfigurator = (config) => {}
+ * import { createFrameworkProvider } from '@equinor/fusion-framework-react';
+ *
  * const Portal = () => {
- *   const Framework = createFrameworkProvider(config);
+ *   const FrameworkProvider = createFrameworkProvider((config) => {
+ *     config.http.configureClient('my-api', { baseUri: 'https://api.example.com' });
+ *   });
+ *
  *   return (
- *      <Suspense fallback={<span>loading...</span>}>
- *          <Framework>{children}</Framework>
- *      </Suspense>
+ *     <Suspense fallback={<span>Loading…</span>}>
+ *       <FrameworkProvider>
+ *         <App />
+ *       </FrameworkProvider>
+ *     </Suspense>
  *   );
  * };
  * ```
  */
 export const createFrameworkProvider = <
   TModules extends Array<AnyModule> = [],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: default must be bivariant `any`, not `unknown` \u2014 `unknown` breaks assignability when a concrete `TRef` is passed where the default-typed generic is expected
   TRef extends ModulesInstanceType<[AnyModule]> = any,
 >(
   cb: (configurator: FrameworkConfigurator<TModules>, ref?: TRef) => void | Promise<void>,

package/src/feature-flag/index.ts

@@ -1,3 +1,13 @@
+/**
+ * Feature-flag React hooks.
+ *
+ * @remarks
+ * Available via the `@equinor/fusion-framework-react/feature-flag` sub-entry-point.
+ * Provides hooks to read, toggle, and observe feature flags at the
+ * framework or application level.
+ *
+ * @module
+ */
 export { useFeature } from './useFeature';
 export { useFeatures } from './useFeatures';
 export { useCurrentAppFeatures } from './useCurrentAppFeatures';

package/src/feature-flag/useCurrentAppFeatures.ts

@@ -3,8 +3,18 @@ import { useCurrentAppModule } from '../app';
 import { useFeatures, type UseFeaturesResult } from './useFeatures';
 
 /**
- * Custom hook that returns the current app features and provides a function to toggle a feature.
- * @returns An object containing the current app features, a function to toggle a feature, and any error that occurred.
+ * React hook that returns feature flags registered on the current application.
+ *
+ * @returns A {@link UseFeaturesResult} containing:
+ *   - `features` — Array of feature flags for the current app.
+ *   - `toggleFeature(key, enable?)` — Toggles a feature flag on or off.
+ *   - `error` — Any error from the feature-flag or app-module streams.
+ *
+ * @example
+ * ```ts
+ * const { features, toggleFeature } = useCurrentAppFeatures();
+ * toggleFeature('dark-mode', true);
+ * ```
  */
 export const useCurrentAppFeatures = (): UseFeaturesResult => {
   const { module, error: moduleError } = useCurrentAppModule<FeatureFlagModule>('featureFlag');

package/src/feature-flag/useFeature.ts

@@ -11,28 +11,52 @@ import { useObservableState } from '@equinor/fusion-observable/react';
 
 import { findFeature } from '@equinor/fusion-framework-module-feature-flag/selectors';
 
+/**
+ * Return type of the {@link useFeature} hook.
+ *
+ * @template T - Value type carried by the feature flag.
+ */
 export interface UseFeatureResult<T> {
+  /** The resolved feature flag, or `undefined` while loading. */
   feature?: IFeatureFlag<T>;
+  /** Any error emitted by the feature-flag observable. */
   error?: unknown;
   /**
-   * @param enable - Optional provide new enabled state of the feature flag. _Defaults to inversion of current feature flag state_
+   * Toggles the feature flag.
+   *
+   * @param enable - Explicit enabled state. When omitted the current state
+   *   is inverted.
    */
   toggleFeature: (enable?: boolean) => void;
 }
 
 /**
- * Custom hook that retrieves a feature flag from a feature flag provider.
+ * React hook that retrieves and manages a single feature flag.
  *
- * @template T - The type of the feature flag value.
- * @param {IFeatureFlagProvider} provider - The feature flag provider.
- * @param {string} key - The key of the feature flag.
- * @returns {UseFeatureResult<T>} - An object containing the feature flag value, a function to toggle the feature flag, and any error that occurred.
+ * @template T - Value type carried by the feature flag.
+ * @param provider - The feature-flag provider instance.
+ * @param key - Unique key identifying the feature flag.
+ * @returns A {@link UseFeatureResult} with the flag value, toggle helper,
+ *   and any error.
+ *
+ * @example
+ * ```ts
+ * const { feature, toggleFeature } = useFeature(provider, 'dark-mode');
+ * console.log(feature?.enabled);
+ * ```
  */
 export const useFeature = <T = unknown>(
   provider: IFeatureFlagProvider,
   key: string,
 ): UseFeatureResult<T> => {
-  const feature$ = useMemo(() => provider.features$.pipe(findFeature<T>(key)), [provider, key]);
+  // Narrow the features stream down to just the one matching feature by key.
+  const feature$ = useMemo(
+    () =>
+      provider.features$
+        // Keep the observable scoped to the requested feature key.
+        .pipe(findFeature<T>(key)),
+    [provider, key],
+  );
   const { value: feature, error } = useObservableState(feature$ ?? EMPTY);
   const toggleFeature = useCallback(
     (enable?: boolean) => {