@equinor/fusion-framework-react 7.4.0 → 7.4.2

package/dist/types/Framework.d.ts

@@ -1,5 +1,5 @@
-import { FrameworkConfigurator } from '@equinor/fusion-framework';
-import { PropsWithChildren, ReactNode } from 'react';
+import type { FrameworkConfigurator } from '@equinor/fusion-framework';
+import { type PropsWithChildren, type ReactNode } from 'react';
 type ConfigureCallback = (configurator: FrameworkConfigurator) => void;
 export declare const Framework: (props: PropsWithChildren<{
     readonly configure: ConfigureCallback;

package/dist/types/app/useAppProvider.d.ts

@@ -1,5 +1,5 @@
-import { FusionModulesInstance } from '@equinor/fusion-framework';
-import { AppModule } from '@equinor/fusion-framework-module-app';
+import type { FusionModulesInstance } from '@equinor/fusion-framework';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
 /**
  * React Hook - get appProvider interface
  * @returns framework AppModule

package/dist/types/app/useApps.d.ts

@@ -1,4 +1,4 @@
-import { AppManifest } from '@equinor/fusion-framework-module-app';
+import type { AppManifest } from '@equinor/fusion-framework-module-app';
 type UseAppsArgs = {
     /** @deprecated - no longer available */
     includeHidden?: boolean;

package/dist/types/app/useCurrentApp.d.ts

@@ -1,5 +1,5 @@
-import { type AnyModule } from '@equinor/fusion-framework-module';
-import { ConfigEnvironment, type CurrentApp } from '@equinor/fusion-framework-module-app';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import type { ConfigEnvironment, CurrentApp } from '@equinor/fusion-framework-module-app';
 /**
  * Observers the stream of current app and return the latest application
  *

package/dist/types/app/useCurrentAppModule.d.ts

@@ -1,5 +1,5 @@
-import { AppModules, AppModulesInstance } from '@equinor/fusion-framework-module-app';
-import { ModuleKey, type AnyModule, ModuleTypes, ModuleType } from '@equinor/fusion-framework-module';
+import type { AppModules, AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import type { ModuleKey, AnyModule, ModuleTypes, ModuleType } from '@equinor/fusion-framework-module';
 /**
  * Retrieves the current app module based on the provided module key.
  * @template TType - The type of the module.

package/dist/types/app/useCurrentAppModules.d.ts

@@ -1,5 +1,5 @@
-import { AppModulesInstance } from '@equinor/fusion-framework-module-app';
-import { type AnyModule } from '@equinor/fusion-framework-module';
+import type { AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import type { AnyModule } from '@equinor/fusion-framework-module';
 /**
  * Observers the stream of current app initialized modules
  *

package/dist/types/create-framework-provider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { FrameworkConfigurator } from '@equinor/fusion-framework';
 import type { AnyModule, ModulesInstanceType } from '@equinor/fusion-framework-module';
 /**

package/dist/types/feature-flag/useFeature.d.ts

@@ -1,4 +1,4 @@
-import { type IFeatureFlag, type IFeatureFlagProvider } from '@equinor/fusion-framework-module-feature-flag';
+import type { IFeatureFlag, IFeatureFlagProvider } from '@equinor/fusion-framework-module-feature-flag';
 export interface UseFeatureResult<T> {
     feature?: IFeatureFlag<T>;
     error?: unknown;

package/dist/types/feature-flag/useFeatures.d.ts

@@ -1,5 +1,5 @@
-import { type IFeatureFlagProvider, type IFeatureFlag } from '@equinor/fusion-framework-module-feature-flag';
-import { type FeatureSelectorFn } from '@equinor/fusion-framework-module-feature-flag/selectors';
+import type { IFeatureFlagProvider, IFeatureFlag } from '@equinor/fusion-framework-module-feature-flag';
+import type { FeatureSelectorFn } from '@equinor/fusion-framework-module-feature-flag/selectors';
 export interface UseFeaturesResult {
     features: IFeatureFlag[];
     error: unknown;

package/dist/types/hooks/use-current-user.d.ts

@@ -1,2 +1,2 @@
-import { AccountInfo } from '@equinor/fusion-framework-module-msal';
+import type { AccountInfo } from '@equinor/fusion-framework-module-msal';
 export declare const useCurrentUser: () => AccountInfo | undefined;

package/dist/types/hooks/use-http-client.d.ts

@@ -1,4 +1,4 @@
-import { Fusion } from '@equinor/fusion-framework';
+import type { Fusion } from '@equinor/fusion-framework';
 type HttpClient = ReturnType<Fusion['modules']['http']['createClient']>;
 type FrameworkHttpClient = 'portal' | 'people';
 export declare const useHttpClient: (name: FrameworkHttpClient) => HttpClient;

package/dist/types/useFrameworkModule.d.ts

@@ -1,5 +1,5 @@
 import type { FusionModules, FusionModulesInstance } from '@equinor/fusion-framework';
-import { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
+import type { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
 /**
  * Retrieves a module from the framework instance based on its name.
  *

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "7.4.0";
+export declare const version = "7.4.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react",
-  "version": "7.4.0",
+  "version": "7.4.2",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -69,30 +69,30 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@equinor/fusion-framework": "^7.3.0",
-    "@equinor/fusion-framework-react-module": "^3.1.6",
-    "@equinor/fusion-framework-react-module-http": "^8.0.1",
-    "@equinor/fusion-observable": "^8.4.4",
-    "@equinor/fusion-framework-module": "^4.3.5"
+    "@equinor/fusion-framework": "^7.3.2",
+    "@equinor/fusion-framework-module": "^4.3.6",
+    "@equinor/fusion-framework-react-module": "^3.1.7",
+    "@equinor/fusion-framework-react-module-http": "^8.0.2",
+    "@equinor/fusion-observable": "^8.4.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.50",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.5.4",
-    "@equinor/fusion-framework-module-app": "^6.1.4",
-    "@equinor/fusion-framework-module-event": "^4.3.0",
-    "@equinor/fusion-framework-module-feature-flag": "^1.1.12",
-    "@equinor/fusion-framework-module-msal": "^4.0.0",
-    "@equinor/fusion-framework-react-module-context": "^6.2.17"
+    "typescript": "^5.7.3",
+    "@equinor/fusion-framework-module-app": "^6.1.5",
+    "@equinor/fusion-framework-module-feature-flag": "^1.1.13",
+    "@equinor/fusion-framework-module-event": "^4.3.1",
+    "@equinor/fusion-framework-react-module-context": "^6.2.19",
+    "@equinor/fusion-framework-module-msal": "^4.0.1"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "@equinor/fusion-framework-module-feature-flag": "^1.1.12",
-    "@equinor/fusion-framework-react-module-signalr": "^3.0.21"
+    "@equinor/fusion-framework-module-feature-flag": "^1.1.13",
+    "@equinor/fusion-framework-react-module-signalr": "^3.0.22"
   },
   "peerDependenciesMeta": {
     "@equinor/fusion-framework-module-event": {

package/src/Framework.tsx

@@ -1,25 +1,25 @@
-import { FrameworkConfigurator } from '@equinor/fusion-framework';
+import type { FrameworkConfigurator } from '@equinor/fusion-framework';
 import { createFrameworkProvider } from './create-framework-provider';
-import { PropsWithChildren, ReactNode, Suspense, useMemo } from 'react';
+import { type PropsWithChildren, type ReactNode, Suspense, useMemo } from 'react';
 import { useModules } from '@equinor/fusion-framework-react-module';
 
 type ConfigureCallback = (configurator: FrameworkConfigurator) => void;
 
 export const Framework = (
-    props: PropsWithChildren<{
-        readonly configure: ConfigureCallback;
-        readonly fallback: NonNullable<ReactNode> | null;
-    }>,
+  props: PropsWithChildren<{
+    readonly configure: ConfigureCallback;
+    readonly fallback: NonNullable<ReactNode> | null;
+  }>,
 ) => {
-    const { configure, fallback, children } = props;
-    //import modules from parent context
-    const ref = useModules<[]>();
-    const Component = useMemo(() => createFrameworkProvider(configure, ref), [configure, ref]);
-    return (
-        <Suspense fallback={fallback}>
-            <Component>{children}</Component>
-        </Suspense>
-    );
+  const { configure, fallback, children } = props;
+  //import modules from parent context
+  const ref = useModules<[]>();
+  const Component = useMemo(() => createFrameworkProvider(configure, ref), [configure, ref]);
+  return (
+    <Suspense fallback={fallback}>
+      <Component>{children}</Component>
+    </Suspense>
+  );
 };
 
 export default Framework;

package/src/app/useAppProvider.ts

@@ -1,5 +1,5 @@
-import { FusionModulesInstance } from '@equinor/fusion-framework';
-import { AppModule } from '@equinor/fusion-framework-module-app';
+import type { FusionModulesInstance } from '@equinor/fusion-framework';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
 
 import { useFramework } from '../useFramework';
 
@@ -8,12 +8,12 @@ import { useFramework } from '../useFramework';
  * @returns framework AppModule
  */
 export const useAppProvider = (): FusionModulesInstance<[AppModule]>['app'] => {
-    const provider = useFramework<[AppModule]>().modules.app;
-    if (!provider) {
-        throw Error('Current framework does not have AppModule configured');
-    }
+  const provider = useFramework<[AppModule]>().modules.app;
+  if (!provider) {
+    throw Error('Current framework does not have AppModule configured');
+  }
 
-    return provider;
+  return provider;
 };
 
 export default useAppProvider;

package/src/app/useApps.ts

@@ -1,14 +1,14 @@
-import { AppManifest } from '@equinor/fusion-framework-module-app';
+import type { AppManifest } from '@equinor/fusion-framework-module-app';
 import { useObservableState } from '@equinor/fusion-observable/react';
 import { useMemo } from 'react';
 
 import { useAppProvider } from './useAppProvider';
 
 type UseAppsArgs = {
-    /** @deprecated - no longer available */
-    includeHidden?: boolean;
-    // only show apps that the current user has access to
-    filterByCurrentUser?: boolean;
+  /** @deprecated - no longer available */
+  includeHidden?: boolean;
+  // only show apps that the current user has access to
+  filterByCurrentUser?: boolean;
 };
 
 /**
@@ -18,25 +18,24 @@ type UseAppsArgs = {
  * @since 7.1.1
  */
 export const useApps = (
-    args?: UseAppsArgs,
+  args?: UseAppsArgs,
 ): { apps: AppManifest[] | undefined; isLoading: boolean; error: unknown } => {
-    const provider = useAppProvider();
+  const provider = useAppProvider();
 
-    const { filterByCurrentUser } = args || {};
+  const { filterByCurrentUser } = args || {};
 
-    const {
-        value: apps,
-        complete,
-        error,
-    } = useObservableState(
-        useMemo(
-            () =>
-                provider.getAppManifests(filterByCurrentUser ? { filterByCurrentUser } : undefined),
-            [provider, filterByCurrentUser],
-        ),
-    );
+  const {
+    value: apps,
+    complete,
+    error,
+  } = useObservableState(
+    useMemo(
+      () => provider.getAppManifests(filterByCurrentUser ? { filterByCurrentUser } : undefined),
+      [provider, filterByCurrentUser],
+    ),
+  );
 
-    return { apps, isLoading: !complete, error };
+  return { apps, isLoading: !complete, error };
 };
 
 export default useApps;

package/src/app/useCurrentApp.ts

@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 
 import { useObservableState } from '@equinor/fusion-observable/react';
 
-import { type AnyModule } from '@equinor/fusion-framework-module';
-import {
-    ConfigEnvironment,
-    type AppModule,
-    type CurrentApp,
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import type {
+  ConfigEnvironment,
+  AppModule,
+  CurrentApp,
 } from '@equinor/fusion-framework-module-app';
 
 import { useFramework } from '../useFramework';
@@ -20,26 +20,26 @@ import { useFramework } from '../useFramework';
  * @template TEnv type hint what kind of environment config the application has
  */
 export const useCurrentApp = <
-    TModules extends Array<AnyModule> = [],
-    TEnv extends ConfigEnvironment = ConfigEnvironment,
+  TModules extends Array<AnyModule> = [],
+  TEnv extends ConfigEnvironment = ConfigEnvironment,
 >(): {
-    currentApp?: CurrentApp<TModules, TEnv> | null;
-    setCurrentApp: (appKey: string) => void;
-    clearCurrentApp: () => void;
-    error?: unknown;
+  currentApp?: CurrentApp<TModules, TEnv> | null;
+  setCurrentApp: (appKey: string) => void;
+  clearCurrentApp: () => void;
+  error?: unknown;
 } => {
-    const provider = useFramework<[AppModule]>().modules.app;
-    if (!provider) {
-        throw Error('Current framework does not have AppModule configured');
-    }
-    const currentApp$ = useMemo(() => provider.current$, [provider]);
-    const { value, error } = useObservableState(currentApp$, { initial: provider.current });
-    return {
-        currentApp: value as CurrentApp<TModules, TEnv>,
-        setCurrentApp: useMemo(() => provider.setCurrentApp.bind(provider), [provider]),
-        clearCurrentApp: useMemo(() => provider.clearCurrentApp.bind(provider), [provider]),
-        error,
-    };
+  const provider = useFramework<[AppModule]>().modules.app;
+  if (!provider) {
+    throw Error('Current framework does not have AppModule configured');
+  }
+  const currentApp$ = useMemo(() => provider.current$, [provider]);
+  const { value, error } = useObservableState(currentApp$, { initial: provider.current });
+  return {
+    currentApp: value as CurrentApp<TModules, TEnv>,
+    setCurrentApp: useMemo(() => provider.setCurrentApp.bind(provider), [provider]),
+    clearCurrentApp: useMemo(() => provider.clearCurrentApp.bind(provider), [provider]),
+    error,
+  };
 };
 
 export default useCurrentApp;

package/src/app/useCurrentAppModule.ts

@@ -1,9 +1,9 @@
-import { AppModules, AppModulesInstance } from '@equinor/fusion-framework-module-app';
-import {
-    ModuleKey,
-    type AnyModule,
-    ModuleTypes,
-    ModuleType,
+import type { AppModules, AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import type {
+  ModuleKey,
+  AnyModule,
+  ModuleTypes,
+  ModuleType,
 } from '@equinor/fusion-framework-module';
 import useCurrentAppModules from './useCurrentAppModules';
 
@@ -18,28 +18,28 @@ import useCurrentAppModules from './useCurrentAppModules';
  *  - when undefined is, the application has not enabled the requested module
  */
 export const useCurrentAppModule = <
-    TType extends AnyModule | unknown = unknown,
-    TKey extends string = ModuleKey<ModuleTypes<AppModules<[TType]>>>,
+  TType extends AnyModule | unknown = unknown,
+  TKey extends string = ModuleKey<ModuleTypes<AppModules<[TType]>>>,
 >(
-    moduleKey: TKey,
+  moduleKey: TKey,
 ): {
-    module?:
-        | (TType extends AnyModule
-              ? ModuleType<TType>
-              : AppModulesInstance[Extract<keyof AppModulesInstance, TKey>])
-        | null;
-    error?: unknown;
-    complete: boolean;
+  module?:
+    | (TType extends AnyModule
+        ? ModuleType<TType>
+        : AppModulesInstance[Extract<keyof AppModulesInstance, TKey>])
+    | null;
+  error?: unknown;
+  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);
-    return { module, error, complete };
+  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);
+  return { module, error, complete };
 };
 
 export default useCurrentAppModule;

package/src/app/useCurrentAppModules.ts

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import useCurrentApp from './useCurrentApp';
 
-import { AppModulesInstance } from '@equinor/fusion-framework-module-app';
-import { Observable, of } from 'rxjs';
-import { type AnyModule } from '@equinor/fusion-framework-module';
+import type { AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import { type Observable, of } from 'rxjs';
+import type { AnyModule } from '@equinor/fusion-framework-module';
 import { useObservableState } from '@equinor/fusion-observable/react';
 
 /**
@@ -15,30 +15,28 @@ import { useObservableState } from '@equinor/fusion-observable/react';
  * @returns the observable instance of initialized modules of the application
  */
 export const useCurrentAppModules = <TModules extends Array<AnyModule> = []>(): {
-    modules?: AppModulesInstance<TModules> | null;
-    error?: unknown;
-    complete: boolean;
+  modules?: AppModulesInstance<TModules> | null;
+  error?: unknown;
+  complete: boolean;
 } => {
-    const { currentApp, error: appError } = useCurrentApp<TModules>();
-    const modules$ = useMemo(
-        () =>
-            currentApp
-                ? (currentApp.instance$ as Observable<AppModulesInstance<TModules>>)
-                : of(null),
-        [currentApp],
-    );
-    const {
-        value: modules,
-        error,
-        complete,
-    } = useObservableState(modules$, {
-        initial: currentApp === undefined ? undefined : (currentApp?.instance ?? null),
-    });
-    return {
-        modules,
-        error: error ?? appError,
-        complete,
-    };
+  const { currentApp, error: appError } = useCurrentApp<TModules>();
+  const modules$ = useMemo(
+    () =>
+      currentApp ? (currentApp.instance$ as Observable<AppModulesInstance<TModules>>) : of(null),
+    [currentApp],
+  );
+  const {
+    value: modules,
+    error,
+    complete,
+  } = useObservableState(modules$, {
+    initial: currentApp === undefined ? undefined : (currentApp?.instance ?? null),
+  });
+  return {
+    modules,
+    error: error ?? appError,
+    complete,
+  };
 };
 
 export default useCurrentAppModules;

package/src/create-framework-provider.tsx

@@ -1,4 +1,5 @@
-import React, { lazy } from 'react';
+import type React from 'react';
+import { lazy } from 'react';
 import initFusion from '@equinor/fusion-framework';
 import { FrameworkConfigurator } from '@equinor/fusion-framework';
 
@@ -26,22 +27,22 @@ import { ModuleProvider } from '@equinor/fusion-framework-react-module';
  * ```
  */
 export const createFrameworkProvider = <
-    TModules extends Array<AnyModule> = [],
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    TRef extends ModulesInstanceType<[AnyModule]> = any,
+  TModules extends Array<AnyModule> = [],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TRef extends ModulesInstanceType<[AnyModule]> = any,
 >(
-    cb: (configurator: FrameworkConfigurator<TModules>, ref?: TRef) => void | Promise<void>,
-    ref?: TRef,
+  cb: (configurator: FrameworkConfigurator<TModules>, ref?: TRef) => void | Promise<void>,
+  ref?: TRef,
 ): React.LazyExoticComponent<React.FunctionComponent<React.PropsWithChildren<unknown>>> =>
-    lazy(async () => {
-        const configurator = new FrameworkConfigurator<TModules>();
-        await cb(configurator, ref);
-        const framework = await initFusion(configurator, ref);
-        return {
-            default: ({ children }: { children?: React.ReactNode }) => (
-                <FrameworkProvider value={framework}>
-                    <ModuleProvider value={framework.modules}>{children}</ModuleProvider>
-                </FrameworkProvider>
-            ),
-        };
-    });
+  lazy(async () => {
+    const configurator = new FrameworkConfigurator<TModules>();
+    await cb(configurator, ref);
+    const framework = await initFusion(configurator, ref);
+    return {
+      default: ({ children }: { children?: React.ReactNode }) => (
+        <FrameworkProvider value={framework}>
+          <ModuleProvider value={framework.modules}>{children}</ModuleProvider>
+        </FrameworkProvider>
+      ),
+    };
+  });

package/src/feature-flag/useCurrentAppFeatures.ts

@@ -1,4 +1,4 @@
-import { type FeatureFlagModule } from '@equinor/fusion-framework-module-feature-flag';
+import type { FeatureFlagModule } from '@equinor/fusion-framework-module-feature-flag';
 import { useCurrentAppModule } from '../app';
 import { useFeatures, type UseFeaturesResult } from './useFeatures';
 
@@ -7,13 +7,13 @@ import { useFeatures, type UseFeaturesResult } from './useFeatures';
  * @returns An object containing the current app features, a function to toggle a feature, and any error that occurred.
  */
 export const useCurrentAppFeatures = (): UseFeaturesResult => {
-    const { module, error: moduleError } = useCurrentAppModule<FeatureFlagModule>('featureFlag');
+  const { module, error: moduleError } = useCurrentAppModule<FeatureFlagModule>('featureFlag');
 
-    const { features, toggleFeature, error } = useFeatures(module);
+  const { features, toggleFeature, error } = useFeatures(module);
 
-    return {
-        features,
-        toggleFeature,
-        error: error ?? moduleError,
-    };
+  return {
+    features,
+    toggleFeature,
+    error: error ?? moduleError,
+  };
 };

package/src/feature-flag/useFeature.ts

@@ -2,9 +2,9 @@ import { useCallback, useMemo } from 'react';
 
 import { EMPTY } from 'rxjs';
 
-import {
-    type IFeatureFlag,
-    type IFeatureFlagProvider,
+import type {
+  IFeatureFlag,
+  IFeatureFlagProvider,
 } from '@equinor/fusion-framework-module-feature-flag';
 
 import { useObservableState } from '@equinor/fusion-observable/react';
@@ -12,12 +12,12 @@ import { useObservableState } from '@equinor/fusion-observable/react';
 import { findFeature } from '@equinor/fusion-framework-module-feature-flag/selectors';
 
 export interface UseFeatureResult<T> {
-    feature?: IFeatureFlag<T>;
-    error?: unknown;
-    /**
-     * @param enable - Optional provide new enabled state of the feature flag. _Defaults to inversion of current feature flag state_
-     */
-    toggleFeature: (enable?: boolean) => void;
+  feature?: IFeatureFlag<T>;
+  error?: unknown;
+  /**
+   * @param enable - Optional provide new enabled state of the feature flag. _Defaults to inversion of current feature flag state_
+   */
+  toggleFeature: (enable?: boolean) => void;
 }
 
 /**
@@ -29,19 +29,19 @@ export interface UseFeatureResult<T> {
  * @returns {UseFeatureResult<T>} - An object containing the feature flag value, a function to toggle the feature flag, and any error that occurred.
  */
 export const useFeature = <T = unknown>(
-    provider: IFeatureFlagProvider,
-    key: string,
+  provider: IFeatureFlagProvider,
+  key: string,
 ): UseFeatureResult<T> => {
-    const feature$ = useMemo(() => provider.features$.pipe(findFeature<T>(key)), [provider, key]);
-    const { value: feature, error } = useObservableState(feature$ ?? EMPTY);
-    const toggleFeature = useCallback(
-        (enable?: boolean) => {
-            const enabled = enable === undefined ? !provider.getFeature(key)?.enabled : enable;
-            provider.toggleFeature({ key, enabled });
-        },
-        [provider, key],
-    );
-    return { feature, toggleFeature, error };
+  const feature$ = useMemo(() => provider.features$.pipe(findFeature<T>(key)), [provider, key]);
+  const { value: feature, error } = useObservableState(feature$ ?? EMPTY);
+  const toggleFeature = useCallback(
+    (enable?: boolean) => {
+      const enabled = enable === undefined ? !provider.getFeature(key)?.enabled : enable;
+      provider.toggleFeature({ key, enabled });
+    },
+    [provider, key],
+  );
+  return { feature, toggleFeature, error };
 };
 
 export default useFeature;