fix(react-storybook-addon): transform decorator to function in withAriaLive()

apps/vr-tests-react-components/.storybook/preview.js

@@ -69,4 +69,10 @@ setAddon({
 });
 
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
-export const parameters = { layout: 'none', mode: 'vr-test' };
+export const parameters = {
+  layout: 'none',
+  mode: 'vr-test',
+  reactStorybookAddon: {
+    disabledDecorators: ['AriaLive'],
+  },
+};

packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md

@@ -31,6 +31,10 @@ export interface FluentParameters extends Parameters_2 {
     fluentTheme?: ThemeIds;
     // (undocumented)
     mode?: 'default' | 'vr-test';
+    // (undocumented)
+    reactStorybookAddon?: {
+        disabledDecorators: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];
+    };
 }
 
 // @public (undocumented)
@@ -46,6 +50,9 @@ export function parameters(options?: FluentParameters): {
     dir: string;
     fluentTheme: string;
     mode: string;
+    reactStorybookAddon?: {
+        disabledDecorators: ["AriaLive" | "FluentProvider" | "ReactStrictMode"];
+    } | undefined;
     fileName?: string | undefined;
     options?: OptionsParameter | undefined;
     layout?: "centered" | "fullscreen" | "padded" | "none" | undefined;

packages/react-components/react-storybook-addon/src/decorators/withAriaLive.tsx

@@ -1,17 +1,29 @@
+import { AriaLiveAnnouncer } from '@fluentui/react-aria';
 import * as React from 'react';
 
-import { AriaLiveAnnouncer } from '@fluentui/react-aria';
+import { FluentStoryContext } from '../hooks';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+
+export const withAriaLive = (Story: () => JSX.Element, context: FluentStoryContext) => {
+  if (isDecoratorDisabled(context, 'AriaLive')) {
+    return Story();
+  }
 
-export const withAriaLive = (StoryFn: () => JSX.Element) => {
-  return <AriaLiveWrapper>{StoryFn()}</AriaLiveWrapper>;
+  return (
+    <AriaLiveWrapper>
+      <Story />
+    </AriaLiveWrapper>
+  );
 };
 
 const AriaLiveWrapper: React.FC<{ children: React.ReactNode }> = props => {
   const [mounted, setMounted] = React.useState(false);
+
   React.useEffect(() => {
     // The AriaLiveAnnouncer appends an element to DOM in an effect
     // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so
     setMounted(true);
   }, []);
+
   return <AriaLiveAnnouncer>{mounted && props.children}</AriaLiveAnnouncer>;
 };

packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx

@@ -5,6 +5,7 @@ import { Theme } from '@fluentui/react-theme';
 import { themes, defaultTheme, ThemeIds } from '../theme';
 import { DIR_ID, THEME_ID } from '../constants';
 import { FluentGlobals, FluentStoryContext } from '../hooks';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
 
 const findTheme = (themeId?: ThemeIds) => {
   if (!themeId) {
@@ -23,8 +24,12 @@ const getActiveFluentTheme = (globals: FluentGlobals) => {
 export const withFluentProvider = (StoryFn: () => JSX.Element, context: FluentStoryContext) => {
   const { globals, parameters } = context;
   const { mode } = parameters;
-  const isVrTest = mode === 'vr-test';
 
+  if (isDecoratorDisabled(context, 'FluentProvider')) {
+    return StoryFn();
+  }
+
+  const isVrTest = mode === 'vr-test';
   const dir = parameters.dir ?? globals[DIR_ID] ?? 'ltr';
   const globalTheme = getActiveFluentTheme(globals);
   const paramTheme = findTheme(parameters.fluentTheme);

packages/react-components/react-storybook-addon/src/decorators/withReactStrictMode.tsx

@@ -2,8 +2,13 @@ import * as React from 'react';
 
 import { STRICT_MODE_ID } from '../constants';
 import { FluentStoryContext } from '../hooks';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
 
 export const withReactStrictMode = (StoryFn: () => JSX.Element, context: FluentStoryContext) => {
+  if (isDecoratorDisabled(context, 'ReactStrictMode')) {
+    return StoryFn();
+  }
+
   const isActive = context.globals[STRICT_MODE_ID] ?? false;
 
   return <StrictModeWrapper strictMode={isActive}>{StoryFn()}</StrictModeWrapper>;

packages/react-components/react-storybook-addon/src/hooks.ts

@@ -25,6 +25,7 @@ export interface FluentParameters extends Parameters {
   dir?: 'ltr' | 'rtl';
   fluentTheme?: ThemeIds;
   mode?: 'default' | 'vr-test';
+  reactStorybookAddon?: { disabledDecorators: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'] };
 }
 
 export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] {

packages/react-components/react-storybook-addon/src/utils/isDecoratorDisabled.ts

@@ -0,0 +1,7 @@
+import type { FluentParameters, FluentStoryContext } from '../hooks';
+
+type DecoratorName = NonNullable<FluentParameters['reactStorybookAddon']>['disabledDecorators'][number];
+
+export function isDecoratorDisabled(context: FluentStoryContext, decoratorName: DecoratorName): boolean {
+  return context.parameters.reactStorybookAddon?.disabledDecorators?.includes(decoratorName) ?? false;
+}